Merge version_1 into main #2
288
src/app/page.tsx
288
src/app/page.tsx
@@ -32,22 +32,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Work",
|
||||
id: "work",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Work", id: "#work" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Dot Labs"
|
||||
/>
|
||||
@@ -55,33 +43,13 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
title="Designing the Future of Digital."
|
||||
description="Dot Labs builds premium brands, cinematic websites, AI systems, and immersive digital experiences."
|
||||
tag="CREATIVE INNOVATION STUDIO"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/seductive-blonde-woman-looks-her-bronze-shoulders-while-she_8353-403.jpg?_wi=1",
|
||||
imageAlt: "abstract digital art black white",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-wallpaper-pattern-circle-white_1258-281.jpg?_wi=1",
|
||||
imageAlt: "minimalist geometric 3d shapes",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/creative-background-with-curtain-shadow-from-window_23-2149657473.jpg",
|
||||
imageAlt: "Creative background with curtain and shadow from window",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-black-fractal-background-with-bokeh-effect_1017-3113.jpg",
|
||||
imageAlt: "Abstract black fractal background with bokeh effect",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/geometric-composition-floating-box-shapes-product-presentation_187299-48085.jpg",
|
||||
imageAlt: "Geometric Composition Floating Box and Shapes for Product Presentation",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/seductive-blonde-woman-looks-her-bronze-shoulders-while-she_8353-403.jpg", imageAlt: "abstract digital art black white" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/black-wallpaper-pattern-circle-white_1258-281.jpg", imageAlt: "minimalist geometric 3d shapes" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
@@ -94,19 +62,9 @@ export default function LandingPage() {
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "We define the boundary where technology meets",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/modern-apartment-loft-with-cozy-corner-trendy-furniture_482257-125665.jpg",
|
||||
alt: "minimalist creative studio desk",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: "limitless creativity.",
|
||||
},
|
||||
{ type: "text", content: "We define the boundary where technology meets" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/modern-apartment-loft-with-cozy-corner-trendy-furniture_482257-125665.jpg", alt: "minimalist creative studio desk" },
|
||||
{ type: "text", content: "limitless creativity." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -117,60 +75,12 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "Branding Design",
|
||||
descriptions: [
|
||||
"Crafting timeless identities that define market leaders.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/artistic-concept-musician-hugging-classical-guitar_23-2148465343.jpg",
|
||||
imageAlt: "Artistic concept of musician hugging the classical guitar",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
title: "Web Development",
|
||||
descriptions: [
|
||||
"High-performance, cinematic web experiences built for impact.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/seductive-blonde-woman-looks-her-bronze-shoulders-while-she_8353-403.jpg?_wi=2",
|
||||
imageAlt: "Artistic concept of musician hugging the classical guitar",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
title: "Motion Design",
|
||||
descriptions: [
|
||||
"Fluid motion systems that bring digital products to life.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-wallpaper-pattern-circle-white_1258-281.jpg?_wi=2",
|
||||
imageAlt: "Artistic concept of musician hugging the classical guitar",
|
||||
},
|
||||
{
|
||||
id: "s4",
|
||||
title: "AI Automation",
|
||||
descriptions: [
|
||||
"Integrating advanced AI to streamline complex workflows.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-apartment-loft-with-cozy-corner-trendy-furniture_482257-125665.jpg",
|
||||
imageAlt: "Artistic concept of musician hugging the classical guitar",
|
||||
},
|
||||
{
|
||||
id: "s5",
|
||||
title: "Video Editing",
|
||||
descriptions: [
|
||||
"Story-driven production for digital-first audiences.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg?_wi=1",
|
||||
imageAlt: "Artistic concept of musician hugging the classical guitar",
|
||||
},
|
||||
{
|
||||
id: "s6",
|
||||
title: "Marketing Strategy",
|
||||
descriptions: [
|
||||
"Growth-focused campaigns that deliver measurable value.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-doing-research-analysis-computer-screen-plan-financial-statistics-with-charts-graphs-data-male-employee-working-with-diagram-report-find-sales-profit-e-commerce_482257-40940.jpg?_wi=1",
|
||||
imageAlt: "Artistic concept of musician hugging the classical guitar",
|
||||
},
|
||||
{ id: "s1", title: "Branding Design", descriptions: ["Crafting timeless identities that define market leaders."], imageSrc: "http://img.b2bpic.net/free-photo/artistic-concept-musician-hugging-classical-guitar_23-2148465343.jpg", imageAlt: "Artistic concept of musician hugging the classical guitar" },
|
||||
{ id: "s2", title: "Web Development", descriptions: ["High-performance, cinematic web experiences built for impact."], imageSrc: "http://img.b2bpic.net/free-photo/seductive-blonde-woman-looks-her-bronze-shoulders-while-she_8353-403.jpg", imageAlt: "Artistic concept of musician hugging the classical guitar" },
|
||||
{ id: "s3", title: "Motion Design", descriptions: ["Fluid motion systems that bring digital products to life."], imageSrc: "http://img.b2bpic.net/free-photo/black-wallpaper-pattern-circle-white_1258-281.jpg", imageAlt: "Artistic concept of musician hugging the classical guitar" },
|
||||
{ id: "s4", title: "AI Automation", descriptions: ["Integrating advanced AI to streamline complex workflows."], imageSrc: "http://img.b2bpic.net/free-photo/modern-apartment-loft-with-cozy-corner-trendy-furniture_482257-125665.jpg", imageAlt: "Artistic concept of musician hugging the classical guitar" },
|
||||
{ id: "s5", title: "Video Editing", descriptions: ["Story-driven production for digital-first audiences."], imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg", imageAlt: "Artistic concept of musician hugging the classical guitar" },
|
||||
{ id: "s6", title: "Marketing Strategy", descriptions: ["Growth-focused campaigns that deliver measurable value."], imageSrc: "http://img.b2bpic.net/free-photo/businessman-doing-research-analysis-computer-screen-plan-financial-statistics-with-charts-graphs-data-male-employee-working-with-diagram-report-find-sales-profit-e-commerce_482257-40940.jpg", imageAlt: "Artistic concept of musician hugging the classical guitar" },
|
||||
]}
|
||||
title="Core Services"
|
||||
description="Engineering excellence meets artistic direction."
|
||||
@@ -179,52 +89,14 @@ export default function LandingPage() {
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Luxury Brand Identity",
|
||||
price: "2025",
|
||||
variant: "Luxury",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "SaaS Platform UI",
|
||||
price: "2025",
|
||||
variant: "SaaS",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-doing-research-analysis-computer-screen-plan-financial-statistics-with-charts-graphs-data-male-employee-working-with-diagram-report-find-sales-profit-e-commerce_482257-40940.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "AI Commercial System",
|
||||
price: "2026",
|
||||
variant: "AI",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139401.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Event Identity Suite",
|
||||
price: "2026",
|
||||
variant: "Events",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-displayed-within-geometric-wireframe_187299-46683.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Motion Reel 2026",
|
||||
price: "2026",
|
||||
variant: "Motion",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/horizontal-clay-phone-16-pro-max_187299-45928.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Interactive Web",
|
||||
price: "2025",
|
||||
variant: "Dev",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abandoned-glowing-broken-place-with-graffiti-artwork-artistic-deserted-decor-piles-debris-empty-crumbling-warehouse-old-neglected-building-with-neon-fluorescent-purple-lights_482257-64061.jpg",
|
||||
},
|
||||
{ id: "p1", name: "Luxury Brand Identity", price: "2025", variant: "Luxury", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg" },
|
||||
{ id: "p2", name: "SaaS Platform UI", price: "2025", variant: "SaaS", imageSrc: "http://img.b2bpic.net/free-photo/businessman-doing-research-analysis-computer-screen-plan-financial-statistics-with-charts-graphs-data-male-employee-working-with-diagram-report-find-sales-profit-e-commerce_482257-40940.jpg" },
|
||||
{ id: "p3", name: "AI Commercial System", price: "2026", variant: "AI", imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139401.jpg" },
|
||||
]}
|
||||
title="Featured Work"
|
||||
description="Selected digital experiences redefining the landscape."
|
||||
@@ -237,27 +109,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "50+",
|
||||
title: "Projects Completed",
|
||||
description: "Delivered across four continents.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/symmetry-magnetic-metal-shaving-white-backdrop_23-2148263524.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "10+",
|
||||
title: "Brands Scaled",
|
||||
description: "From seed to IPO growth.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes-sculpture_23-2150979580.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "Creative-First",
|
||||
description: "Quality assurance every day.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/old-vintage-retro-camera-digital-tablet-coffee-cup-paper-pencil-keyboard-white-table_23-2148061576.jpg",
|
||||
},
|
||||
{ id: "m1", value: "50+", title: "Projects Completed", description: "Delivered across four continents.", imageSrc: "http://img.b2bpic.net/free-photo/symmetry-magnetic-metal-shaving-white-backdrop_23-2148263524.jpg" },
|
||||
{ id: "m2", value: "10+", title: "Brands Scaled", description: "From seed to IPO growth.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes-sculpture_23-2150979580.jpg" },
|
||||
{ id: "m3", value: "100%", title: "Creative-First", description: "Quality assurance every day.", imageSrc: "http://img.b2bpic.net/free-photo/old-vintage-retro-camera-digital-tablet-coffee-cup-paper-pencil-keyboard-white-table_23-2148061576.jpg" },
|
||||
]}
|
||||
title="Creative Workflow"
|
||||
description="Proven results for ambitious partners."
|
||||
@@ -266,50 +120,13 @@ export default function LandingPage() {
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Chen",
|
||||
role: "CEO",
|
||||
company: "LuxeTech",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-mature-woman-sitting-stool_23-2148275043.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "David Miller",
|
||||
role: "CTO",
|
||||
company: "Innovate",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-labor-union-member_23-2150969909.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena Rodriguez",
|
||||
role: "Founder",
|
||||
company: "CreativeCo",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-modern-woman-dressed-jacket-glasses-poses-pink-with-serious-emotions-clasped-hands_291650-1132.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Marcus Thorne",
|
||||
role: "Head of Design",
|
||||
company: "ArchDigital",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-smiling_23-2148452672.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Sophie Wang",
|
||||
role: "Marketing Lead",
|
||||
company: "GrowthX",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-view-woman-taking-photo_23-2148565534.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Sarah Chen", role: "CEO", company: "LuxeTech", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/elegant-mature-woman-sitting-stool_23-2148275043.jpg" },
|
||||
{ id: "t2", name: "David Miller", role: "CTO", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-labor-union-member_23-2150969909.jpg" },
|
||||
]}
|
||||
title="Voices of Impact"
|
||||
description="Our work resonates with the best in industry."
|
||||
@@ -321,14 +138,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"LuxeTech",
|
||||
"Innovate",
|
||||
"ArchDigital",
|
||||
"GrowthX",
|
||||
"CreativeCo",
|
||||
"Vanguard",
|
||||
"Visionary",
|
||||
]}
|
||||
"LuxeTech", "Innovate", "ArchDigital", "GrowthX", "CreativeCo"]}
|
||||
title="Partners & Clients"
|
||||
description="Collaborating with leading global brands."
|
||||
/>
|
||||
@@ -337,21 +147,13 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="READY TO START?"
|
||||
title="Let’s Create Something Timeless."
|
||||
description="Join our journey into the next digital frontier."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start a Project",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "View Work",
|
||||
href: "#work",
|
||||
},
|
||||
{ text: "Start a Project", href: "#" },
|
||||
{ text: "View Work", href: "#work" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -359,34 +161,8 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Email",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "WhatsApp",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Dot Labs © 2026",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ items: [{ label: "Instagram", href: "#" }, { label: "Email", href: "#" }, { label: "WhatsApp", href: "#" }] },
|
||||
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Dot Labs © 2026", href: "#" }] },
|
||||
]}
|
||||
logoText="Dot Labs"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user