Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8d062123e1 | |||
| 79cbbea190 | |||
| 35fdab6fb5 | |||
| b9c72f11a9 | |||
| add5644ecb | |||
| 272e888bd5 | |||
| 9fea03dd53 | |||
| 68eeea574d | |||
| 7fb31a5254 | |||
| 034375ab78 | |||
| 493d36bb90 | |||
| 954a9ce593 | |||
| 88d9554bc6 | |||
| 31d8dafe78 |
@@ -1,12 +1,14 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Inter } from "next/font/google";
|
import { Inter_Tight } from "next/font/google";
|
||||||
import "./globals.css";
|
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 = {
|
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({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
@@ -15,16 +17,25 @@ export default function RootLayout({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<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}
|
{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
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
|
|||||||
@@ -3,47 +3,94 @@
|
|||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||||
import HeroPersonalLinks from "@/components/sections/hero/HeroPersonalLinks";
|
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() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="hover-magnetic"
|
defaultButtonVariant="text-shift"
|
||||||
defaultTextAnimation="entrance-slide"
|
defaultTextAnimation="entrance-slide"
|
||||||
borderRadius="soft"
|
borderRadius="rounded"
|
||||||
contentWidth="medium"
|
contentWidth="mediumLarge"
|
||||||
sizing="mediumLarge"
|
sizing="largeSizeMediumTitles"
|
||||||
background="none"
|
background="none"
|
||||||
cardStyle="solid"
|
cardStyle="gradient-mesh"
|
||||||
primaryButtonStyle="gradient"
|
primaryButtonStyle="gradient"
|
||||||
secondaryButtonStyle="glass"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="bold"
|
headingFontWeight="extrabold"
|
||||||
>
|
>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleFullscreen
|
<NavbarStyleFullscreen
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "Home", id: "/" },
|
{ 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>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroPersonalLinks
|
<HeroPersonalLinks
|
||||||
background={{ variant: "plain" }}
|
background={{ variant: "downward-rays-animated-grid" }}
|
||||||
title="Break Point"
|
title="PRECISION CODE. UNBREAKABLE DESIGN"
|
||||||
linkCards={[
|
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,
|
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: Zap,
|
||||||
|
title: "Performance Optimization", description: "Lightning-fast load times and seamless user experience", button: {
|
||||||
|
text: "LEARN MORE", href: "#services"},
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ html {
|
|||||||
body {
|
body {
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: var(--font-inter), sans-serif;
|
font-family: var(--font-inter-tight), sans-serif;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overscroll-behavior: none;
|
overscroll-behavior: none;
|
||||||
@@ -24,5 +24,5 @@ h3,
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-family: var(--font-public-sans), sans-serif;
|
font-family: var(--font-inter-tight), sans-serif;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,15 +10,15 @@
|
|||||||
--accent: #ffffff;
|
--accent: #ffffff;
|
||||||
--background-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;
|
--primary-cta-text: #ffffff;
|
||||||
--secondary-cta: #f9f9f9;
|
--secondary-cta: #1a1a1a;
|
||||||
--secondary-cta-text: #000612e6;
|
--secondary-cta-text: #000612e6;
|
||||||
--accent: #e2e2e2;
|
--accent: #CCFF00;
|
||||||
--background-accent: #c4c4c4;
|
--background-accent: #1E90FF;
|
||||||
|
|
||||||
/* text sizing - set by ThemeProvider */
|
/* text sizing - set by ThemeProvider */
|
||||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||||
|
|||||||
Reference in New Issue
Block a user