Update theme colors

Merge version_4 into main

src/app/contact/page.tsx

@@ -2,106 +2,47 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FooterBase from '@/components/sections/footer/FooterBase';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBase from '@/components/sections/footer/FooterBase';
 
-export default function LandingPage() {
+export default function ContactPage() {
   return (
-    <ThemeProvider
+    <ThemeProvider 
-        defaultButtonVariant="bounce-effect"
+      defaultButtonVariant="text-stagger" 
-        defaultTextAnimation="entrance-slide"
+      defaultTextAnimation="entrance-slide" 
-        borderRadius="pill"
+      borderRadius="rounded" 
-        contentWidth="small"
+      contentWidth="medium" 
-        sizing="mediumLargeSizeLargeTitles"
+      sizing="medium" 
-        background="fluid"
+      background="circleGradient" 
-        cardStyle="gradient-radial"
+      cardStyle="glass-elevated" 
-        primaryButtonStyle="primary-glow"
+      primaryButtonStyle="gradient" 
-        secondaryButtonStyle="solid"
+      secondaryButtonStyle="glass" 
-        headingFontWeight="extrabold"
+      headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
-      <NavbarStyleFullscreen
+          navItems={[
-      navItems={[
+            { name: "Home", id: "/" },
-        {
+            { name: "Services", id: "/services" },
-          name: "Home",
+            { name: "Contact", id: "/contact" },
-          id: "/",
+          ]}
-        },
+          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/uploaded-1777200990405-fpi8ibhu.png"
-        {
+          brandName="Digital Creation"
-          name: "About",
+          button={{ text: "WhatsApp", href: "https://wa.me/yournumber" }}
-          id: "/about",
+        />
-        },
+        <ContactCenter 
-        {
+          tag="Contact Us"
-          name: "Contact",
+          title="Let's build something great"
-          id: "/contact",
+          description="Have a project in mind? Reach out and let's get started."
-        },
+          background={{ variant: "plain" }}
-      ]}
+          useInvertedBackground={false}
-      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/uploaded-1777200990405-fpi8ibhu.png"
+        />
-      brandName="Digital Creation"
+        <FooterBase 
-      button={{
+          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }] }]} 
-        text: "WhatsApp",
+          logoText="Digital Creation" 
-        href: "https://wa.me/yournumber",
+        />
-      }}
-    />
-  </div>
-
-  <div id="contact-form" data-section="contact-form">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Contact Us"
-      description="Get in touch with our team today."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Name",
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email",
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/modern-digital-workspace-high-tech-feel--1777201085392-c1ad28a9.png"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Inquiry"
-      title="Ready to start?"
-      description="Let's discuss how we can help your brand reach its full potential."
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Links",
-          items: [
-            {
-              label: "About",
-              href: "/about",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-      ]}
-      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/uploaded-1777200990405-fpi8ibhu.png"
-      logoText="Digital Creation"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/layout.tsx

@@ -6,6 +6,7 @@ import "@/lib/gsap-setup";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Nunito_Sans } from "next/font/google";
+import { Figtree } from "next/font/google";
 
 
 
@@ -18,7 +19,11 @@ export const metadata: Metadata = {
   },
 };
 
-const nunitoSans = Nunito_Sans({ variable: "--font-nunito-sans", subsets: ["latin"] });
+
+const figtree = Figtree({
+  variable: "--font-figtree",
+  subsets: ["latin"],
+});
 
 export default function RootLayout({
   children,
@@ -28,7 +33,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
-        <body className={`${nunitoSans.variable} antialiased`}>
+        <body className={`${figtree.variable} antialiased`}>
           
           {children}
           <script

src/app/page.tsx

@@ -2,10 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
@@ -29,20 +28,22 @@ export default function LandingPage() {
           <NavbarStyleFullscreen
             navItems={[
               { name: "Home", id: "/" },
-              { name: "About", id: "/about" },
+              { name: "Services", id: "/services" },
               { name: "Contact", id: "/contact" },
             ]}
             logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/uploaded-1777200990405-fpi8ibhu.png"
             brandName="Digital Creation"
+            logoClassName="scale-150"
             button={{ text: "WhatsApp", href: "https://wa.me/yournumber" }}
           />
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroLogo
+          <HeroBillboard
-            logoText="Digital Creation"
+            title="Digital Creation"
             description="Transforming ideas into cutting-edge digital experiences."
-            buttons={[{ text: "Get Started", href: "#contact" }]}
+            background={{ variant: "gradient-bars" }}
+            buttons={[{ text: "Get Started", href: "/contact" }]}
             imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-digital-agency-hero-backgro-1777201012465-62f4e814.png"
           />
         </div>
@@ -56,18 +57,9 @@ export default function LandingPage() {
             title="Our Solutions"
             description="We craft digital excellence."
             features={[
-              {
+              { title: "Strategy", description: "Defining your digital vision.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201034092-02e81a9a.png" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201041718-c27fe461.png" } },
-                title: "Strategy",                description: "Defining your digital vision.",                phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201034092-02e81a9a.png" },
+              { title: "Development", description: "Building powerful applications.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201095600-5de2edf3.png" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201103456-4ace4124.png" } },
-                phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201041718-c27fe461.png" }
+              { title: "Design", description: "Creating impactful visuals.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201113489-31d9b01b.png" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201121164-fd368f8f.png" } }
-              },
-              {
-                title: "Development",                description: "Building powerful applications.",                phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201095600-5de2edf3.png" },
-                phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201103456-4ace4124.png" }
-              },
-              {
-                title: "Design",                description: "Creating impactful visuals.",                phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201113489-31d9b01b.png" },
-                phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201121164-fd368f8f.png" }
-              }
             ]}
           />
         </div>
@@ -104,20 +96,10 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="contact" data-section="contact">
-          <ContactCenter
-            useInvertedBackground={false}
-            background={{ variant: "plain" }}
-            tag="Newsletter"
-            title="Stay updated with tech trends"
-            description="Join our weekly newsletter to get the latest insights in digital transformation."
-          />
-        </div>
-
         <div id="footer" data-section="footer">
           <FooterBase
-            columns={[{ title: "Links", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }]}
+            columns={[{ title: "Links", items: [{ label: "Services", href: "/services" }, { label: "Contact", href: "/contact" }] }]}
-            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/uploaded-1777200990405-fpi8ibhu.png"
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/uploaded-1777202327410-pp97c78b.png"
             logoText="Digital Creation"
           />
         </div>

src/app/services/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/uploaded-1777200990405-fpi8ibhu.png"
+          brandName="Digital Creation"
+          button={{ text: "WhatsApp", href: "https://wa.me/yournumber" }}
+        />
+        <FeatureCardNine
+          animationType="slide-up"
+          textboxLayout="default"
+          title="Our Comprehensive Services"
+          description="We offer end-to-end digital solutions to grow your business."
+          features={[
+            { title: "Strategy", description: "Defining your digital vision and roadmap.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201034092-02e81a9a.png" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201041718-c27fe461.png" } },
+            { title: "Development", description: "Scalable, high-performance web and mobile apps.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201095600-5de2edf3.png" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201103456-4ace4124.png" } },
+            { title: "Design", description: "User-centric UI/UX that captivates your audience.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201113489-31d9b01b.png" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201121164-fd368f8f.png" } }
+          ]}
+          showStepNumbers={true}
+          useInvertedBackground={false}
+        />
+        <FooterBase 
+          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/contact" }] }]} 
+          logoText="Digital Creation" 
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-nunito-sans), sans-serif;
+  font-family: var(--font-figtree), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-nunito-sans), sans-serif;
+  font-family: var(--font-figtree), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #04225d;
-  --card: #f9f9f9;
+  --card: #001122;
-  --foreground: #000612;
+  --foreground: #ffffff;
   --primary-cta: #15479c;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #b8111f;
+  --secondary-cta: #1e293b;
   --secondary-cta-text: #ffffff;
-  --accent: #eab308;
+  --accent: #04225D;
-  --background-accent: #f1f5f9;
+  --background-accent: #1e3a8a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);