Merge version_6_1781570830235 into main

Merge version_6_1781570830235 into main

src/index.css

@@ -1,19 +1,19 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
 @import "tailwindcss";
 @import "./styles/masks.css";
 @import "./styles/animations.css";
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
+  --background: #f5f5f5;
   --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
+  --foreground: #1c1c1c;
+  --primary-cta: #341f51;
+  --primary-cta-text: #f5f5f5;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #6139e6;
+  --background-accent: #b3a8e8;
 
   /* @layout/border-radius/rounded */
   --radius: 1rem;
@@ -88,7 +88,7 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: 'Inter Tight', sans-serif;
+  --font-sans: 'Open Sans', sans-serif;
   --font-tight: "Inter Tight", sans-serif;
   --font-mono: monospace;
 
@@ -137,7 +137,7 @@ body {
   margin: 0;
   background-color: var(--background);
   color: var(--foreground);
-  font-family: 'Inter Tight', sans-serif;
+  font-family: 'Open Sans', sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -150,7 +150,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Inter Tight', sans-serif;
+  font-family: 'Inter', sans-serif;
 }
 
 /* Default card/button styles. Template theme.css imports come after this file

src/pages/HomePage.tsx

@@ -1,107 +1,27 @@
-import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
-import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
-import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import WhyChooseSection from './HomePage/sections/WhyChoose';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import ProductSection from './HomePage/sections/Product';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-      <div id="hero" data-section="hero">
-        <SectionErrorBoundary name="hero">
-          <HeroSplitVerticalMarquee
-            tag="Web-Head Solutions"
-            title="Affordable Websites. Professional First Impressions."
-            description="Helping local businesses establish a strong online presence, reach a wider audience, and build credibility from the very first click. See your business online before you commit."
-            primaryButton={{ text: "Request a Demo Site", href: "/contact" }}
-            secondaryButton={{ text: "View Pricing", href: "/pricing" }}
-            leftItems={[
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FBrjtGbzyMvRYEvQVPY5Ow3xFu/uploaded-1781570000336-hz5fi44b.png?_wi=1" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572162.jpg?_wi=1" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345425.jpg?_wi=1" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/top-view-internet-communication-network_23-2148779286.jpg" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/working-mobile-application_1098-17072.jpg" },
-              { imageSrc: "http://img.b2bpic.net/free-vector/flat-design-geometric-pattern-landing-page_23-2149961036.jpg" }
-            ]}
-            rightItems={[
-              { imageSrc: "http://img.b2bpic.net/free-photo/close-up-internet-communication-network_23-2148779278.jpg" },
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FBrjtGbzyMvRYEvQVPY5Ow3xFu/uploaded-1781570000336-hz5fi44b.png?_wi=2" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/businessman-using-tablet-with-digital-network-graphic-front-cityscape_9975-22113.jpg" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572162.jpg?_wi=2" },
-              { imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=7asj9s" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345425.jpg?_wi=2" }
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
+<>
+      <HeroSection />
 
-      <div id="about" data-section="about">
-        <SectionErrorBoundary name="about">
-          <AboutFeaturesSplit
-            tag="Our Mission"
-            title="Building Digital Foundations"
-            description="Web-Head Solutions was created to help local businesses build a strong online foundation without unnecessary complexity or excessive costs."
-            items={[
-              { icon: "CheckCircle", title: "Simplified Creation", description: "We remove the complexity of building a website." },
-              { icon: "Shield", title: "Trust-Focused", description: "Professional designs that build immediate credibility." },
-              { icon: "Zap", title: "Independence", description: "Support that empowers you to manage your site." }
-            ]}
-            imageSrc="http://img.b2bpic.net/free-photo/geometric-abstract-background-technology-concept-connecting-dots-design_53876-153349.jpg"
-          />
-        </SectionErrorBoundary>
-      </div>
+      <AboutSection />
 
-      <div id="why-choose" data-section="why-choose">
-        <SectionErrorBoundary name="why-choose">
-          <AboutFeaturesSplit
-            tag="Why Us"
-            title="Why Choose Web-Head Solutions?"
-            description="We offer more than just a website. We offer a partner in your digital growth journey."
-            items={[
-              { icon: "Award", title: "Affordable Pricing", description: "Quality shouldn't break your budget." },
-              { icon: "Clock", title: "Fast Turnaround", description: "Get online in days, not months." },
-              { icon: "Smartphone", title: "Mobile-Friendly", description: "Your site will look great on every device." }
-            ]}
-            imageSrc="http://img.b2bpic.net/free-vector/flat-design-geometric-pattern-landing-page_23-2149935040.jpg"
-          />
-        </SectionErrorBoundary>
-      </div>
+      <WhyChooseSection />
 
-      <div id="testimonials" data-section="testimonials">
-        <SectionErrorBoundary name="testimonials">
-          <TestimonialRatingCards
-            tag="Testimonials"
-            title="What Clients Say"
-            description="See why local businesses trust us with their digital identity."
-            testimonials={[
-              { name: "Sarah", role: "Restaurant Owner", quote: "My business presence transformed overnight.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg" },
-              { name: "David", role: "Contractor", quote: "Simple, professional, and very affordable.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-mature-businessman-drinking-coffee-outdoors_23-2147955288.jpg" },
-              { name: "Emily", role: "Accountant", quote: "The support was amazing for my startup.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-auto-repairman-handshaking-with-customer-workshop_637285-8634.jpg" },
-              { name: "Michael", role: "Agency Manager", quote: "Great communication and very efficient.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-corporate-woman-looks-dreamy-smiles-stands-outside-street-leans-her-head-hands_1258-193990.jpg" },
-              { name: "Jessica", role: "Retail Manager", quote: "The best investment for our brand.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-smiling-asian-girl-putting-coffee-tamper-brew-capuccino-prepare-order_1258-203400.jpg" }
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
+      <TestimonialsSection />
 
-      <div id="product" data-section="product">
-        <SectionErrorBoundary name="product">
-          <FeaturesImageBento 
-            tag="Our Products"
-            title="Premium Digital Services"
-            description="Expertly crafted digital solutions for modern businesses."
-            items={[
-              { title: "Web 1", description: "High-performance.", imageSrc: "http://img.b2bpic.net/free-photo/wifi-signal-icon-blue-color_187299-46876.jpg" },
-              { title: "Web 2", description: "Responsive sites.", imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568835.jpg" },
-              { title: "Web 3", description: "Tailored brand.", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-chat-communication-with-emojis_23-2151989421.jpg" },
-              { title: "Web 4", description: "Growth-focused.", imageSrc: "http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572166.jpg" },
-              { title: "Web 5", description: "Planning help.", imageSrc: "http://img.b2bpic.net/free-photo/remote-worker-personal-apartment-office-using-mockup-tablet_482257-124323.jpg" },
-              { title: "Web 6", description: "Support daily.", imageSrc: "http://img.b2bpic.net/free-photo/date-night-ideas-valantine-romance-heart-love-passion-concept_53876-133732.jpg" },
-              { title: "Web 7", description: "Dedicated help.", imageSrc: "http://img.b2bpic.net/free-photo/mockup-copy-space-blank-screen-concept_53876-120456.jpg" }
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
+      <ProductSection />
     </>
   );
 }

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,26 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+            <SectionErrorBoundary name="about">
+              <AboutFeaturesSplit
+                tag="Our Mission"
+                title="Building Digital Foundations"
+                description="Web-Head Solutions was created to help local businesses build a strong online foundation without unnecessary complexity or excessive costs."
+                items={[
+                  { icon: "CheckCircle", title: "Simplified Creation", description: "We remove the complexity of building a website." },
+                  { icon: "Shield", title: "Trust-Focused", description: "Professional designs that build immediate credibility." },
+                  { icon: "Zap", title: "Independence", description: "Support that empowers you to manage your site." }
+                ]}
+                imageSrc="http://img.b2bpic.net/free-photo/geometric-abstract-background-technology-concept-connecting-dots-design_53876-153349.jpg"
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,40 @@
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+export default function Hero() {
+  return (
+    <section aria-label="Hero section" className="relative overflow-hidden">
+      <div className="relative z-10 flex flex-col items-center gap-6 mx-auto w-content-width text-center">
+        
+        <div className="w-48 md:w-64 mb-4">
+          <ImageOrVideo 
+            imageSrc="https://storage.googleapis.com/webild/users/user_3FBrjtGbzyMvRYEvQVPY5Ow3xFu/uploaded-1781570000336-hz5fi44b.png?_wi=3" 
+            className="w-full h-auto object-contain drop-shadow-lg"
+          />
+        </div>
+
+        <TextAnimation
+          text="Web-Head Solutions"
+          variant="slide-up"
+          gradientText={true}
+          tag="h1"
+          className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+        />
+
+        <TextAnimation
+          text="Innovative web solutions for your business"
+          variant="slide-up"
+          gradientText={false}
+          tag="p"
+          className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+        />
+
+        <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+          <Button text="Get Started" href="/contact" variant="primary" />
+          <Button text="Our Services" href="/services" variant="secondary" animationDelay={0.1} />
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/Product.tsx

@@ -0,0 +1,29 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "product" section.
+
+import React from 'react';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+
+export default function ProductSection(): React.JSX.Element {
+  return (
+    <div id="product" data-section="product">
+            <SectionErrorBoundary name="product">
+              <FeaturesImageBento 
+                tag="Our Products"
+                title="Premium Digital Services"
+                description="Expertly crafted digital solutions for modern businesses."
+                items={[
+                  { title: "Web 1", description: "High-performance.", imageSrc: "http://img.b2bpic.net/free-photo/wifi-signal-icon-blue-color_187299-46876.jpg" },
+                  { title: "Web 2", description: "Responsive sites.", imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568835.jpg" },
+                  { title: "Web 3", description: "Tailored brand.", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-chat-communication-with-emojis_23-2151989421.jpg" },
+                  { title: "Web 4", description: "Growth-focused.", imageSrc: "http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572166.jpg" },
+                  { title: "Web 5", description: "Planning help.", imageSrc: "http://img.b2bpic.net/free-photo/remote-worker-personal-apartment-office-using-mockup-tablet_482257-124323.jpg" },
+                  { title: "Web 6", description: "Support daily.", imageSrc: "http://img.b2bpic.net/free-photo/date-night-ideas-valantine-romance-heart-love-passion-concept_53876-133732.jpg" },
+                  { title: "Web 7", description: "Dedicated help.", imageSrc: "http://img.b2bpic.net/free-photo/mockup-copy-space-blank-screen-concept_53876-120456.jpg" }
+                ]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonials" section.
+
+import React from 'react';
+import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+            <SectionErrorBoundary name="testimonials">
+              <TestimonialRatingCards
+                tag="Testimonials"
+                title="What Clients Say"
+                description="See why local businesses trust us with their digital identity."
+                testimonials={[
+                  { name: "Sarah", role: "Restaurant Owner", quote: "My business presence transformed overnight.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg" },
+                  { name: "David", role: "Contractor", quote: "Simple, professional, and very affordable.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-mature-businessman-drinking-coffee-outdoors_23-2147955288.jpg" },
+                  { name: "Emily", role: "Accountant", quote: "The support was amazing for my startup.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-auto-repairman-handshaking-with-customer-workshop_637285-8634.jpg" },
+                  { name: "Michael", role: "Agency Manager", quote: "Great communication and very efficient.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-corporate-woman-looks-dreamy-smiles-stands-outside-street-leans-her-head-hands_1258-193990.jpg" },
+                  { name: "Jessica", role: "Retail Manager", quote: "The best investment for our brand.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-smiling-asian-girl-putting-coffee-tamper-brew-capuccino-prepare-order_1258-203400.jpg" }
+                ]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}

src/pages/HomePage/sections/WhyChoose.tsx

@@ -0,0 +1,26 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "why-choose" section.
+
+import React from 'react';
+import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function WhyChooseSection(): React.JSX.Element {
+  return (
+    <div id="why-choose" data-section="why-choose">
+            <SectionErrorBoundary name="why-choose">
+              <AboutFeaturesSplit
+                tag="Why Us"
+                title="Why Choose Web-Head Solutions?"
+                description="We offer more than just a website. We offer a partner in your digital growth journey."
+                items={[
+                  { icon: "Award", title: "Affordable Pricing", description: "Quality shouldn't break your budget." },
+                  { icon: "Clock", title: "Fast Turnaround", description: "Get online in days, not months." },
+                  { icon: "Smartphone", title: "Mobile-Friendly", description: "Your site will look great on every device." }
+                ]}
+                imageSrc="http://img.b2bpic.net/free-vector/flat-design-geometric-pattern-landing-page_23-2149935040.jpg"
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}