Update src/app/layout.tsx

Merge version_6 into main

src/app/about/page.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
+import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
+import { Zap, Code, CheckCircle, Users } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+          ]}
+          brandName="Break Point"
+          bottomLeftText="Global Community"
+          bottomRightText="hello@breakpoint.studio"
+        />
+      </div>
+
+      {/* Opening Statement */}
+      <div
+        id="opening"
+        data-section="opening"
+        className="flex items-center justify-center min-h-screen px-6 py-20"
+      >
+        <div className="max-w-2xl text-center">
+          <h1 className="text-5xl md:text-6xl font-bold mb-6">
+            Breakpoints and Adaptability
+          </h1>
+          <p className="text-lg md:text-xl text-foreground/80">
+            We believe that digital experiences should respond gracefully to every device, every screen size, and every user expectation. Just like responsive design adapts at breakpoints, we adapt our strategies to your unique challenges.
+          </p>
+        </div>
+      </div>
+
+      {/* Problem Section */}
+      <div id="problem" data-section="problem" className="py-20 px-6">
+        <div className="max-w-3xl mx-auto">
+          <h2 className="text-4xl md:text-5xl font-bold mb-8 text-center">
+            The Problem
+          </h2>
+          <div className="space-y-6">
+            <div className="p-6 border border-accent rounded-lg">
+              <h3 className="text-xl font-semibold mb-3">Static Websites</h3>
+              <p className="text-foreground/75">
+                Many websites are rigid and inflexible, failing to adapt to user needs or changing market conditions. They look good on desktop but crumble on mobile, or they remain unchanged for years while competitors innovate.
+              </p>
+            </div>
+            <div className="p-6 border border-accent rounded-lg">
+              <h3 className="text-xl font-semibold mb-3">Slow Digital Experiences</h3>
+              <p className="text-foreground/75">
+                Performance matters. Websites that load slowly, respond sluggishly, or fail to engage users create frustration and lost conversions. Speed and responsiveness are no longer nice-to-haves—they're essential.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Solution Section */}
+      <div id="solution" data-section="solution" className="py-20 px-6">
+        <div className="max-w-3xl mx-auto">
+          <h2 className="text-4xl md:text-5xl font-bold mb-8 text-center">
+            Our Solution
+          </h2>
+          <div className="p-8 bg-card rounded-lg border border-accent">
+            <p className="text-lg text-foreground/85 leading-relaxed">
+              We create resilient digital experiences that adapt, perform, and inspire. Our approach combines strategic thinking, clean code, and aesthetic polish to deliver websites that don't just work—they thrive across every platform, every device, and every interaction.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Three-Phase Section */}
+      <div id="phases" data-section="phases">
+        <FeatureBorderGlow
+          title="Our Three-Phase Approach"
+          description="From discovery to launch, we follow a proven methodology to ensure your success."
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          features={[
+            {
+              icon: Zap,
+              title: "Strategy: Find the Break",              description:
+                "We discover the breaking points in your current digital experience. Through research and analysis, we identify where your website fails to adapt and where opportunities exist."
+            },
+            {
+              icon: Code,
+              title: "Craft: Clean Code Meets Aesthetic",              description:
+                "We build with precision and beauty. Our code is clean, maintainable, and performant. Every pixel serves a purpose. Every interaction feels intentional."
+            },
+            {
+              icon: CheckCircle,
+              title: "Launch: Rigorous Testing",              description:
+                "Before launch, we test across every device, every browser, every user scenario. We ensure your website doesn't just work—it excels."
+            },
+          ]}
+        />
+      </div>
+
+      {/* Closing Team Quote */}
+      <div id="closing-quote" data-section="closing-quote">
+        <TestimonialCardTwelve
+          testimonials={[
+            {
+              id: "1",              name: "Team Member 1",              imageSrc: "https://api.dicebear.com/7.x/avataaars/svg?seed=1"
+            },
+            {
+              id: "2",              name: "Team Member 2",              imageSrc: "https://api.dicebear.com/7.x/avataaars/svg?seed=2"
+            },
+            {
+              id: "3",              name: "Team Member 3",              imageSrc: "https://api.dicebear.com/7.x/avataaars/svg?seed=3"
+            },
+            {
+              id: "4",              name: "Team Member 4",              imageSrc: "https://api.dicebear.com/7.x/avataaars/svg?seed=4"
+            },
+          ]}
+          cardTitle="We love edge cases. They're where the magic happens."
+          cardTag="Team Philosophy"
+          cardAnimation="none"
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,51 +1,42 @@
 import type { Metadata } from "next";
-import { Public_Sans } from "next/font/google";
-import { Inter } from "next/font/google";
+import { Inter_Tight } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 
-const publicSans = Public_Sans({
-  variable: "--font-public-sans",  subsets: ["latin"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
+const interTight = Inter_Tight({
+  variable: "--font-inter-tight",  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
 });
 
 export const metadata: Metadata = {
-  title: "Break Point Web Studio | Minimal Modern Web Design",  description: "Award-winning web design studio specializing in minimal, modern websites that convert. Strategic design for SaaS, e-commerce, and digital agencies.",  keywords: "web design, minimal design, modern websites, web studio, digital design, responsive design, UX/UI",  metadataBase: new URL("https://breakpointwebstudio.com"),
-  alternates: {
-    canonical: "https://breakpointwebstudio.com"},
-  openGraph: {
-    title: "Break Point Web Studio | Exceptional Web Design",    description: "We craft minimal, modern websites that drive results and stand out.",    url: "https://breakpointwebstudio.com",    siteName: "Break Point Web Studio",    type: "website",    images: [
-      {
-        url: "https://breakpointwebstudio.com/og-image.jpg",        alt: "Break Point Web Studio - Modern Web Design"},
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Break Point Web Studio",    description: "Minimal, modern web design that converts.",    images: ["https://breakpointwebstudio.com/twitter-image.jpg"],
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
-};
+  title: "Precision Code. Unbreakable Design | Web Development",  description: "High-end professional web development and design services. Digital presence, custom solutions, and performance optimization."};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${publicSans.variable} ${inter.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                const htmlElement = document.documentElement;
+                const vw = window.innerWidth / 100;
+                htmlElement.style.setProperty('--vw', vw + 'px');
+                window.addEventListener('resize', () => {
+                  const newVw = window.innerWidth / 100;
+                  htmlElement.style.setProperty('--vw', newVw + 'px');
+                });
+              })();
+            `,
+          }}
+        />
+      </head>
+      <body className={`${interTight.variable}`} suppressHydrationWarning>
+        {children}
+      
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1413,7 +1404,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,191 +1,96 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { BarChart3, Palette, Smartphone, Zap } from "lucide-react";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroPersonalLinks from "@/components/sections/hero/HeroPersonalLinks";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import { Sparkles, Code, Zap } from "lucide-react";
 
-export default function LandingPage() {
+export default function Home() {
   return (
     <ThemeProvider
-      defaultButtonVariant="icon-arrow"
+      defaultButtonVariant="text-shift"
       defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
-      contentWidth="medium"
-      sizing="mediumLargeSizeLargeTitles"
-      background="circleGradient"
-      cardStyle="glass-depth"
-      primaryButtonStyle="primary-glow"
-      secondaryButtonStyle="layered"
-      headingFontWeight="medium"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="largeSizeMediumTitles"
+      background="none"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
-          brandName="Break Point"
+        <NavbarStyleFullscreen
           navItems={[
-            { name: "Work", id: "portfolio" },
-            { name: "About", id: "about" },
-            { name: "Services", id: "features" },
-            { name: "Contact", id: "contact" },
+            { name: "Home", id: "/" },
+            { name: "Services", id: "#services" },
+            { name: "Contact", id: "#contact" },
           ]}
-          button={{ text: "Get Started", href: "#contact" }}
-          animateOnLoad={true}
+          brandName="PRECISION"
+          bottomLeftText="CODE. UNBREAKABLE DESIGN"
+          bottomRightText="hello@precision.io"
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroCentered
-          title="Where Vision Meets Design Excellence"
-          description="We craft minimal, modern websites that drive results. Break Point Web Studio specializes in creating beautiful, conversion-focused digital experiences that stand out."
-          background={{ variant: "plain" }}
-          avatars={[
+        <HeroPersonalLinks
+          background={{ variant: "downward-rays-animated-grid" }}
+          title="PRECISION CODE. UNBREAKABLE DESIGN"
+          linkCards={[
             {
-              src: "http://img.b2bpic.net/free-photo/serene-businessman-with-glasses_1098-719.jpg",              alt: "Team member 1"},
+              icon: Code,
+              title: "Custom Web Development",              description: "High-performance digital solutions tailored to your brand",              button: {
+                text: "START YOUR PROJECT",                href: "#contact"},
+            },
             {
-              src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              alt: "Team member 2"},
-            {
-              src: "http://img.b2bpic.net/free-photo/smiley-front-view-business-man_23-2148763836.jpg",              alt: "Team member 3"},
-          ]}
-          avatarText="Trusted by 50+ brands worldwide"
-          buttons={[
-            { text: "View Our Work", href: "#portfolio" },
-            { text: "Schedule a Call", href: "#contact" },
-          ]}
-          buttonAnimation="slide-up"
-          ariaLabel="Hero section"
-        />
-      </div>
-
-      <div id="about" data-section="about">
-        <InlineImageSplitTextAbout
-          heading={[
-            { type: "text", content: "We believe great design is" },
-            { type: "text", content: "invisible—it just works" },
-          ]}
-          buttons={[{ text: "Learn More", href: "#features" }]}
-          buttonAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="features" data-section="features">
-        <FeatureBorderGlow
-          title="What We Deliver"
-          description="Our process combines strategic thinking with creative excellence to deliver websites that convert."
-          features={[
+              icon: Sparkles,
+              title: "Responsive UI/UX Design",              description: "Beautiful interfaces that convert visitors into customers",              button: {
+                text: "EXPLORE DESIGN",                href: "#services"},
+            },
             {
               icon: Zap,
-              title: "Lightning Fast",              description: "Optimized performance that loads in milliseconds. Every second counts in user experience."},
-            {
-              icon: Palette,
-              title: "Pixel Perfect",              description: "Meticulous attention to detail in every element. Design that resonates with your audience."},
-            {
-              icon: Smartphone,
-              title: "Fully Responsive",              description: "Beautiful on every device. Mobile-first approach ensures perfect experiences everywhere."},
-            {
-              icon: BarChart3,
-              title: "Data Driven",              description: "Strategic design backed by analytics. Every decision supports your business goals."},
+              title: "Performance Optimization",              description: "Lightning-fast load times and seamless user experience",              button: {
+                text: "LEARN MORE",                href: "#services"},
+            },
           ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
         />
       </div>
 
-      <div id="portfolio" data-section="portfolio">
-        <ProductCardTwo
-          title="Recent Work"
-          description="A selection of projects showcasing our design expertise and strategic approach."
+      <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",              brand: "Break Point",              name: "SaaS Platform Redesign",              price: "Enterprise",              rating: 5,
-              reviewCount: "12.4k views",              imageSrc: "http://img.b2bpic.net/free-psd/dark-new-year-resolutions-landing-page-template_23-2149128905.jpg",              imageAlt: "SaaS platform design"},
+              id: "1",              name: "Custom Web Development",              price: "Enterprise Grade",              imageSrc: "asset://dev-service",              imageAlt: "Web Development Service"},
             {
-              id: "2",              brand: "Break Point",              name: "E-Commerce Experience",              price: "Premium",              rating: 5,
-              reviewCount: "8.9k views",              imageSrc: "http://img.b2bpic.net/free-psd/home-design-landing-page_23-2150443560.jpg",              imageAlt: "E-commerce website design"},
+              id: "2",              name: "Responsive UI/UX Design",              price: "Premium Design",              imageSrc: "asset://design-service",              imageAlt: "UI/UX Design Service"},
             {
-              id: "3",              brand: "Break Point",              name: "Digital Agency Site",              price: "Featured",              rating: 5,
-              reviewCount: "15.2k views",              imageSrc: "http://img.b2bpic.net/free-vector/flat-design-fashion-design-landing-page_23-2149909571.jpg",              imageAlt: "Agency website design"},
+              id: "3",              name: "Performance Optimization",              price: "Speed Guaranteed",              imageSrc: "asset://perf-service",              imageAlt: "Performance Optimization Service"},
           ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwo
-          title="What Clients Say"
-          description="Real feedback from brands we've partnered with to create exceptional digital experiences."
-          testimonials={[
-            {
-              id: "1",              name: "Sarah Chen",              role: "CEO, TechFlow",              testimonial: "Break Point transformed our digital presence. Their minimal design approach increased our conversion rate by 42% in just three months.",              imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1666.jpg",              imageAlt: "Sarah Chen"},
-            {
-              id: "2",              name: "Michael Rodriguez",              role: "Founder, CreativeHub",              testimonial: "Working with Break Point was seamless. They understood our vision instantly and delivered a website that truly represents our brand.",              imageSrc: "http://img.b2bpic.net/free-photo/african-american-young-man-wearing-jacket-checkered-shirt-looking-camera-studio_613910-21142.jpg",              imageAlt: "Michael Rodriguez"},
-            {
-              id: "3",              name: "Emma Watson",              role: "Marketing Director, InnovateLab",              testimonial: "The attention to detail and performance optimization was outstanding. Our site now loads 3x faster with a cleaner design.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-holding-bottle-beer-after-work-office-fun-activity-with-colleagues-cheerful-person-drinking-alcoholic-beverage-while-celebrating-with-friends-after-hours_482257-27455.jpg",              imageAlt: "Emma Watson"},
-            {
-              id: "4",              name: "David Kim",              role: "Product Manager, StartupXYZ",              testimonial: "Break Point doesn't just build websites—they create strategic digital assets. Highly recommended for any brand serious about growth.",              imageSrc: "http://img.b2bpic.net/free-photo/male-executive-with-glasses_1098-760.jpg",              imageAlt: "David Kim"},
-          ]}
-          animationType="slide-up"
+          gridVariant="three-columns-all-equal-width"
+          animationType="blur-reveal"
           textboxLayout="default"
           useInvertedBackground={false}
+          carouselMode="buttons"
         />
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactSplit
-          tag="Let's Connect"
-          title="Ready to break the mold?"
-          description="Get in touch with our team to discuss your next project. We're excited to help you create something extraordinary."
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          background={{ variant: "sparkles-gradient" }}
+        <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}
-          mediaAnimation="slide-up"
-          mediaPosition="right"
-          inputPlaceholder="your@email.com"
-          buttonText="Start Conversation"
-          termsText="We respect your privacy. Unsubscribe at any time."
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterSimple
-          columns={[
-            {
-              title: "Product",              items: [
-                { label: "Services", href: "#features" },
-                { label: "Portfolio", href: "#portfolio" },
-                { label: "Process", href: "#about" },
-              ],
-            },
-            {
-              title: "Company",              items: [
-                { label: "About Us", href: "#about" },
-                { label: "Contact", href: "#contact" },
-                { label: "Blog", href: "#" },
-              ],
-            },
-            {
-              title: "Legal",              items: [
-                { label: "Privacy Policy", href: "#" },
-                { label: "Terms of Service", href: "#" },
-                { label: "Cookie Policy", href: "#" },
-              ],
-            },
-          ]}
-          bottomLeftText="© 2025 Break Point Web Studio. All rights reserved."
-          bottomRightText="Crafted with precision and passion."
+          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;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
+  --background: #121212;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #1E90FF;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --accent: #CCFF00;
+  --background-accent: #1E90FF;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);