Update src/app/layout.tsx

Update src/app/styles/variables.css
Update src/app/styles/base.css
2026-03-08 01:59:39 +00:00 · 2026-03-08 01:58:56 +00:00 · 2026-03-08 01:58:56 +00:00 · 2026-03-08 01:58:55 +00:00 · 2026-03-08 01:58:55 +00:00 · 2026-03-08 01:51:18 +00:00
4 changed files with 96 additions and 38 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,14 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Inter_Tight } from "next/font/google";
 import "./globals.css";

-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 Design Studio",  description: "Minimal, modern websites that drive results. Break Point Web Studio specializes in creating beautiful, conversion-focused digital experiences."
-};
+  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,
@@ -15,16 +17,25 @@ export default function RootLayout({
 }) {
  return (
    <html lang="en" suppressHydrationWarning>
-      <body className={`${inter.variable}`}>
+      <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
-          async
-          src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"
-        ></script>
-        <script
-          async
-          src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/ScrollTrigger.min.js"
-        ></script>
      
        <script
          dangerouslySetInnerHTML={{
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,47 +3,94 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
 import HeroPersonalLinks from "@/components/sections/hero/HeroPersonalLinks";
-import { Sparkles } 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"
-      contentWidth="medium"
-      sizing="mediumLarge"
+      borderRadius="rounded"
+      contentWidth="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"
-          bottomLeftText="Global Community"
-          bottomRightText="hello@breakpoint.studio"
+          brandName="PRECISION"
+          bottomLeftText="CODE. UNBREAKABLE DESIGN"
+          bottomRightText="hello@precision.io"
        />
      </div>
+
      <div id="hero" data-section="hero">
        <HeroPersonalLinks
-          background={{ variant: "plain" }}
-          title="Break Point"
+          background={{ variant: "downward-rays-animated-grid" }}
+          title="PRECISION CODE. UNBREAKABLE DESIGN"
          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: {
-                text: "Learn More",                href: "/about"
-              },
+              title: "Responsive UI/UX Design",              description: "Beautiful interfaces that convert visitors into customers",              button: {
+                text: "EXPLORE DESIGN",                href: "#services"},
+            },
+            {
+              icon: Zap,
+              title: "Performance Optimization",              description: "Lightning-fast load times and seamless user experience",              button: {
+                text: "LEARN MORE",                href: "#services"},
            },
          ]}
        />
      </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>
  );
 }
--- a/src/app/styles/base.css
+++ b/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;
 }
--- a/src/app/styles/variables.css
+++ b/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);
Author	SHA1	Message	Date
bender	8d062123e1	Update src/app/layout.tsx	2026-03-08 01:59:39 +00:00
bender	79cbbea190	Update src/app/styles/variables.css	2026-03-08 01:58:56 +00:00
bender	35fdab6fb5	Update src/app/styles/base.css	2026-03-08 01:58:56 +00:00
bender	b9c72f11a9	Update src/app/page.tsx	2026-03-08 01:58:55 +00:00
bender	add5644ecb	Update src/app/layout.tsx	2026-03-08 01:58:55 +00:00
bender	272e888bd5	Merge version_6 into main Merge version_6 into main	2026-03-08 01:51:18 +00:00
bender	9fea03dd53	Update src/app/page.tsx	2026-03-08 01:51:13 +00:00
bender	68eeea574d	Merge version_5 into main Merge version_5 into main	2026-03-08 00:56:41 +00:00
bender	7fb31a5254	Update src/app/page.tsx	2026-03-08 00:56:37 +00:00
bender	034375ab78	Merge version_4 into main Merge version_4 into main	2026-03-08 00:54:11 +00:00
bender	493d36bb90	Update src/app/page.tsx	2026-03-08 00:54:07 +00:00
bender	954a9ce593	Update src/app/layout.tsx	2026-03-08 00:54:07 +00:00
bender	88d9554bc6	Merge version_3 into main Merge version_3 into main	2026-03-08 00:52:46 +00:00
bender	31d8dafe78	Merge version_3 into main Merge version_3 into main	2026-03-08 00:51:47 +00:00