Update src/app/page.tsx

Merge version_2 into main

src/app/layout.tsx

@@ -20,19 +20,19 @@ const figtree = Figtree({
 });
 
 export const metadata: Metadata = {
-  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"),
+  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"),
   alternates: {
     canonical: "https://stratus-web-co.com"
   },
   openGraph: {
-    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: [
+    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: [
       {
-        url: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=630&fit=crop",        alt: "Stratus Web Co - Request Demo"
+        url: "http://img.b2bpic.net/free-photo/business-owner-analyzing-blank-mockup-display-smartphone_482257-87225.jpg",        alt: "Stratus Web Co - Modern Website Design"
       }
     ]
   },
   twitter: {
-    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"]
+    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"]
   },
   robots: {
     index: true,

src/app/page.tsx

@@ -2,47 +2,19 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
+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 ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Mail, Rocket, CheckCircle } from 'lucide-react';
+import { Award, Briefcase, CheckCircle, Lightbulb, Rocket, Target, TrendingUp, Zap } from 'lucide-react';
-import { useState } from 'react';
 
 export default function LandingPage() {
-  const [formData, setFormData] = useState({
+  const handleDemoSubmit = (data: Record<string, string>) => {
-    name: '',
+    console.log('Demo request submitted:', data);
-    email: '',
+    // Handle form submission here
-    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 (
@@ -63,134 +35,161 @@ export default function LandingPage() {
           brandName="Stratus Web Co"
           navItems={[
             { name: "How It Works", id: "process" },
-            { name: "Contact", id: "contact" }
+            { name: "Testimonials", id: "testimonials" },
+            { name: "About", id: "about" }
           ]}
-          button={{ text: "Request Demo", href: "#form" }}
+          button={{ text: "Request Demo", href: "#cta" }}
           animateOnLoad={true}
         />
       </div>
 
-      <div id="form" data-section="form" className="w-full py-20">
+      <div id="hero" data-section="hero">
-        <div className="mx-auto flex w-content-width flex-col items-center gap-8">
+        <HeroSplitTestimonial
-          <div className="text-center">
+          title="Your Website Should Bring Customers In"
-            <h1 className="text-5xl font-bold mb-4">Request Your Free Demo Website</h1>
+          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."
-            <p className="text-lg text-foreground/75">
+          background={{ variant: "plain" }}
-              Fill out the form below and we'll build a sample website for your business within 48 hours.
+          useInvertedBackground={false}
-            </p>
+          tag="Premium Web Design"
-          </div>
+          tagIcon={Zap}
+          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 className="w-full max-w-md">
+      <div id="about" data-section="about">
-            {submitted ? (
+        <TestimonialAboutCard
-              <div className="rounded-lg border-2 border-primary-cta bg-background p-6 text-center">
+          tag="Why Choose Us"
-                <CheckCircle className="mx-auto mb-4 h-12 w-12 text-primary-cta" />
+          tagIcon={CheckCircle}
-                <h2 className="text-xl font-semibold mb-2">Thanks for reaching out!</h2>
+          tagAnimation="slide-up"
-                <p className="text-foreground/75">
+          title="Websites Built to Convert, Not Just Impress"
-                  We'll review your information and send you a link to your free demo website within 48 hours.
+          description="We focus on one thing: bringing more paying customers to your business. No templates. No fluff. Just results."
-                </p>
+          subdescription="Our approach"
-              </div>
+          icon={Target}
-            ) : (
+          imageSrc="http://img.b2bpic.net/free-vector/marketing-optimization-background_23-2148004532.jpg"
-              <form onSubmit={handleSubmit} className="space-y-4 rounded-lg border border-accent bg-card p-6">
+          imageAlt="Website conversion funnel"
-                <div>
+          mediaAnimation="slide-up"
-                  <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">
+          useInvertedBackground={false}
-                    Your Name *
+        />
-                  </label>
+      </div>
-                  <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>
+      <div id="socialproof" data-section="socialproof">
-                  <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">
+        <SocialProofOne
-                    Email Address *
+          title="Trusted by Local Businesses"
-                  </label>
+          description="From restaurants to gyms to service providers, we've helped hundreds of local businesses attract more customers online."
-                  <input
+          textboxLayout="default"
-                    type="email"
+          useInvertedBackground={false}
-                    id="email"
+          tag="Proven Track Record"
-                    name="email"
+          tagIcon={Award}
-                    value={formData.email}
+          tagAnimation="slide-up"
-                    onChange={handleChange}
+          names={[
-                    required
+            "Local Cafe Network",            "Fitness Studio Group",            "Home Services Co",            "Restaurant Alliance",            "Beauty Salon Chain",            "Consulting Firms",            "Medical Practices",            "Professional Services"
-                    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@business.com"
+          speed={40}
-                  />
+          showCard={true}
-                </div>
+        />
+      </div>
 
-                <div>
+      <div id="process" data-section="process">
-                  <label htmlFor="businessName" className="block text-sm font-medium text-foreground mb-1">
+        <FeatureHoverPattern
-                    Business Name *
+          title="How It Works"
-                  </label>
+          description="Our simple three-step process gets your business online and attracting customers fast."
-                  <input
+          tag="The Process"
-                    type="text"
+          tagAnimation="slide-up"
-                    id="businessName"
+          animationType="slide-up"
-                    name="businessName"
+          textboxLayout="default"
-                    value={formData.businessName}
+          useInvertedBackground={false}
-                    onChange={handleChange}
+          features={[
-                    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"
+              icon: Lightbulb,
-                    placeholder="Your Business Name"
+              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."
-                  />
+            },
-                </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>
+      <div id="testimonials" data-section="testimonials">
-                  <label htmlFor="phone" className="block text-sm font-medium text-foreground mb-1">
+        <TestimonialCardSix
-                    Phone Number
+          title="Real Results from Real Businesses"
-                  </label>
+          description="Hear from business owners who transformed their online presence with Stratus Web Co."
-                  <input
+          textboxLayout="default"
-                    type="tel"
+          useInvertedBackground={false}
-                    id="phone"
+          tag="Client Feedback"
-                    name="phone"
+          tagAnimation="slide-up"
-                    value={formData.phone}
+          animationType="slide-up"
-                    onChange={handleChange}
+          speed={40}
-                    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"
+          testimonials={[
-                    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>
+      <div id="cta" data-section="cta">
-                  <label htmlFor="businessType" className="block text-sm font-medium text-foreground mb-1">
+        <ContactSplitForm
-                    Business Type *
+          title="See Your Free Demo Website Today"
-                  </label>
+          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."
-                  <select
+          useInvertedBackground={false}
-                    id="businessType"
+          inputs={[
-                    name="businessType"
+            { name: "name", type: "text", placeholder: "Your Name", required: true },
-                    value={formData.businessType}
+            { name: "email", type: "email", placeholder: "your@business.com", required: true },
-                    onChange={handleChange}
+            { name: "businessName", type: "text", placeholder: "Business Name", required: true },
-                    required
+            { name: "phone", type: "tel", placeholder: "Phone Number", required: true }
-                    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"
+          ]}
-                  >
+          textarea={{
-                    <option value="">Select your business type</option>
+            name: "message",            placeholder: "Tell us about your business (optional)",            rows: 4
-                    <option value="restaurant">Restaurant/Cafe</option>
+          }}
-                    <option value="fitness">Fitness/Gym</option>
+          buttonText="Request Free Demo"
-                    <option value="salon">Salon/Spa</option>
+          onSubmit={handleDemoSubmit}
-                    <option value="retail">Retail Shop</option>
+          mediaAnimation="slide-up"
-                    <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">
@@ -199,19 +198,24 @@ export default function LandingPage() {
             {
               title: "Navigate",              items: [
                 { label: "Home", href: "#" },
-                { label: "Request Demo", href: "#form" }
+                { label: "How It Works", href: "#process" },
+                { label: "Testimonials", href: "#testimonials" },
+                { label: "About", href: "#about" }
               ]
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#" },
+                { label: "About Us", href: "#about" },
-                { label: "Contact", href: "#form" }
+                { label: "Blog", href: "https://blog.stratus.com" },
+                { 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: "#" }
               ]
             }
           ]}