Update src/app/page.tsx

Merge version_6 into main

src/app/blog/page.tsx

@@ -3,7 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 import { Twitter, Linkedin, Github } from 'lucide-react';
 
@@ -31,9 +31,9 @@ export default function BlogPage() {
         >
             <div id="nav" data-section="nav">
                 <NavbarLayoutFloatingOverlay
-                    navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"/#products"},{name:"Reviews",id:"/#testimonials"},{name:"Contact",id:"/#contact"}]}
+                    navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"#products"},{name:"Reviews",id:"#testimonials"},{name:"Contact",id:"#contact"}]}
                     brandName="CRM AI"
-                    button={{ text: "Get Started", href: "/#contact" }}
+                    button={{ text: "Get Started", href: "#contact" }}
                     buttonClassName="min-w-[120px] justify-center"
                     buttonTextClassName="relative top-[0.5px]"
                     className="z-50 backdrop-blur-md"
@@ -47,7 +47,7 @@ export default function BlogPage() {
                     </div>
                 ) : (
                     <div id="blog" data-section="blog">
-                        <BlogCardThree
+                        <BlogCardTwo
                             blogs={posts}
                             title="From Our Blog"
                             description="Explore our latest articles, insights, and stories from the team."
@@ -74,4 +74,4 @@ export default function BlogPage() {
             </div>
         </ThemeProvider>
     );
-}
+}

src/app/features/page.tsx

@@ -3,16 +3,11 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import {
-  BarChart2,
-  ClipboardCheck,
   Github,
   Linkedin,
-  Shield,
+  Twitter
-  Twitter,
-  Workflow,
-  Zap
 } from 'lucide-react';
 
 const socialLinks = [
@@ -21,6 +16,15 @@ const socialLinks = [
     { icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
 ];
 
+const featuresData = [
+    {id: 1, title: "Intelligent Lead Scoring", description: "Automatically prioritize high-value leads with AI-driven scoring, focusing your sales efforts where they matter most.", imageSrc: "/placeholders/placeholder1.webp?_wi=1", imageAlt: "Intelligent Lead Scoring illustration"},
+    {id: 2, title: "Automated Task Management", description: "Streamline operations by automating repetitive tasks, freeing up your team to focus on strategic initiatives.", imageSrc: "/placeholders/placeholder2.webp?_wi=1", imageAlt: "Automated Task Management illustration"},
+    {id: 3, title: "Predictive Analytics Dashboard", description: "Gain foresight with advanced analytics, predicting customer churn and future trends to stay ahead of the curve.", imageSrc: "/placeholders/placeholder3.webp?_wi=1", imageAlt: "Predictive Analytics Dashboard illustration"},
+    {id: 4, title: "Enhanced Data Security", description: "Protect sensitive customer information with robust encryption and AI-powered threat detection, ensuring compliance and trust.", imageSrc: "/placeholders/placeholder1.webp?_wi=2", imageAlt: "Enhanced Data Security illustration"},
+    {id: 5, title: "Customizable Workflow Automation", description: "Tailor workflows to your unique business needs, automating processes from onboarding to customer support with ease.", imageSrc: "/placeholders/placeholder2.webp?_wi=2", imageAlt: "Customizable Workflow Automation illustration"},
+    {id: 6, title: "Omnichannel Customer Engagement", description: "Connect with customers across all channels seamlessly, providing consistent and personalized experiences at every touchpoint.", imageSrc: "/placeholders/placeholder3.webp?_wi=2", imageAlt: "Omnichannel Customer Engagement illustration"}
+  ];
+
 export default function FeaturesPage() {
   return (
     <ThemeProvider
@@ -37,9 +41,9 @@ export default function FeaturesPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
-          navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"/#products"},{name:"Reviews",id:"/#testimonials"},{name:"Contact",id:"/#contact"}]}
+          navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"#products"},{name:"Reviews",id:"#testimonials"},{name:"Contact",id:"#contact"}]}
           brandName="CRM AI"
-          button={{text:"Get Started",href:"/#contact"}}
+          button={{text:"Get Started",href:"#contact"}}
           buttonClassName="min-w-[120px] justify-center"
           buttonTextClassName="relative top-[0.5px]"
           className="z-50 backdrop-blur-md"
@@ -47,20 +51,12 @@ export default function FeaturesPage() {
       </div>
 
       <div id="features-glow" data-section="features-glow">
-        <FeatureBorderGlow
+        <FeatureCardSix
           title="Discover Our Cutting-Edge AI Capabilities"
           description="Explore the powerful features that make our AI CRM platform an industry leader, designed to supercharge your business growth."
           textboxLayout="default"
-          animationType="slide-up"
           useInvertedBackground={false}
-          features={[
+          features={featuresData}
-            {icon:Zap,title:"Intelligent Lead Scoring",description:"Automatically prioritize high-value leads with AI-driven scoring, focusing your sales efforts where they matter most."},
-            {icon:Workflow,title:"Automated Task Management",description:"Streamline operations by automating repetitive tasks, freeing up your team to focus on strategic initiatives."},
-            {icon:BarChart2,title:"Predictive Analytics Dashboard",description:"Gain foresight with advanced analytics, predicting customer churn and future trends to stay ahead of the curve."},
-            {icon:Shield,title:"Enhanced Data Security",description:"Protect sensitive customer information with robust encryption and AI-powered threat detection, ensuring compliance and trust."},
-            {icon:ClipboardCheck,title:"Customizable Workflow Automation",description:"Tailor workflows to your unique business needs, automating processes from onboarding to customer support with ease."},
-            {icon:BarChart2,title:"Omnichannel Customer Engagement",description:"Connect with customers across all channels seamlessly, providing consistent and personalized experiences at every touchpoint."}
-          ]}
           tag="Key Features"
           className="py-16 md:py-24"
         />
@@ -80,4 +76,4 @@ export default function FeaturesPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
+import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
@@ -12,21 +12,12 @@ import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import {
-  BarChart2,
-  ClipboardCheck,
   Github,
   Globe,
-  Heart,
   Linkedin,
-  Mail,
-  MessageSquare,
-  Smile,
-  Target,
   TrendingUp,
   Twitter,
-  User,
   Users,
-  Workflow,
   Zap
 } from 'lucide-react';
 
@@ -56,19 +47,17 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroCentered
+        <HeroLogoBillboardSplit
-          title="CRM AI"
+          logoText="CRM AI"
           description="Unleash the power of artificial intelligence to automate tasks, gain deeper customer insights, and drive unparalleled growth for your business."
           background={{variant:"sparkles-gradient"}}
-          avatars={[
-            { src: "https://via.placeholder.com/40", alt: "User Avatar 1" },
-            { src: "https://via.placeholder.com/40", alt: "User Avatar 2" },
-            { src: "https://via.placeholder.com/40", alt: "User Avatar 3" }
-          ]}
-          avatarText="Trusted by AI innovators"
           buttons={[{text:"Get Started Free",href:"#contact"},{text:"Watch Demo",href:"#features"}]}
           buttonAnimation="slide-up"
-          className="min-h-[calc(100svh-var(--navbar-height))] md:min-h-[calc(100vh-var(--navbar-height))] pt-[var(--navbar-height)]"
+          layoutOrder="default"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771630687370-xxt7k3kx.png"
+          imageAlt="AI CRM Platform Dashboard"
+          mediaAnimation="opacity"
+          frameStyle="card"
         />
       </div>
 
@@ -196,4 +185,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/shop/[id]/page.tsx

@@ -51,7 +51,9 @@ function ProductPageContent({ params }: ProductPageProps) {
         getCheckoutItems,
     } = useCart();
 
-    const { buyNow, checkout, isLoading: isCheckoutLoading } = useCheckout();
+    const {
+        buyNow, checkout, isLoading: isCheckoutLoading
+    } = useCheckout();
 
     const handleAddToCart = useCallback(() => {
         const item = createCartItem();
@@ -92,7 +94,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                 <ReactLenis root>
                     <div id="nav" data-section="nav">
                         <NavbarLayoutFloatingOverlay
-                            navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"/#products"},{name:"Reviews",id:"/#testimonials"},{name:"Contact",id:"/#contact"}]}
+                            navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"#products"},{name:"Reviews",id:"#testimonials"},{name:"Contact",id:"#contact"}]}
                             brandName="CRM AI"
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             buttonClassName="min-w-[120px] justify-center"
@@ -141,7 +143,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                 <ReactLenis root>
                     <div id="nav" data-section="nav">
                         <NavbarLayoutFloatingOverlay
-                            navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"/#products"},{name:"Reviews",id:"/#testimonials"},{name:"Contact",id:"/#contact"}]}
+                            navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"#products"},{name:"Reviews",id:"#testimonials"},{name:"Contact",id:"#contact"}]}
                             brandName="CRM AI"
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             buttonClassName="min-w-[120px] justify-center"
@@ -197,7 +199,7 @@ function ProductPageContent({ params }: ProductPageProps) {
             <ReactLenis root>
                 <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
-                        navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"/#products"},{name:"Reviews",id:"/#testimonials"},{name:"Contact",id:"/#contact"}]}
+                        navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"#products"},{name:"Reviews",id:"#testimonials"},{name:"Contact",id:"#contact"}]}
                         brandName="CRM AI"
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         buttonClassName="min-w-[120px] justify-center"
@@ -260,4 +262,4 @@ function ProductPageContent({ params }: ProductPageProps) {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/shop/page.tsx

@@ -61,7 +61,7 @@ export default function ShopPage() {
                 <ReactLenis root>
                     <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
-                        navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"/#products"},{name:"Reviews",id:"/#testimonials"},{name:"Contact",id:"/#contact"}]}
+                        navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"#products"},{name:"Reviews",id:"#testimonials"},{name:"Contact",id:"#contact"}]}
                         brandName="CRM AI"
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         buttonClassName="min-w-[120px] justify-center"
@@ -109,7 +109,7 @@ export default function ShopPage() {
             <ReactLenis root>
                 <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
-                        navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"/#products"},{name:"Reviews",id:"/#testimonials"},{name:"Contact",id:"/#contact"}]}
+                        navItems={[{name:"Home",id:"/"},{name:"Features",id:"/features"},{name:"Solutions",id:"#products"},{name:"Reviews",id:"#testimonials"},{name:"Contact",id:"#contact"}]}
                         brandName="CRM AI"
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         buttonClassName="min-w-[120px] justify-center"
@@ -162,4 +162,4 @@ export default function ShopPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/styles/variables.css

@@ -2,21 +2,21 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #080200;;;
+  /* --background: #080200;;;;;;;;
-  --card: #1a0d0b;;;
+  --card: #151515;;;;;;;;
-  --foreground: #ffe6d5;;;
+  --foreground: #CEE7Ff;;;;;;;;
-  --primary-cta: #FF7B05;;;
+  --primary-cta: #106EFB;;;;;;;;
-  --secondary-cta: #170b07;;;
+  --secondary-cta: #170b07;;;;;;;;
-  --accent: #7b5e4a;;;
+  --accent: #E6F0Ff;;;;;;;;
-  --background-accent: #b8541e;;; */
+  --background-accent: #106EFB;;;;;;;; */
 
-  --background: #080200;;;
+  --background: #080200;;;;;;;;
-  --card: #1a0d0b;;;
+  --card: #151515;;;;;;;;
-  --foreground: #ffe6d5;;;
+  --foreground: #CEE7Ff;;;;;;;;
-  --primary-cta: #FF7B05;;;
+  --primary-cta: #106EFB;;;;;;;;
-  --secondary-cta: #170b07;;;
+  --secondary-cta: #170b07;;;;;;;;
-  --accent: #7b5e4a;;;
+  --accent: #E6F0Ff;;;;;;;;
-  --background-accent: #b8541e;;;
+  --background-accent: #106EFB;;;;;;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);