Nocron Landing Page

Next.jstypescriptweb-developmentTailwindCSSPostCSS


🔗 Ver en GitHub 🚀 Ver Demo Live

Nocron Project Summary - One Page Launch

🎯 Product

Nocron Landing Page is a landing page for a lightweight automation and scheduling engine designed for Notion-based workflows.

Key features:

  • Waitlist form with email submission
  • Multi-language support (English, Spanish, French)
  • Dark/light mode with persistence
  • Responsive design mobile-first
  • Interactive FAQ with accordion
  • “How it works” section with 3-step process
  • SEO optimized with Open Graph and Twitter Card meta tags
  • Telegram notifications via GitHub Actions

🛠️ Technology Stack

Frontend

  • Next.js 15.5.4 - React framework with SSR
  • React 19.1.0 - UI library
  • TypeScript 5+ - Static typing with strict mode

Styling

  • TailwindCSS v4 - Utility-first CSS framework
  • PostCSS v4 - CSS processor

Development Tools

  • npm - Package manager
  • Git - Version control
  • GitHub Actions - CI/CD and notifications

Prepared Integrations

  • Google Analytics - Tracking points implemented
  • Backend API - Commented code ready to activate
  • Telegram Bot API - Deployment and issue notifications

🏗️ Architecture

Folder Structure

onePageLauch/
├── app/                          # Next.js App Router
│   ├── components/               # React components
│   │   ├── NocronLaunchPage.tsx # Main component (849 lines)
│   │   ├── LaunchingBadgeOption1.tsx # Animated badge
│   │   └── ErrorMessageBox.tsx  # Error/404 screen
│   ├── layout.tsx               # Root layout + SEO metadata
│   ├── page.tsx                 # Home page
│   ├── not-found.tsx            # 404 page
│   └── globals.css              # Global TailwindCSS v4 styles
├── public/                      # Static assets (SVGs)
├── .github/workflows/           # GitHub Actions
│   ├── deploy-notification.yml
│   └── issue-notification.yml
└── [configuration files]

Main Component (NocronLaunchPage.tsx)

State managed with React Hooks:

  • theme - Light/dark theme with localStorage
  • lang - Language (en/es/fr) with browser auto-detection
  • email - Form input
  • isSubmitting - Loading state
  • submitStatus - Submission result (idle/success/error)
  • openFaq - Currently open FAQ

Multi-language content (lines 26-318):

  • 3 complete objects (en, es, fr) with all translations
  • Includes UI texts, feature descriptions, FAQs and SEO meta tags

Rendered sections:

  1. Header - Logo + language selector + theme toggle
  2. Hero - Animated badge + slogan + waitlist form
  3. How It Works - 3-step process
  4. Value Propositions - 4 feature cards
  5. Social Proof - Company logos (placeholder)
  6. FAQ - Expandable questions
  7. About - Brief description
  8. Footer - Links + social networks

Form Submission Flow

User enters email
    ↓
Frontend validation
    ↓
Track Analytics event (prepared)
    ↓
[Backend API - commented] → Fallback to mailto:
    ↓
Success/error message
    ↓
Reset form (5s)

Current implementation: Opens email client with pre-filled message Ready for: Uncomment lines 421-426 for backend submission

Theme System

// localStorage persistence
localStorage.getItem('nocron_theme')

// System preference detection
window.matchMedia('(prefers-color-scheme: dark)')

// Applied via CSS class
document.documentElement.classList.add('dark')

File: app/components/NocronLaunchPage.tsx:321-347

Multi-language System

Auto-detection:

navigator.language.startsWith('es') → 'es'
navigator.language.startsWith('fr') → 'fr'
default → 'en'

Persistence: localStorage.getItem('nocron_lang') File: app/components/NocronLaunchPage.tsx:330-352

Dynamic SEO

Meta tags dynamically updated based on selected language:

  • Title
  • Description
  • Open Graph tags (og:title, og:description, og:image)
  • Twitter Card tags

File: app/components/NocronLaunchPage.tsx:354-388

Social Networks

Contact

GitHub Actions - Telegram Notifications

Deploy Notification (.github/workflows/deploy-notification.yml):

  • Trigger: push to main/production, deployment status, manual
  • Sends: commit message, author, branch, workflow link
  • Emojis: 🔔 (update), ✅ (success), ❌ (failure)

Issue Notification (.github/workflows/issue-notification.yml):

  • Trigger: opened, edited, closed, reopened, assigned, labeled
  • Sends: title, description, labels, assignee, author
  • Different emojis depending on action type

Implemented Design Patterns

  1. Component Composition - Reusable components (Card, Logo, Badge)
  2. Client-Side State Management - React Hooks without external libraries
  3. Progressive Enhancement - Works without JavaScript for basic content
  4. Mobile-First Responsive - Mobile-optimized design first
  5. Error Boundary - Runtime error handling (lines 792-838)

Performance Optimizations

  • Inline SVG images - No additional HTTP requests
  • Lazy loading - Deferred content loading
  • CSS-in-JS - Tailwind animations without JavaScript
  • No external libraries - Minimal bundle (React + Next.js only)
  • Memoization - Memoized year calculation (useMemo)

Security

Implemented:

  • ✅ TypeScript strict mode
  • ✅ Error boundary for runtime errors
  • ✅ XSS protection via React escaping
  • ✅ Secrets in GitHub Actions (not hardcoded)
  • ✅ Read-only access mentioned for Notion integrations

Last updated: 2025-10-17 Document version: 1.0