Update src/app/api/waitlist/route.ts

Merge version_11 into main

.env.local.example

@@ -0,0 +1,13 @@
+# SMTP Configuration for Email Notifications
+SMTP_HOST=smtp.gmail.com
+SMTP_PORT=587
+SMTP_SECURE=false
+SMTP_USER=your-email@gmail.com
+SMTP_PASSWORD=your-app-password
+SMTP_FROM=noreply@clearance.dev
+
+# Admin Email
+ADMIN_EMAIL=admin@clearance.dev
+
+# Database Configuration (optional for future database integration)
+DATABASE_URL=

package.json

@@ -1,47 +1,12 @@
 {
-  "name": "webild-components-2",
-  "version": "0.1.0",
-  "private": true,
+  "name": "clearance-landing",  "version": "0.1.0",  "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build --turbopack",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint . --ext .ts,.tsx",
-    "start": "next start"
+    "dev": "next dev",    "build": "next build",    "start": "next start",    "lint": "next lint"
   },
   "dependencies": {
-    "@gsap/react": "^2.1.2",
-    "@react-three/drei": "^10.7.7",
-    "@react-three/fiber": "^9.4.0",
-    "@rive-app/react-canvas": "^4.26.2",
-    "@tsparticles/engine": "^3.9.1",
-    "@tsparticles/react": "^3.0.0",
-    "@tsparticles/slim": "^3.9.1",
-    "clsx": "^2.1.1",
-    "cobe": "^0.6.5",
-    "embla-carousel-auto-scroll": "^8.6.0",
-    "embla-carousel-react": "^8.6.0",
-    "gsap": "^3.13.0",
-    "lenis": "^1.3.15",
-    "lucide-react": "^0.555.0",
-    "motion-number": "^1.0.0",
-    "next": "16.0.7",
-    "react": "19.2.1",
-    "react-dom": "19.2.1",
-    "react-fast-marquee": "^1.6.5",
-    "recharts": "^3.6.0",
-    "tailwind-merge": "^3.4.0",
-    "three": "^0.181.2"
+    "react": "^18",    "react-dom": "^18",    "next": "^14",    "lucide-react": "latest",    "nodemailer": "^6.9.7"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.0.7",
-    "tailwindcss": "^4",
-    "typescript": "^5"
+    "typescript": "^5",    "@types/node": "^20",    "@types/react": "^18",    "@types/react-dom": "^18",    "@types/nodemailer": "^6.4.14",    "autoprefixer": "^10",    "postcss": "^8",    "tailwindcss": "^3"
   }
 }

src/app/api/waitlist/route.ts

@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
+import nodemailer from 'nodemailer';
 
 interface WaitlistEntry {
   email: string;
@@ -7,8 +8,16 @@ interface WaitlistEntry {
   createdAt: string;
 }
 
-// In-memory storage for demonstration
-// In production, replace with actual database (MongoDB, PostgreSQL, etc.)
+const transporter = nodemailer.createTransport({
+  host: process.env.SMTP_HOST || 'smtp.gmail.com',
+  port: parseInt(process.env.SMTP_PORT || '587'),
+  secure: process.env.SMTP_SECURE === 'true',
+  auth: {
+    user: process.env.SMTP_USER,
+    pass: process.env.SMTP_PASSWORD,
+  },
+});
+
 const waitlistEntries: WaitlistEntry[] = [];
 
 export async function POST(request: NextRequest) {
@@ -17,17 +26,17 @@ export async function POST(request: NextRequest) {
     const { email, instagram, tiktok } = body;
 
     // Validate email
-    if (!email || typeof email !== 'string' || !email.includes('@')) {
+    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
       return NextResponse.json(
-        { error: 'Valid email is required' },
+        { error: 'Invalid email address' },
         { status: 400 }
       );
     }
 
-    // Check for duplicate email
+    // Check if email already exists
     if (waitlistEntries.some(entry => entry.email === email)) {
       return NextResponse.json(
-        { error: 'Email already registered' },
+        { error: 'Email already on waitlist' },
         { status: 409 }
       );
     }
@@ -37,50 +46,79 @@ export async function POST(request: NextRequest) {
       email,
       instagram: instagram || undefined,
       tiktok: tiktok || undefined,
-      createdAt: new Date().toISOString()
+      createdAt: new Date().toISOString(),
     };
 
-    // Add to in-memory storage
     waitlistEntries.push(entry);
 
-    // TODO: In production, save to database here
-    // Example for MongoDB:
-    // await db.collection('waitlist').insertOne(entry);
-    
-    // TODO: Send confirmation email
-    // Example:
-    // await sendEmail({
-    //   to: email,
-    //   subject: 'Welcome to Clearance Waitlist',
-    //   template: 'waitlist-confirmation'
-    // });
+    // Send confirmation email to user
+    const userEmailHtml = `
+      <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
+        <h2 style="color: #333;">Welcome to Clearance Waitlist!</h2>
+        <p>Hi ${email.split('@')[0]},</p>
+        <p>Thank you for joining the Clearance waitlist! We're excited to have you on board.</p>
+        <p>We'll be reaching out soon with early access to our platform. In the meantime, here's what you can expect:</p>
+        <ul>
+          <li>Exclusive early access before our public launch</li>
+          <li>Lifetime discounts as an early adopter</li>
+          <li>1-on-1 onboarding support from our team</li>
+        </ul>
+        <p>If you have any questions, feel free to reply to this email.</p>
+        <p>Best regards,<br/>The Clearance Team</p>
+      </div>
+    `;
 
-    console.log('Waitlist entry created:', entry);
+    try {
+      await transporter.sendMail({
+        from: process.env.SMTP_FROM || process.env.SMTP_USER,
+        to: email,
+        subject: 'Welcome to Clearance Waitlist - Early Access Confirmed',
+        html: userEmailHtml,
+      });
+    } catch (emailError) {
+      console.error('Error sending confirmation email:', emailError);
+      // Continue even if email fails - user still added to waitlist
+    }
+
+    // Send notification email to admin
+    const adminEmailHtml = `
+      <div style="font-family: Arial, sans-serif;">
+        <h2>New Waitlist Submission</h2>
+        <p><strong>Email:</strong> ${email}</p>
+        <p><strong>Instagram:</strong> ${instagram || 'Not provided'}</p>
+        <p><strong>TikTok:</strong> ${tiktok || 'Not provided'}</p>
+        <p><strong>Submitted:</strong> ${new Date().toLocaleString()}</p>
+      </div>
+    `;
+
+    try {
+      await transporter.sendMail({
+        from: process.env.SMTP_FROM || process.env.SMTP_USER,
+        to: process.env.ADMIN_EMAIL || process.env.SMTP_USER,
+        subject: `New Clearance Waitlist Submission: ${email}`,
+        html: adminEmailHtml,
+      });
+    } catch (emailError) {
+      console.error('Error sending admin notification:', emailError);
+      // Continue even if email fails
+    }
 
     return NextResponse.json(
-      {
-        success: true,
-        message: 'Successfully joined the waitlist',
-        data: entry
-      },
+      { success: true, message: 'Successfully joined waitlist', entry },
       { status: 201 }
     );
   } catch (error) {
-    console.error('Waitlist API error:', error);
+    console.error('Waitlist submission error:', error);
     return NextResponse.json(
-      { error: 'Internal server error' },
+      { error: 'Failed to process submission' },
       { status: 500 }
     );
   }
 }
 
 export async function GET() {
-  // Optional: Get all waitlist entries (add authentication in production)
-  return NextResponse.json(
-    {
-      count: waitlistEntries.length,
-      entries: waitlistEntries
-    },
-    { status: 200 }
-  );
+  return NextResponse.json({
+    count: waitlistEntries.length,
+    entries: waitlistEntries,
+  });
 }

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';