Merge version_2 into main #2
347
src/app/page.tsx
347
src/app/page.tsx
@@ -13,7 +13,7 @@ import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import { Award, Star, Users } from "lucide-react";
|
||||
import { Award, Star, Users, PenTool, Smartphone, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -25,7 +25,7 @@ export default function LandingPage() {
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="metallic"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
@@ -33,22 +33,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Work",
|
||||
id: "work",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Lumina"
|
||||
/>
|
||||
@@ -56,118 +44,34 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Designing the Future of Digital Experiences"
|
||||
description="Lumina is a premium design agency focused on building high-performance digital products that bridge the gap between imagination and reality."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg?_wi=1",
|
||||
imageAlt: "Hero slide 1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg?_wi=2",
|
||||
imageAlt: "Hero slide 2",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg?_wi=3",
|
||||
imageAlt: "Hero slide 3",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg?_wi=4",
|
||||
imageAlt: "Hero slide 4",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg?_wi=5",
|
||||
imageAlt: "Hero slide 5",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg?_wi=6",
|
||||
imageAlt: "Hero slide 6",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg", imageAlt: "Hero slide 1" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg", imageAlt: "Hero slide 2" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg", imageAlt: "Hero slide 3" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg", imageAlt: "Hero slide 4" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg", imageAlt: "Hero slide 5" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg", imageAlt: "Hero slide 6" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg?_wi=7",
|
||||
imageAlt: "Hero slide 1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg?_wi=8",
|
||||
imageAlt: "Hero slide 2",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg?_wi=9",
|
||||
imageAlt: "Hero slide 3",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg?_wi=10",
|
||||
imageAlt: "Hero slide 4",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg?_wi=11",
|
||||
imageAlt: "Hero slide 5",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg?_wi=12",
|
||||
imageAlt: "Hero slide 6",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "View Our Work",
|
||||
href: "#work",
|
||||
},
|
||||
{
|
||||
text: "Get In Touch",
|
||||
href: "#contact",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg", imageAlt: "Hero slide 1" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg", imageAlt: "Hero slide 2" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg", imageAlt: "Hero slide 3" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg", imageAlt: "Hero slide 4" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg", imageAlt: "Hero slide 5" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg", imageAlt: "Hero slide 6" },
|
||||
]}
|
||||
buttons={[{ text: "View Our Work", href: "#work" }, { text: "Get In Touch", href: "#contact" }]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/teamwork-avatars-flat-design_23-2147552497.jpg",
|
||||
alt: "Team member",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/teamwork-avatars-flat-design_23-2147552497.jpg",
|
||||
alt: "Team member",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/teamwork-avatars-flat-design_23-2147552497.jpg",
|
||||
alt: "Team member",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/teamwork-avatars-flat-design_23-2147552497.jpg",
|
||||
alt: "Team member",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/teamwork-avatars-flat-design_23-2147552497.jpg",
|
||||
alt: "Team member",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-vector/teamwork-avatars-flat-design_23-2147552497.jpg", alt: "Team member" },
|
||||
{ src: "http://img.b2bpic.net/free-vector/teamwork-avatars-flat-design_23-2147552497.jpg", alt: "Team member" },
|
||||
{ src: "http://img.b2bpic.net/free-vector/teamwork-avatars-flat-design_23-2147552497.jpg", alt: "Team member" },
|
||||
{ src: "http://img.b2bpic.net/free-vector/teamwork-avatars-flat-design_23-2147552497.jpg", alt: "Team member" },
|
||||
{ src: "http://img.b2bpic.net/free-vector/teamwork-avatars-flat-design_23-2147552497.jpg", alt: "Team member" },
|
||||
]}
|
||||
avatarText="Trusted by 500+ global brands"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Innovation",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Performance",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Scalability",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Integrity",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Excellence",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -177,44 +81,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Global Impact",
|
||||
description: "Reaching millions through purposeful design.",
|
||||
bentoComponent: "globe",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-half-closed-dark-with-colorful-glow_169016-52251.jpg?_wi=13",
|
||||
imageAlt: "digital abstract light trails",
|
||||
},
|
||||
{
|
||||
title: "Performance Analytics",
|
||||
description: "Metrics that matter for your growth.",
|
||||
bentoComponent: "line-chart",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1y17ro&_wi=1",
|
||||
imageAlt: "minimalist web design icon",
|
||||
},
|
||||
{
|
||||
title: "Strategic Roadmap",
|
||||
description: "Phased development to ensure perfection.",
|
||||
bentoComponent: "timeline",
|
||||
heading: "Process",
|
||||
subheading: "Execution",
|
||||
items: [
|
||||
{
|
||||
label: "Planning",
|
||||
detail: "Analysis",
|
||||
},
|
||||
{
|
||||
label: "Design",
|
||||
detail: "UI/UX",
|
||||
},
|
||||
{
|
||||
label: "Launch",
|
||||
detail: "Deploy",
|
||||
},
|
||||
],
|
||||
completedLabel: "Done",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/create-website-layout-blank-banner_53876-132284.jpg?_wi=1",
|
||||
imageAlt: "ui interface chart dark",
|
||||
},
|
||||
{ title: "Global Impact", description: "Reaching millions through purposeful design.", bentoComponent: "globe" },
|
||||
{ title: "Performance Analytics", description: "Metrics that matter for your growth.", bentoComponent: "line-chart" },
|
||||
{ title: "Strategic Roadmap", description: "Phased development to ensure perfection.", bentoComponent: "timeline", heading: "Process", subheading: "Execution", items: [{ label: "Planning", detail: "Analysis" }, { label: "Design", detail: "UI/UX" }, { label: "Launch", detail: "Deploy" }], completedLabel: "Done" },
|
||||
]}
|
||||
title="Why Choose Lumina"
|
||||
description="We blend design, strategy, and engineering to craft experiences that scale."
|
||||
@@ -226,24 +95,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Web Design",
|
||||
description: "High-fidelity UI/UX design.",
|
||||
buttonIcon: "PenTool",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1y17ro&_wi=2",
|
||||
},
|
||||
{
|
||||
title: "App Development",
|
||||
description: "Robust mobile and web platforms.",
|
||||
buttonIcon: "Smartphone",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/create-website-layout-blank-banner_53876-132284.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "Branding Identity",
|
||||
description: "Timeless visuals that build brands.",
|
||||
buttonIcon: "Zap",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-ai-tech-agency-workspace-providing-custom-software-development-services_482257-120228.jpg",
|
||||
},
|
||||
{ title: "Web Design", description: "High-fidelity UI/UX design.", buttonIcon: PenTool },
|
||||
{ title: "App Development", description: "Robust mobile and web platforms.", buttonIcon: Smartphone },
|
||||
{ title: "Branding Identity", description: "Timeless visuals that build brands.", buttonIcon: Zap },
|
||||
]}
|
||||
title="Our Specialized Services"
|
||||
description="Customized solutions for complex problems."
|
||||
@@ -257,26 +111,11 @@ export default function LandingPage() {
|
||||
rating={5}
|
||||
author="Marcus Thorne, CEO of Nexus"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-serious-middle-aged-business-leader_1262-4838.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-serious-middle-aged-business-leader_1262-4838.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-serious-middle-aged-business-leader_1262-4838.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-serious-middle-aged-business-leader_1262-4838.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-serious-middle-aged-business-leader_1262-4838.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-serious-middle-aged-business-leader_1262-4838.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-serious-middle-aged-business-leader_1262-4838.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-serious-middle-aged-business-leader_1262-4838.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-serious-middle-aged-business-leader_1262-4838.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-serious-middle-aged-business-leader_1262-4838.jpg", alt: "Client 5" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="blur-reveal"
|
||||
@@ -290,27 +129,9 @@ export default function LandingPage() {
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "150+",
|
||||
title: "Projects",
|
||||
description: "Across industries",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "20M+",
|
||||
title: "Users",
|
||||
description: "Supported global users",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "45+",
|
||||
title: "Awards",
|
||||
description: "Design excellence",
|
||||
icon: Star,
|
||||
},
|
||||
{ id: "m1", value: "150+", title: "Projects", description: "Across industries", icon: Award },
|
||||
{ id: "m2", value: "20M+", title: "Users", description: "Supported global users", icon: Users },
|
||||
{ id: "m3", value: "45+", title: "Awards", description: "Design excellence", icon: Star },
|
||||
]}
|
||||
title="Agency Milestones"
|
||||
description="Consistently driving measurable impact."
|
||||
@@ -322,20 +143,8 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Legacy code issues",
|
||||
"Slow load times",
|
||||
"Bad user flow",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Modern clean stack",
|
||||
"Optimized performance",
|
||||
"Seamless UX",
|
||||
],
|
||||
}}
|
||||
negativeCard={{ items: ["Legacy code issues", "Slow load times", "Bad user flow"] }}
|
||||
positiveCard={{ items: ["Modern clean stack", "Optimized performance", "Seamless UX"] }}
|
||||
title="Performance Insights"
|
||||
description="Our comparative strategy drives higher engagement."
|
||||
/>
|
||||
@@ -347,24 +156,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex Rivers",
|
||||
role: "Creative Lead",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-tablet-connected-laptop_23-2149119251.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Jordan Key",
|
||||
role: "Lead Architect",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-tablet-connected-laptop_23-2149119251.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sam Smith",
|
||||
role: "UI Engineer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-tablet-connected-laptop_23-2149119251.jpg?_wi=3",
|
||||
},
|
||||
{ id: "t1", name: "Alex Rivers", role: "Creative Lead" },
|
||||
{ id: "t2", name: "Jordan Key", role: "Lead Architect" },
|
||||
{ id: "t3", name: "Sam Smith", role: "UI Engineer" },
|
||||
]}
|
||||
title="Meet the Minds"
|
||||
description="Collaborative experts behind Lumina."
|
||||
@@ -376,21 +170,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do we start?",
|
||||
content: "Book a discovery call with our leads.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What is the timeline?",
|
||||
content: "Projects usually range from 4 to 12 weeks.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Do you offer support?",
|
||||
content: "Yes, we provide ongoing maintenance support.",
|
||||
},
|
||||
{ id: "f1", title: "How do we start?", content: "Book a discovery call with our leads." },
|
||||
{ id: "f2", title: "What is the timeline?", content: "Projects usually range from 4 to 12 weeks." },
|
||||
{ id: "f3", title: "Do you offer support?", content: "Yes, we provide ongoing maintenance support." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Get answers about our agency process."
|
||||
@@ -401,46 +183,19 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Get In Touch"
|
||||
title="Start Your Project"
|
||||
description="Ready to innovate? Reach out to Lumina today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "mailto:hello@lumina.com",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Contact Us", href: "mailto:hello@lumina.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Agency",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Work",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Agency", items: [{ label: "About", href: "#" }, { label: "Work", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }] },
|
||||
]}
|
||||
logoText="Lumina"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user