NODE23 Landing Page

A bold, differentiated landing page for NODE23 - Post-Vibe-Coding Development that fixes what AI tools break. Dark, modern design with direct messaging targeting founders who've hit the wall with vibe coding tools.

Tech Stack

• Next.js 15 - React framework for production
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling
• React 18 - Latest React features

Features

• Bold, Dark-First Design - Modern black theme with emerald/cyan accents
• Direct, Edgy Copy - Calls out vibe coding failures explicitly (entropy loops, security issues, investor red flags)
• Differentiated Positioning - "Post-Vibe-Coding Era" - for founders who tried AI tools and hit walls
• Competitive Analysis-Driven - Based on deep research of 50+ competitors and vibe coding pain points
• Interactive Elements - Hover effects, gradient animations, smooth transitions
• SEO Optimized - Targets "vibe coding alternative", "MVP development", "AI automation"
• Comparison Table - Direct vibe coding vs NODE23 feature comparison
• Professional Typography - Inter + JetBrains Mono with custom styling
• Mobile Responsive - Looks great on all devices

Getting Started

Prerequisites

• Node.js 18.x or higher
• npm or yarn

Installation

1. Clone the repository:

git clone <your-repo-url>
cd Node23-vibecoding-website

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

Project Structure

.
├── app/
│   ├── globals.css          # Global styles and Tailwind imports
│   ├── layout.tsx           # Root layout with metadata
│   └── page.tsx             # Landing page
├── public/                  # Static assets
├── .gitignore
├── next.config.ts
├── package.json
├── tailwind.config.ts
└── tsconfig.json

Deployment

Vercel (Recommended - Optimized for Next.js 15)

Prerequisites:

• GitHub account with your code pushed
• Vercel account (free tier available)

Deployment Steps:

1. Connect Repository:

   • Go to vercel.com/new
   • Click "Import Git Repository"
   • Select your GitHub repository: rekon307/Node23-vibecoding-website

2. Configure Project:

   • Framework Preset: Next.js (auto-detected)
   • Branch: claude/node23-landing-page-011CV5zZuKSUL5eymR5ZpTuS
   • Root Directory: ./ (default)
   • Build Command: npm run build (auto-detected)
   • Output Directory: .next (auto-detected)
   • Install Command: npm install (auto-detected)

3. Deploy:

   • Click "Deploy"
   • Vercel will build and deploy your site
   • You'll get a live URL like https://node23-vibecoding-website.vercel.app

4. Auto-Deploy:

   • Every push to your branch automatically triggers a new deployment
   • Preview deployments for all branches
   • Production deployment for configured production branch

Troubleshooting:

If Vercel doesn't pick up your latest commit:

• Check Branch: Ensure Vercel is watching the correct branch in Project Settings → Git
• Manual Redeploy: Go to Deployments → Select latest → Click "Redeploy"
• Verify Permissions: Ensure your GitHub account has proper access in Settings → Git Integration

Vercel Configuration: This project includes vercel.json with:

• Framework detection
• Security headers (XSS, CSRF, frame protection)
• Build optimization
• Branch deployment settings

Manual Deploy via Vercel CLI

npm install -g vercel
vercel login
vercel --prod

Other Platforms

Netlify:

1. Import from GitHub
2. Build command: npm run build
3. Publish directory: .next

Self-Hosted:

npm run build
npm start

Site runs on http://localhost:3000

Customization

Updating Copy

Edit app/page.tsx to modify the content, sections, or messaging.

Styling

The project uses Tailwind CSS. Modify classes in components or extend the theme in tailwind.config.ts.

Adding Contact Form Backend

The contact form is currently frontend-only. To make it functional, add a form handler:

1. Create an API route: app/api/contact/route.ts
2. Integrate with services like:
   • SendGrid
   • Mailgun
   • Resend
   • Your own email server

Example API route:

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const data = await request.json();
  // Send email using your preferred service
  return NextResponse.json({ success: true });
}

License

Private - All rights reserved by NODE23

Support

For questions or issues, contact NODE23 team.