Merge version_3 into main #7
131
src/app/about/page.tsx
Normal file
131
src/app/about/page.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme/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"
|
||||
>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
]}
|
||||
brandName="Break Point"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@breakpoint.studio"
|
||||
/>
|
||||
|
||||
{/* 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"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
225
src/app/page.tsx
225
src/app/page.tsx
@@ -1,213 +1,44 @@
|
||||
"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";
|
||||
|
||||
export default function LandingPage() {
|
||||
const handleContactSubmit = (email: string) => {
|
||||
console.log("Contact form submitted with email:", email);
|
||||
// Handle form submission - could send to API, email service, etc.
|
||||
};
|
||||
|
||||
const handleFooterClick = (label: string) => {
|
||||
console.log("Footer link clicked:", label);
|
||||
};
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroPersonalLinks from "@/components/sections/hero/HeroPersonalLinks";
|
||||
import { Sparkles } from "lucide-react";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
sizing="mediumLarge"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Break Point"
|
||||
navItems={[
|
||||
{ name: "Work", id: "portfolio" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
]}
|
||||
brandName="Break Point"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@breakpoint.studio"
|
||||
/>
|
||||
<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."
|
||||
<HeroPersonalLinks
|
||||
background={{ variant: "plain" }}
|
||||
avatars={[
|
||||
title="Break Point"
|
||||
linkCards={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/serene-businessman-with-glasses_1098-719.jpg", alt: "Team member 1"
|
||||
},
|
||||
{
|
||||
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"
|
||||
icon: Sparkles,
|
||||
title: "Modern Web Design", description: "Beautiful, conversion-focused digital experiences", button: {
|
||||
text: "Learn More", href: "/about"},
|
||||
},
|
||||
]}
|
||||
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: 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."
|
||||
},
|
||||
]}
|
||||
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."
|
||||
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", onProductClick: () => console.log("Product 1 clicked")
|
||||
},
|
||||
{
|
||||
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", onProductClick: () => console.log("Product 2 clicked")
|
||||
},
|
||||
{
|
||||
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", onProductClick: () => console.log("Product 3 clicked")
|
||||
},
|
||||
]}
|
||||
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"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</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" }}
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="your@email.com"
|
||||
buttonText="Start Conversation"
|
||||
termsText="We respect your privacy. Unsubscribe at any time."
|
||||
onSubmit={handleContactSubmit}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Services", href: "#features", onClick: () => handleFooterClick("Services") },
|
||||
{ label: "Portfolio", href: "#portfolio", onClick: () => handleFooterClick("Portfolio") },
|
||||
{ label: "Process", href: "#about", onClick: () => handleFooterClick("Process") },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about", onClick: () => handleFooterClick("About Us") },
|
||||
{ label: "Contact", href: "#contact", onClick: () => handleFooterClick("Contact") },
|
||||
{ label: "Blog", href: "#", onClick: () => handleFooterClick("Blog") },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#", onClick: () => handleFooterClick("Privacy Policy") },
|
||||
{ label: "Terms of Service", href: "#", onClick: () => handleFooterClick("Terms of Service") },
|
||||
{ label: "Cookie Policy", href: "#", onClick: () => handleFooterClick("Cookie Policy") },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2025 Break Point Web Studio. All rights reserved."
|
||||
bottomRightText="Crafted with precision and passion."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user