Merge version_22_1781900069686 into main

Merge version_22_1781900069686 into main

src/index.css

@@ -1,19 +1,19 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap');
 @import "tailwindcss";
 @import "./styles/masks.css";
 @import "./styles/animations.css";
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #0B0B0F;
-  --card: #121216;
-  --foreground: #F7F4EE;
-  --primary-cta: #7C5CFF;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #18D5C2;
-  --secondary-cta-text: #0B0B0F;
-  --accent: #D8D8D8;
-  --background-accent: #7C5CFF;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5f5f5;
+  --primary-cta: #dfff1c;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffff;
+  --accent: #8b9a1b;
+  --background-accent: #5d6b00;
 
   /* @layout/border-radius/rounded */
   --radius: 0.5rem;
@@ -88,7 +88,7 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: 'Inter', sans-serif;
+  --font-sans: 'Nunito Sans', sans-serif;
   --font-tight: "Space Grotesk", 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: 'Nunito 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: 'Nunito Sans', sans-serif;
 }
 
 /* Default card/button styles. Template theme.css imports come after this file

src/pages/HomePage.tsx

@@ -19,7 +19,8 @@ import AiDemosSection from './HomePage/sections/AiDemos';
 import AutomationShowcaseSection from './HomePage/sections/AutomationShowcase';
 import PremiumHamperSection from './HomePage/sections/PremiumHamper';
 import ReputationManagementSection from './HomePage/sections/ReputationManagement';
-import CrmDashboardSection from './HomePage/sections/CrmDashboard';export default function HomePage(): React.JSX.Element {
+import CrmDashboardSection from './HomePage/sections/CrmDashboard';
+import FeaturesArrowCardsSection from './HomePage/sections/FeaturesArrowCards';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
@@ -32,6 +33,7 @@ import CrmDashboardSection from './HomePage/sections/CrmDashboard';export defaul
   <AboutSection />
 
   <FeaturesSection />
+      <FeaturesArrowCardsSection />
 
   <MetricsSection />
 

src/pages/HomePage/sections/AutomationShowcase.tsx

@@ -60,7 +60,7 @@ export default function AutomationShowcaseSection() {
             <ScrollReveal variant="fade-blur" delay={0.2} className="order-1 lg:order-2">
               <div className="relative rounded-2xl overflow-hidden aspect-square lg:aspect-[4/3] card border border-white/5">
                 <ImageOrVideo 
-                  imageSrc="https://picsum.photos/seed/1630921774/1200/800" 
+                  imageSrc="https://storage.googleapis.com/webild/users/user_3FMpRnLWS92KdwJDXGXZYRZiidr/uploaded-1781894905666-l0yeftni.jpg" 
                   className="w-full h-full object-cover"
                 />
               </div>

src/pages/HomePage/sections/FeaturesArrowCards.tsx

@@ -0,0 +1,17 @@
+// Created by add_section_from_catalog (FeaturesArrowCards).
+
+import React from 'react';
+import FeaturesArrowCards from '@/components/sections/features/FeaturesArrowCards';
+
+export default function FeaturesArrowCardsSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="features-arrow-cards" id="features-arrow-cards">
+      <FeaturesArrowCards
+        items={[{"imageSrc":"https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop","tags":["AI Receptionist","24/7 Availability","Lead Qualification"],"title":"Never Miss a Lead Again"},{"imageSrc":"https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop","tags":["Smart Scheduling","Calendar Sync","Automated Reminders"],"title":"Frictionless Appointment Booking"},{"tags":["Review Generation","Reputation Management","Social Proof"],"title":"Automated 5-Star Reviews","imageSrc":"https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=2070&auto=format&fit=crop"},{"tags":["WhatsApp CRM","Centralized Inbox","Automated Follow-ups"],"title":"Unified Customer Communication","imageSrc":"https://images.unsplash.com/photo-1553877522-43269d4ea984?q=80&w=2070&auto=format&fit=crop"}]}
+        tag="Core Benefits"
+        description="Explore the powerful capabilities of the Business Operating System™ designed to automate your growth and streamline your operations."
+        title="High-Impact System Features"
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/PremiumHamper.tsx

@@ -68,7 +68,7 @@ export default function PremiumHamperSection() {
               <div className="absolute inset-0 bg-gradient-to-tr from-primary-cta/20 to-transparent rounded-theme blur-2xl" />
               <div className="relative rounded-theme overflow-hidden border border-white/10 shadow-2xl">
                 <ImageOrVideo 
-                  imageSrc="https://picsum.photos/seed/1069968313/1200/800" 
+                  imageSrc="https://storage.googleapis.com/webild/users/user_3FMpRnLWS92KdwJDXGXZYRZiidr/uploaded-1781894905664-vxmhshzv.jpg" 
                   className="w-full h-full object-cover aspect-[4/5] lg:aspect-square"
                 />
                 {/* Overlay gradient for luxury feel */}