Update src/app/page.tsx

Merge version_1 into main

src/app/layout.tsx

@@ -20,19 +20,19 @@ const figtree = Figtree({
 });
 
 export const metadata: Metadata = {
-  title: "Stratus Web Co | Websites Built to Convert Local Customers",  description: "Get a free sample website for your local business. Stratus Web Co builds clean, modern sites designed to attract paying customers. No templates. No commitment.",  keywords: "web design, local business website, small business website builder, website design agency, customer conversion",  metadataBase: new URL("https://stratus-web-co.com"),
+  title: "Stratus Web Co | Request Your Free Demo Website",  description: "Request a free demo website for your local business. See exactly what your online presence will look like before making any decision.",  keywords: "web design, local business website, small business website builder, website design agency, customer conversion",  metadataBase: new URL("https://stratus-web-co.com"),
   alternates: {
     canonical: "https://stratus-web-co.com"
   },
   openGraph: {
-    title: "Stratus Web Co | Websites Built to Convert Local Customers",    description: "Get a free sample website for your local business. Stratus Web Co builds clean, modern sites designed to attract paying customers.",    url: "https://stratus-web-co.com",    siteName: "Stratus Web Co",    type: "website",    images: [
+    title: "Stratus Web Co | Request Your Free Demo Website",    description: "Request a free demo website for your local business. See exactly what's possible.",    url: "https://stratus-web-co.com",    siteName: "Stratus Web Co",    type: "website",    images: [
       {
-        url: "http://img.b2bpic.net/free-photo/business-owner-analyzing-blank-mockup-display-smartphone_482257-87225.jpg",        alt: "Stratus Web Co - Modern Website Design"
+        url: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=630&fit=crop",        alt: "Stratus Web Co - Request Demo"
       }
     ]
   },
   twitter: {
-    card: "summary_large_image",    title: "Stratus Web Co | Websites Built to Convert Local Customers",    description: "Get a free sample website for your local business. See exactly what's possible.",    images: ["http://img.b2bpic.net/free-photo/business-owner-analyzing-blank-mockup-display-smartphone_482257-87225.jpg"]
+    card: "summary_large_image",    title: "Stratus Web Co | Request Your Free Demo Website",    description: "Request a free demo website for your local business.",    images: ["https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=630&fit=crop"]
   },
   robots: {
     index: true,

src/app/page.tsx

@@ -2,16 +2,49 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Award, Briefcase, CheckCircle, Lightbulb, Rocket, Target, TrendingUp, Zap } from 'lucide-react';
+import { Mail, Rocket, CheckCircle } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    businessName: '',
+    phone: '',
+    businessType: '',
+  });
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    
+    try {
+      const response = await fetch('/api/demo-request', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData),
+      });
+      
+      if (response.ok) {
+        setSubmitted(true);
+        setFormData({ name: '', email: '', businessName: '', phone: '', businessType: '' });
+        setTimeout(() => setSubmitted(false), 5000);
+      }
+    } catch (error) {
+      console.error('Form submission error:', error);
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -30,160 +63,134 @@ export default function LandingPage() {
           brandName="Stratus Web Co"
           navItems={[
             { name: "How It Works", id: "process" },
-            { name: "Testimonials", id: "testimonials" },
+            { name: "Contact", id: "contact" }
-            { name: "About", id: "about" }
           ]}
-          button={{ text: "Request Demo", href: "#cta" }}
+          button={{ text: "Request Demo", href: "#form" }}
           animateOnLoad={true}
         />
       </div>
 
-      <div id="hero" data-section="hero">
+      <div id="form" data-section="form" className="w-full py-20">
-        <HeroSplitTestimonial
+        <div className="mx-auto flex w-content-width flex-col items-center gap-8">
-          title="Your Website Should Bring Customers In"
+          <div className="text-center">
-          description="Stratus Web Co builds clean, modern websites designed to convert local visitors into paying customers. See a free sample built for your business—no commitment required."
+            <h1 className="text-5xl font-bold mb-4">Request Your Free Demo Website</h1>
-          background={{ variant: "plain" }}
+            <p className="text-lg text-foreground/75">
-          useInvertedBackground={false}
+              Fill out the form below and we'll build a sample website for your business within 48 hours.
-          tag="Premium Web Design"
+            </p>
-          tagIcon={Zap}
+          </div>
-          tagAnimation="slide-up"
-          buttons={[{ text: "Request Your Free Demo Website", href: "#cta" }]}
-          buttonAnimation="slide-up"
-          imagePosition="right"
-          imageSrc="http://img.b2bpic.net/free-photo/business-owner-analyzing-blank-mockup-display-smartphone_482257-87225.jpg"
-          imageAlt="Modern website dashboard for local businesses"
-          mediaAnimation="slide-up"
-          testimonials={[
-            {
-              name: "Maria Rodriguez",              handle: "Owner, Local Cafe",              testimonial: "More customers found us online within the first month. Simple and effective.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1"
-            },
-            {
-              name: "James Chen",              handle: "Gym Manager",              testimonial: "Clear, professional design that actually converts. Best investment we made.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84734.jpg"
-            },
-            {
-              name: "Sarah Thompson",              handle: "Service Business Owner",              testimonial: "No jargon, no confusion. They delivered exactly what we needed.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-smiling-pretty-girl-plaid-shirt-posing_114579-70643.jpg"
-            },
-            {
-              name: "David Kim",              handle: "Restaurant Owner",              testimonial: "The free demo convinced us immediately. Transparent and professional.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1"
-            }
-          ]}
-          testimonialRotationInterval={5000}
-        />
-      </div>
 
-      <div id="about" data-section="about">
+          <div className="w-full max-w-md">
-        <TestimonialAboutCard
+            {submitted ? (
-          tag="Why Choose Us"
+              <div className="rounded-lg border-2 border-primary-cta bg-background p-6 text-center">
-          tagIcon={CheckCircle}
+                <CheckCircle className="mx-auto mb-4 h-12 w-12 text-primary-cta" />
-          tagAnimation="slide-up"
+                <h2 className="text-xl font-semibold mb-2">Thanks for reaching out!</h2>
-          title="Websites Built to Convert, Not Just Impress"
+                <p className="text-foreground/75">
-          description="We focus on one thing: bringing more paying customers to your business. No templates. No fluff. Just results."
+                  We'll review your information and send you a link to your free demo website within 48 hours.
-          subdescription="Our approach"
+                </p>
-          icon={Target}
+              </div>
-          imageSrc="http://img.b2bpic.net/free-vector/marketing-optimization-background_23-2148004532.jpg"
+            ) : (
-          imageAlt="Website conversion funnel"
+              <form onSubmit={handleSubmit} className="space-y-4 rounded-lg border border-accent bg-card p-6">
-          mediaAnimation="slide-up"
+                <div>
-          useInvertedBackground={false}
+                  <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">
-        />
+                    Your Name *
-      </div>
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    required
+                    className="w-full rounded border border-accent bg-background px-3 py-2 text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    placeholder="John Smith"
+                  />
+                </div>
 
-      <div id="socialproof" data-section="socialproof">
+                <div>
-        <SocialProofOne
+                  <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">
-          title="Trusted by Local Businesses"
+                    Email Address *
-          description="From restaurants to gyms to service providers, we've helped hundreds of local businesses attract more customers online."
+                  </label>
-          textboxLayout="default"
+                  <input
-          useInvertedBackground={false}
+                    type="email"
-          tag="Proven Track Record"
+                    id="email"
-          tagIcon={Award}
+                    name="email"
-          tagAnimation="slide-up"
+                    value={formData.email}
-          names={[
+                    onChange={handleChange}
-            "Local Cafe Network",            "Fitness Studio Group",            "Home Services Co",            "Restaurant Alliance",            "Beauty Salon Chain",            "Consulting Firms",            "Medical Practices",            "Professional Services"
+                    required
-          ]}
+                    className="w-full rounded border border-accent bg-background px-3 py-2 text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
-          speed={40}
+                    placeholder="john@business.com"
-          showCard={true}
+                  />
-        />
+                </div>
-      </div>
 
-      <div id="process" data-section="process">
+                <div>
-        <FeatureHoverPattern
+                  <label htmlFor="businessName" className="block text-sm font-medium text-foreground mb-1">
-          title="How It Works"
+                    Business Name *
-          description="Our simple three-step process gets your business online and attracting customers fast."
+                  </label>
-          tag="The Process"
+                  <input
-          tagAnimation="slide-up"
+                    type="text"
-          animationType="slide-up"
+                    id="businessName"
-          textboxLayout="default"
+                    name="businessName"
-          useInvertedBackground={false}
+                    value={formData.businessName}
-          features={[
+                    onChange={handleChange}
-            {
+                    required
-              icon: Lightbulb,
+                    className="w-full rounded border border-accent bg-background px-3 py-2 text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
-              title: "Free Demo Website",              description: "We build a sample website for your business at no cost. See exactly what your online presence will look like."
+                    placeholder="Your Business Name"
-            },
+                  />
-            {
+                </div>
-              icon: Briefcase,
-              title: "Custom Strategy",              description: "No generic templates. We design your site to turn visitors into customers, tailored to your industry."
-            },
-            {
-              icon: TrendingUp,
-              title: "Launch & Support",              description: "We handle everything from launch to ongoing optimization. Your success is our only metric."
-            }
-          ]}
-        />
-      </div>
 
-      <div id="testimonials" data-section="testimonials">
+                <div>
-        <TestimonialCardSix
+                  <label htmlFor="phone" className="block text-sm font-medium text-foreground mb-1">
-          title="Real Results from Real Businesses"
+                    Phone Number
-          description="Hear from business owners who transformed their online presence with Stratus Web Co."
+                  </label>
-          textboxLayout="default"
+                  <input
-          useInvertedBackground={false}
+                    type="tel"
-          tag="Client Feedback"
+                    id="phone"
-          tagAnimation="slide-up"
+                    name="phone"
-          animationType="slide-up"
+                    value={formData.phone}
-          speed={40}
+                    onChange={handleChange}
-          testimonials={[
+                    className="w-full rounded border border-accent bg-background px-3 py-2 text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
-            {
+                    placeholder="(555) 000-0000"
-              id: "1",              name: "Maria Rodriguez",              handle: "Cafe Owner",              testimonial: "Within the first month, foot traffic increased by 40%. The website is clean and converts people perfectly.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-nerdy-waitress-work_329181-2082.jpg",              imageAlt: "Maria Rodriguez"
+                  />
-            },
+                </div>
-            {
-              id: "2",              name: "James Chen",              handle: "Gym Manager",              testimonial: "No more complicated processes. They delivered a professional site that actually brings in new members.",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-fit-man-gym_23-2149517268.jpg",              imageAlt: "James Chen"
-            },
-            {
-              id: "3",              name: "Sarah Thompson",              handle: "Salon Owner",              testimonial: "Transparent from day one. The free demo showed us they were serious about results.",              imageSrc: "http://img.b2bpic.net/free-photo/happy-client-hairdresser-shop_23-2149319767.jpg",              imageAlt: "Sarah Thompson"
-            },
-            {
-              id: "4",              name: "David Kim",              handle: "Restaurant Owner",              testimonial: "Our booking system went from zero to 30+ reservations a month through the website.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-barista-boy-cafe_23-2148436241.jpg",              imageAlt: "David Kim"
-            },
-            {
-              id: "5",              name: "Emily Watson",              handle: "Service Business Owner",              testimonial: "Finally, a web design company that understands small business. No jargon, just results.",              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=2",              imageAlt: "Emily Watson"
-            },
-            {
-              id: "6",              name: "Michael Torres",              handle: "Consulting Firm Owner",              testimonial: "The investment paid for itself in the first three months. Highly recommend.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2",              imageAlt: "Michael Torres"
-            }
-          ]}
-        />
-      </div>
 
-      <div id="cta" data-section="cta">
+                <div>
-        <ContactSplit
+                  <label htmlFor="businessType" className="block text-sm font-medium text-foreground mb-1">
-          tag="Get Started"
+                    Business Type *
-          tagIcon={Rocket}
+                  </label>
-          tagAnimation="slide-up"
+                  <select
-          title="See Your Free Demo Website Today"
+                    id="businessType"
-          description="No credit card required. No commitment. Just a professional website built for your business, so you can see exactly what's possible before making any decision."
+                    name="businessType"
-          background={{ variant: "plain" }}
+                    value={formData.businessType}
-          useInvertedBackground={false}
+                    onChange={handleChange}
-          imageSrc="http://img.b2bpic.net/free-photo/digital-devices-screen-editable_24972-2368.jpg"
+                    required
-          imageAlt="Website mockup on devices"
+                    className="w-full rounded border border-accent bg-background px-3 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
-          mediaAnimation="slide-up"
+                  >
-          mediaPosition="right"
+                    <option value="">Select your business type</option>
-          inputPlaceholder="your@business.com"
+                    <option value="restaurant">Restaurant/Cafe</option>
-          buttonText="Request Free Demo"
+                    <option value="fitness">Fitness/Gym</option>
-          termsText="We'll build a sample website for your business within 48 hours and send you a link to review. No spam, no pressure to buy."
+                    <option value="salon">Salon/Spa</option>
-        />
+                    <option value="retail">Retail Shop</option>
+                    <option value="service">Service Business</option>
+                    <option value="consulting">Consulting</option>
+                    <option value="medical">Medical/Healthcare</option>
+                    <option value="other">Other</option>
+                  </select>
+                </div>
+
+                <button
+                  type="submit"
+                  className="w-full rounded bg-primary-cta px-4 py-2 font-semibold text-primary-cta-text transition-opacity hover:opacity-90"
+                >
+                  Request Free Demo
+                </button>
+
+                <p className="text-xs text-foreground/60 text-center">
+                  We'll build a sample website for your business within 48 hours and send you a link to review. No spam, no pressure to buy.
+                </p>
+              </form>
+            )}
+          </div>
+        </div>
       </div>
 
       <div id="footer" data-section="footer">
@@ -192,24 +199,19 @@ export default function LandingPage() {
             {
               title: "Navigate",              items: [
                 { label: "Home", href: "#" },
-                { label: "How It Works", href: "#process" },
+                { label: "Request Demo", href: "#form" }
-                { label: "Testimonials", href: "#testimonials" },
-                { label: "About", href: "#about" }
               ]
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#about" },
+                { label: "About Us", href: "#" },
-                { label: "Blog", href: "https://blog.stratus.com" },
+                { label: "Contact", href: "#form" }
-                { label: "Contact", href: "#cta" },
-                { label: "Careers", href: "https://careers.stratus.com" }
               ]
             },
             {
               title: "Legal",              items: [
                 { label: "Privacy Policy", href: "#" },
-                { label: "Terms of Service", href: "#" },
+                { label: "Terms of Service", href: "#" }
-                { label: "Cookie Policy", href: "#" }
               ]
             }
           ]}