Update src/app/page.tsx

Merge version_4 into main

src/app/layout.tsx

@@ -1409,4 +1409,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -2,11 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import FeatureBento from '@/components/sections/feature/FeatureBento';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FaqBase from '@/components/sections/faq/FaqBase';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import { Brush, Feather, Figma, LayoutTemplate, Lightbulb, Monitor, Palette, Sparkles, Type } from "lucide-react";
@@ -27,7 +27,7 @@ export default function LandingPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingInline 
-          navItems={[{name:"About",id:"about"},{name:"Services",id:"features"},{name:"Work",id:"products"}]}
+          navItems={[{name:"About",id:"about"},{name:"Services",id:"features"},{name:"FAQ",id:"faq"}]}
           brandName="Bamboleya"
           button={{text:"Contact Us",href:"#contact"}}
           buttonClassName="shadow-md"
@@ -35,15 +35,15 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroOverlay 
+        <HeroBillboardScroll 
           title="Bamboleya: Where Ideas Take Form"
           description="Transforming visions into captivating digital experiences with creativity and precision. Let's build something remarkable together."
-          buttons={[{text:"Our Services",href:"#features"},{text:"See Our Work",href:"#products"}]}
+          background={{variant:"sparkles-gradient"}}
+          buttons={[{text:"Our Services",href:"#features"},{
+            text: "See Our Work",            href: "#features"
+          }]}
           imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-working-together_23-2149345223.jpg"
           imageAlt="Abstract illustration of a creative design process with elements like sketches, a laptop, and a lightbulb, symbolizing idea generation and digital execution."
-          textPosition="center"
-          showBlur={true}
-          showDimOverlay={false}
         />
       </div>
 
@@ -80,15 +80,21 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="products" data-section="products">
+      <div id="faq" data-section="faq">
-        <ProductCardFour 
+        <FaqBase 
-          title="Our Recent Work"
+          title="Questions? We Have Answers"
-          description="Explore a selection of our award-winning projects that showcase our diverse capabilities and creative solutions."
+          description="Find quick answers to the most common questions about our design process, services, and working with Bamboleya."
           textboxLayout="default"
-          gridVariant="uniform-all-items-equal"
+          faqsAnimation="slide-up"
-          animationType="slide-up"
           useInvertedBackground={false}
-          products={[{id:"1",name:"Elegance Fashion E-commerce",price:"UI/UX, Web Development",variant:"Modern & Responsive",imageSrc:"http://img.b2bpic.net/free-vector/flat-design-responsive-website-design_23-2149483806.jpg",imageAlt:"Screenshot of a modern and elegant fashion e-commerce website design, featuring clean product displays and intuitive navigation."},{id:"2",name:"Innovate Mobile Banking App",price:"UI/UX, App Development",variant:"Seamless User Experience",imageSrc:"http://img.b2bpic.net/free-vector/app-template-travel-booking_23-2148636701.jpg",imageAlt:"Mockup of a sleek mobile banking application interface, highlighting easy navigation and clear financial data visualization."},{id:"3",name:"FutureTech Brand Identity",price:"Brand Strategy, Logo Design",variant:"Cohesive & Impactful",imageSrc:"http://img.b2bpic.net/free-vector/gradient-brand-manual-presentation_23-2149845980.jpg",imageAlt:"Branding package including a modern logo design, color palette, and typography for a technology startup named FutureTech."}]}
+          faqs={[{id:"1",title:"What is your typical design process?",content:"Our process usually starts with a discovery phase to understand your needs, followed by concept development, iterative design, client feedback, and final implementation. We believe in transparency and collaboration every step of the way."}
+            , {
+              id: "2",              title: "How long does a typical project take?",              content: "Project timelines vary greatly depending on complexity and scope. A small branding project might take a few weeks, while a comprehensive website redesign could take several months. We provide detailed timelines after our initial consultation."
+            }, {
+              id: "3",              title: "What kind of businesses do you work with?",              content: "We partner with a diverse range of clients, from startups and small businesses to established corporations across various industries. Our goal is to bring high-quality design solutions to any entity looking to enhance their digital presence."
+            }, {
+              id: "4",              title: "Do you offer ongoing support after a project is completed?",              content: "Yes, we offer various post-launch support and maintenance packages to ensure your digital assets remain up-to-date, secure, and performing optimally. We can discuss these options as your project nears completion."
+            }]}
         />
       </div>
 
@@ -112,11 +118,11 @@ export default function LandingPage() {
 
       <div id="footer" data-section="footer">
         <FooterBase 
-          columns={[{title:"Services",items:[{label:"Web Design",href:"#features"},{label:"Branding",href:"#features"},{label:"UI/UX",href:"#features"}]},{title:"Company",items:[{label:"About Us",href:"#about"},{label:"Our Work",href:"#products"}]},{title:"Connect",items:[{label:"Contact",href:"#contact"},{label:"LinkedIn",href:"https://linkedin.com/company/bamboleya"},{label:"Instagram",href:"https://instagram.com/bamboleya"}]}]}
+          columns={[{title:"Services",items:[{label:"Web Design",href:"#features"},{label:"Branding",href:"#features"},{label:"UI/UX",href:"#features"}]},{title:"Company",items:[{label:"About Us",href:"#about"},{label:"FAQ",href:"#faq"},{label:"Connect",href:"#contact"}]},{title:"Connect",items:[{label:"Contact",href:"#contact"},{label:"LinkedIn",href:"https://linkedin.com/company/bamboleya"},{label:"Instagram",href:"https://instagram.com/bamboleya"}]}]}
           logoText="Bamboleya"
           copyrightText="© 2024 Bamboleya Design Studio. All rights reserved."
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f5f5f5;;
+  /* --background: #fbfaff;;
-  --card: #ffffff;;
+  --card: #f7f5ff;;
-  --foreground: #1c1c1c;;
+  --foreground: #0f0022;;
-  --primary-cta: #e63946;;
+  --primary-cta: #8b5cf6;;
   --secondary-cta: #ffffff;;
-  --accent: #159c49;;
+  --accent: #d8cef5;;
-  --background-accent: #a8e8ba;; */
+  --background-accent: #c4a8f9;; */
 
-  --background: #f5f5f5;;
+  --background: #fbfaff;;
-  --card: #ffffff;;
+  --card: #f7f5ff;;
-  --foreground: #1c1c1c;;
+  --foreground: #0f0022;;
-  --primary-cta: #e63946;;
+  --primary-cta: #8b5cf6;;
-  --primary-cta-text: #ffffff;;
+  --primary-cta-text: #fbfaff;;
   --secondary-cta: #ffffff;;
-  --secondary-cta-text: #1c1c1c;;
+  --secondary-cta-text: #0f0022;;
-  --accent: #159c49;;
+  --accent: #d8cef5;;
-  --background-accent: #a8e8ba;;
+  --background-accent: #c4a8f9;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);