From 8cedce609ade4518cbf4b820fc7ac065b43e56d8 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 4 Mar 2026 03:20:59 +0000
Subject: [PATCH] Switch to version 1: modified src/app/page.tsx

---
 src/app/page.tsx | 322 +++++++++++++++++++++++------------------------
 1 file changed, 160 insertions(+), 162 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9f23c5c..49989b7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,49 +2,16 @@
 
 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 ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Mail, Rocket, CheckCircle } from 'lucide-react';
-import { useState } from 'react';
+import { Award, Briefcase, CheckCircle, Lightbulb, Rocket, Target, TrendingUp, Zap } from 'lucide-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"
@@ -63,134 +30,160 @@ 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 className="mx-auto flex w-content-width flex-col items-center gap-8">
-          <div className="text-center">
-            <h1 className="text-5xl font-bold mb-4">Request Your Free Demo Website</h1>
-            <p className="text-lg text-foreground/75">
-              Fill out the form below and we'll build a sample website for your business within 48 hours.
-            </p>
-          </div>
+      <div id="hero" data-section="hero">
+        <HeroSplitTestimonial
+          title="Your Website Should Bring Customers In"
+          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."
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          tag="Premium Web Design"
+          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">
-            {submitted ? (
-              <div className="rounded-lg border-2 border-primary-cta bg-background p-6 text-center">
-                <CheckCircle className="mx-auto mb-4 h-12 w-12 text-primary-cta" />
-                <h2 className="text-xl font-semibold mb-2">Thanks for reaching out!</h2>
-                <p className="text-foreground/75">
-                  We'll review your information and send you a link to your free demo website within 48 hours.
-                </p>
-              </div>
-            ) : (
-              <form onSubmit={handleSubmit} className="space-y-4 rounded-lg border border-accent bg-card p-6">
-                <div>
-                  <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">
-                    Your Name *
-                  </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="about" data-section="about">
+        <TestimonialAboutCard
+          tag="Why Choose Us"
+          tagIcon={CheckCircle}
+          tagAnimation="slide-up"
+          title="Websites Built to Convert, Not Just Impress"
+          description="We focus on one thing: bringing more paying customers to your business. No templates. No fluff. Just results."
+          subdescription="Our approach"
+          icon={Target}
+          imageSrc="http://img.b2bpic.net/free-vector/marketing-optimization-background_23-2148004532.jpg"
+          imageAlt="Website conversion funnel"
+          mediaAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
 
-                <div>
-                  <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">
-                    Email Address *
-                  </label>
-                  <input
-                    type="email"
-                    id="email"
-                    name="email"
-                    value={formData.email}
-                    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@business.com"
-                  />
-                </div>
+      <div id="socialproof" data-section="socialproof">
+        <SocialProofOne
+          title="Trusted by Local Businesses"
+          description="From restaurants to gyms to service providers, we've helped hundreds of local businesses attract more customers online."
+          textboxLayout="default"
+          useInvertedBackground={false}
+          tag="Proven Track Record"
+          tagIcon={Award}
+          tagAnimation="slide-up"
+          names={[
+            "Local Cafe Network",            "Fitness Studio Group",            "Home Services Co",            "Restaurant Alliance",            "Beauty Salon Chain",            "Consulting Firms",            "Medical Practices",            "Professional Services"
+          ]}
+          speed={40}
+          showCard={true}
+        />
+      </div>
 
-                <div>
-                  <label htmlFor="businessName" className="block text-sm font-medium text-foreground mb-1">
-                    Business Name *
-                  </label>
-                  <input
-                    type="text"
-                    id="businessName"
-                    name="businessName"
-                    value={formData.businessName}
-                    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="Your Business Name"
-                  />
-                </div>
+      <div id="process" data-section="process">
+        <FeatureHoverPattern
+          title="How It Works"
+          description="Our simple three-step process gets your business online and attracting customers fast."
+          tag="The Process"
+          tagAnimation="slide-up"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          features={[
+            {
+              icon: Lightbulb,
+              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."
+            },
+            {
+              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>
-                  <label htmlFor="phone" className="block text-sm font-medium text-foreground mb-1">
-                    Phone Number
-                  </label>
-                  <input
-                    type="tel"
-                    id="phone"
-                    name="phone"
-                    value={formData.phone}
-                    onChange={handleChange}
-                    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"
-                  />
-                </div>
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardSix
+          title="Real Results from Real Businesses"
+          description="Hear from business owners who transformed their online presence with Stratus Web Co."
+          textboxLayout="default"
+          useInvertedBackground={false}
+          tag="Client Feedback"
+          tagAnimation="slide-up"
+          animationType="slide-up"
+          speed={40}
+          testimonials={[
+            {
+              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"
+            },
+            {
+              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>
-                  <label htmlFor="businessType" className="block text-sm font-medium text-foreground mb-1">
-                    Business Type *
-                  </label>
-                  <select
-                    id="businessType"
-                    name="businessType"
-                    value={formData.businessType}
-                    onChange={handleChange}
-                    required
-                    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"
-                  >
-                    <option value="">Select your business type</option>
-                    <option value="restaurant">Restaurant/Cafe</option>
-                    <option value="fitness">Fitness/Gym</option>
-                    <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 id="cta" data-section="cta">
+        <ContactSplit
+          tag="Get Started"
+          tagIcon={Rocket}
+          tagAnimation="slide-up"
+          title="See Your Free Demo Website Today"
+          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."
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/free-photo/digital-devices-screen-editable_24972-2368.jpg"
+          imageAlt="Website mockup on devices"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          inputPlaceholder="your@business.com"
+          buttonText="Request Free Demo"
+          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."
+        />
       </div>
 
       <div id="footer" data-section="footer">
@@ -199,19 +192,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: "Contact", href: "#form" }
+                { label: "About Us", href: "#about" },
+                { 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: "#" }
               ]
             }
           ]}