Update src/app/layout.tsx

Merge version_6 into main

src/app/page.tsx

@@ -3,71 +3,94 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
 import HeroPersonalLinks from "@/components/sections/hero/HeroPersonalLinks";
-import { Sparkles, Twitter, Linkedin, Github, Instagram, Briefcase, Mail, FileText } from "lucide-react";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import { Sparkles, Code, Zap } from "lucide-react";
 
 export default function Home() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
+      defaultButtonVariant="text-shift"
       defaultTextAnimation="entrance-slide"
-      borderRadius="soft"
+      borderRadius="rounded"
-      contentWidth="medium"
+      contentWidth="mediumLarge"
-      sizing="mediumLarge"
+      sizing="largeSizeMediumTitles"
       background="none"
-      cardStyle="solid"
+      cardStyle="gradient-mesh"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="extrabold"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
           navItems={[
             { name: "Home", id: "/" },
-            { name: "About", id: "/about" },
+            { name: "Services", id: "#services" },
+            { name: "Contact", id: "#contact" },
           ]}
-          brandName="Break Point"
+          brandName="PRECISION"
-          bottomLeftText="Global Community"
+          bottomLeftText="CODE. UNBREAKABLE DESIGN"
-          bottomRightText="hello@breakpoint.studio"
+          bottomRightText="hello@precision.io"
         />
       </div>
+
       <div id="hero" data-section="hero">
         <HeroPersonalLinks
-          background={{ variant: "plain" }}
+          background={{ variant: "downward-rays-animated-grid" }}
-          title="Break Point"
+          title="PRECISION CODE. UNBREAKABLE DESIGN"
-          socialLinks={[
-            { icon: Twitter, label: "Twitter", href: "https://twitter.com" },
-            { icon: Linkedin, label: "LinkedIn", href: "https://linkedin.com" },
-            { icon: Github, label: "GitHub", href: "https://github.com" },
-            { icon: Instagram, label: "Instagram", href: "https://instagram.com" },
-          ]}
           linkCards={[
+            {
+              icon: Code,
+              title: "Custom Web Development",              description: "High-performance digital solutions tailored to your brand",              button: {
+                text: "START YOUR PROJECT",                href: "#contact"},
+            },
             {
               icon: Sparkles,
-              title: "Modern Web Design",              description: "Beautiful, conversion-focused digital experiences",              button: {
+              title: "Responsive UI/UX Design",              description: "Beautiful interfaces that convert visitors into customers",              button: {
-                text: "Learn More",                href: "/about"
+                text: "EXPLORE DESIGN",                href: "#services"},
-              },
             },
             {
-              icon: Briefcase,
+              icon: Zap,
-              title: "Our Portfolio",              description: "Explore our latest projects and case studies",              button: {
+              title: "Performance Optimization",              description: "Lightning-fast load times and seamless user experience",              button: {
-                text: "View Work",                href: "/portfolio"
+                text: "LEARN MORE",                href: "#services"},
-              },
-            },
-            {
-              icon: FileText,
-              title: "Services",              description: "Discover what we offer and how we can help",              button: {
-                text: "See Services",                href: "/services"
-              },
-            },
-            {
-              icon: Mail,
-              title: "Get in Touch",              description: "Let's talk about your next project",              button: {
-                text: "Contact Us",                href: "/contact"
-              },
             },
           ]}
         />
       </div>
+
+      <div id="services" data-section="services">
+        <ProductCardOne
+          title="OUR SERVICES"
+          description="Professional solutions designed for modern digital presence"
+          tag="SERVICES"
+          tagIcon={Sparkles}
+          products={[
+            {
+              id: "1",              name: "Custom Web Development",              price: "Enterprise Grade",              imageSrc: "asset://dev-service",              imageAlt: "Web Development Service"},
+            {
+              id: "2",              name: "Responsive UI/UX Design",              price: "Premium Design",              imageSrc: "asset://design-service",              imageAlt: "UI/UX Design Service"},
+            {
+              id: "3",              name: "Performance Optimization",              price: "Speed Guaranteed",              imageSrc: "asset://perf-service",              imageAlt: "Performance Optimization Service"},
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="blur-reveal"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          carouselMode="buttons"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="LAUNCH"
+          title="GAME. SET. LAUNCH."
+          description="Transform your digital vision into reality. Let's build something extraordinary together."
+          background={{ variant: "downward-rays-static-grid" }}
+          useInvertedBackground={false}
+          buttonText="LET'S BUILD"
+          onSubmit={(email) => console.log("Email submitted:", email)}
+        />
+      </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

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

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #121212;
-  --card: #f9f9f9;
+  --card: #1a1a1a;
-  --foreground: #000612e6;
+  --foreground: #ffffff;
-  --primary-cta: #15479c;
+  --primary-cta: #1E90FF;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
+  --accent: #CCFF00;
-  --background-accent: #c4c4c4;
+  --background-accent: #1E90FF;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);