Merge version_4 into main

Merge version_4 into main

src/app/globals.css

@@ -4,9 +4,9 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  --background: #fafffb;;
+  --background: #001a4d;;
-  --card: #f7fffa;;
+  --card: #003d99;;
-  --foreground: #001a0a;;
+  --foreground: #ffffff;;
   --primary-cta: #0a7039;;
   --secondary-cta: #ffffff;;
   --accent: #a8d9be;;

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
@@ -12,8 +12,78 @@ import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
 import { Flame, Users, CheckCircle, Heart, Sparkles, Mail, Instagram, Facebook, Youtube, Twitter } from "lucide-react";
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [email, setEmail] = useState('');
+  const [smsPhone, setSmsPhone] = useState('');
+
+  const handlePayment = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      
+      const response = await fetch('/api/create-checkout-session', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          amount: 50,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to create checkout session');
+      }
+
+      const { sessionId } = await response.json();
+      
+      if (sessionId) {
+        window.open(`https://checkout.stripe.com/pay/${sessionId}`, '_blank');
+      } else {
+        setError('Payment session creation failed');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Payment error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSignup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch('/api/send-sms', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email,
+          phone: smsPhone,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to send SMS');
+      }
+
+      setEmail('');
+      setSmsPhone('');
+      // Show success message or redirect as needed
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Signup error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -58,9 +128,10 @@ export default function LandingPage() {
           logoLineHeight={1.15}
           ariaLabel="Hero section: Discover the joy of cooking"
           className="py-16 md:py-24"
-          logoClassName="text-4xl md:text-7xl"
+          logoClassName="text-4xl md:text-7xl text-white"
-          descriptionClassName="text-lg md:text-2xl"
+          descriptionClassName="text-lg md:text-2xl text-white"
           buttonClassName="px-6 py-3 rounded-full"
+          containerClassName="bg-blue-900"
         />
       </div>
 
@@ -270,6 +341,10 @@ export default function LandingPage() {
           inputPlaceholder="Enter your email address"
           buttonText="Subscribe Now"
           termsText="We'll send you weekly recipes and cooking tips. Unsubscribe anytime. Check our Privacy Policy for details."
+          onSubmit={(email) => {
+            // Handle newsletter signup
+            console.log('Newsletter signup:', email);
+          }}
           ariaLabel="Newsletter signup section"
           className="py-20 md:py-28"
           titleClassName="text-3xl md:text-5xl font-semibold"
@@ -277,6 +352,72 @@ export default function LandingPage() {
         />
       </div>
 
+      <div className="w-full py-20 md:py-28 flex items-center justify-center bg-background">
+        <div className="w-full max-w-md mx-auto px-6">
+          <div className="text-center mb-8">
+            <h2 className="text-3xl md:text-4xl font-semibold mb-4">Sign Up & Get SMS Notification</h2>
+            <p className="text-lg text-foreground/80 mb-6">Join our community and receive cooking updates via SMS.</p>
+          </div>
+          <form onSubmit={handleSignup} className="bg-card rounded-xl p-8 mb-6 space-y-4">
+            <div>
+              <input
+                type="email"
+                placeholder="Enter your email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className="w-full px-4 py-2 bg-secondary-cta text-foreground rounded-full border border-accent/30 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+              />
+            </div>
+            <div>
+              <input
+                type="tel"
+                placeholder="Enter your phone number"
+                value={smsPhone}
+                onChange={(e) => setSmsPhone(e.target.value)}
+                required
+                className="w-full px-4 py-2 bg-secondary-cta text-foreground rounded-full border border-accent/30 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+              />
+            </div>
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-3 px-6 bg-primary-cta text-background font-semibold rounded-full hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+            >
+              {loading ? 'Processing...' : 'Sign Up & Send SMS'}
+            </button>
+            {error && (
+              <p className="text-red-500 text-sm mt-4 text-center">{error}</p>
+            )}
+          </form>
+          <p className="text-sm text-foreground/60 text-center">We'll send you a welcome SMS and cooking updates</p>
+        </div>
+      </div>
+
+      <div className="w-full py-20 md:py-28 flex items-center justify-center bg-background">
+        <div className="w-full max-w-md mx-auto px-6">
+          <div className="text-center mb-8">
+            <h2 className="text-3xl md:text-4xl font-semibold mb-4">Premium Experience</h2>
+            <p className="text-lg text-foreground/80 mb-6">Get exclusive access to premium recipes and advanced meal planning features.</p>
+          </div>
+          <div className="bg-card rounded-xl p-8 mb-6">
+            <div className="text-5xl font-bold text-primary-cta mb-2">$50</div>
+            <p className="text-foreground/70 mb-8">One-time payment for lifetime access</p>
+            <button
+              onClick={handlePayment}
+              disabled={loading}
+              className="w-full py-3 px-6 bg-primary-cta text-background font-semibold rounded-full hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+            >
+              {loading ? 'Processing...' : 'Unlock Premium - $50'}
+            </button>
+            {error && (
+              <p className="text-red-500 text-sm mt-4 text-center">{error}</p>
+            )}
+          </div>
+          <p className="text-sm text-foreground/60 text-center">Secure payment powered by Stripe</p>
+        </div>
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBaseSocial
           logoText="FlavourFlow"