Merge version_2 into main #2
354
src/app/page.tsx
354
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 { CheckCircle2, Code2, Diamond, Palette, TrendingUp, Users } from "lucide-react";
|
||||
import { CheckCircle2, Code2, Diamond, Palette, TrendingUp, Users, ArrowRight } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -33,22 +33,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Work",
|
||||
id: "#work",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "#team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Work", id: "#work" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Team", id: "#team" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="PixelStudio"
|
||||
/>
|
||||
@@ -56,119 +44,25 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="We Build Digital Experiences That Define The Future."
|
||||
description="Crafting high-performance websites and digital solutions for ambitious brands looking to dominate their market."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29668.jpg?_wi=1",
|
||||
imageAlt: "Digital Showcase",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/illustration-several-golden-lights-motion-flowing-into-one-direction_181624-24445.jpg?_wi=1",
|
||||
imageAlt: "Abstract Art",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes_23-2150979717.jpg?_wi=1",
|
||||
imageAlt: "Dashboard UI",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colleagues-argueing-discussing-drawings-new-ideas-office_176420-1693.jpg?_wi=1",
|
||||
imageAlt: "Studio Workspace",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139291.jpg?_wi=1",
|
||||
imageAlt: "Tech Energy",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320719.jpg?_wi=1",
|
||||
imageAlt: "Designer at work",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29668.jpg", imageAlt: "Digital Showcase" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/illustration-several-golden-lights-motion-flowing-into-one-direction_181624-24445.jpg", imageAlt: "Abstract Art" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes_23-2150979717.jpg", imageAlt: "Dashboard UI" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/colleagues-argueing-discussing-drawings-new-ideas-office_176420-1693.jpg", imageAlt: "Studio Workspace" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139291.jpg", imageAlt: "Tech Energy" }
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320719.jpg?_wi=2",
|
||||
imageAlt: "Designer at work",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139291.jpg?_wi=2",
|
||||
imageAlt: "Tech Energy",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colleagues-argueing-discussing-drawings-new-ideas-office_176420-1693.jpg?_wi=2",
|
||||
imageAlt: "Studio Workspace",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes_23-2150979717.jpg?_wi=2",
|
||||
imageAlt: "Dashboard UI",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/illustration-several-golden-lights-motion-flowing-into-one-direction_181624-24445.jpg?_wi=2",
|
||||
imageAlt: "Abstract Art",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29668.jpg?_wi=2",
|
||||
imageAlt: "Digital Showcase",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320719.jpg", imageAlt: "Designer at work" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139291.jpg", imageAlt: "Tech Energy" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/colleagues-argueing-discussing-drawings-new-ideas-office_176420-1693.jpg", imageAlt: "Studio Workspace" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes_23-2150979717.jpg", imageAlt: "Dashboard UI" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/illustration-several-golden-lights-motion-flowing-into-one-direction_181624-24445.jpg", imageAlt: "Abstract Art" }
|
||||
]}
|
||||
tag="Award-Winning Agency"
|
||||
buttons={[
|
||||
{
|
||||
text: "View Our Work",
|
||||
href: "#work",
|
||||
},
|
||||
{
|
||||
text: "Let's Talk",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-man-posing-with-hat_23-2148884304.jpg",
|
||||
alt: "Team Lead",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-people-with-glasses-posing-studio_23-2150169312.jpg",
|
||||
alt: "Senior Developer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-cartoon-style-character_23-2151034081.jpg",
|
||||
alt: "UX Designer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/top-view-blue-condom-white-background_23-2148259780.jpg",
|
||||
alt: "Project Manager",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-man-posing-with-hat_23-2148884304.jpg",
|
||||
alt: "QA Lead",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 50+ global industry leaders"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Innovation",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Precision",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Scalability",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Performance",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Excellence",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "View Our Work", href: "#work" }, { text: "Let's Talk", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -178,30 +72,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "UI/UX Design",
|
||||
description: "Crafting user-centric interfaces that drive engagement and conversions.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Palette,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29668.jpg?_wi=3",
|
||||
imageAlt: "modern digital design portfolio showcase",
|
||||
},
|
||||
{
|
||||
title: "Web Development",
|
||||
description: "High-performance code built for scalability and speed.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Code2,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/illustration-several-golden-lights-motion-flowing-into-one-direction_181624-24445.jpg?_wi=3",
|
||||
imageAlt: "abstract 3d geometric gold composition",
|
||||
},
|
||||
{
|
||||
title: "Digital Branding",
|
||||
description: "Developing robust brand identities that resonate with your target audience.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Diamond,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes_23-2150979717.jpg?_wi=3",
|
||||
imageAlt: "elegant ui design dashboard dark mode",
|
||||
},
|
||||
{ title: "UI/UX Design", description: "Crafting user-centric interfaces that drive engagement and conversions.", bentoComponent: "reveal-icon", icon: Palette },
|
||||
{ title: "Web Development", description: "High-performance code built for scalability and speed.", bentoComponent: "reveal-icon", icon: Code2 },
|
||||
{ title: "Digital Branding", description: "Developing robust brand identities that resonate with your target audience.", bentoComponent: "reveal-icon", icon: Diamond }
|
||||
]}
|
||||
title="Our Core Capabilities"
|
||||
description="Comprehensive design and development services tailored to accelerate your growth."
|
||||
@@ -213,24 +86,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Fintech Dashboard",
|
||||
description: "Redesigned financial tracking tool improving user retention by 40%.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes_23-2150979717.jpg?_wi=4",
|
||||
buttonIcon: "ArrowRight",
|
||||
},
|
||||
{
|
||||
title: "Eco-Commerce Platform",
|
||||
description: "Sustainable fashion marketplace with a seamless checkout experience.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29668.jpg?_wi=4",
|
||||
buttonIcon: "ArrowRight",
|
||||
},
|
||||
{
|
||||
title: "Healthcare AI",
|
||||
description: "Innovative diagnostics platform for leading clinical research teams.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139291.jpg?_wi=3",
|
||||
buttonIcon: "ArrowRight",
|
||||
},
|
||||
{ title: "Fintech Dashboard", description: "Redesigned financial tracking tool improving user retention by 40%.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes_23-2150979717.jpg", buttonIcon: ArrowRight },
|
||||
{ title: "Eco-Commerce Platform", description: "Sustainable fashion marketplace with a seamless checkout experience.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29668.jpg", buttonIcon: ArrowRight },
|
||||
{ title: "Healthcare AI", description: "Innovative diagnostics platform for leading clinical research teams.", imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139291.jpg", buttonIcon: ArrowRight }
|
||||
]}
|
||||
title="Our Work"
|
||||
description="A curated selection of our most successful client projects."
|
||||
@@ -244,26 +102,11 @@ export default function LandingPage() {
|
||||
rating={5}
|
||||
author="Sarah Miller, CEO at Innovation Labs"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-man-posing-with-hat_23-2148884304.jpg",
|
||||
alt: "Sarah Miller",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-people-with-glasses-posing-studio_23-2150169312.jpg",
|
||||
alt: "James Wilson",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-cartoon-style-character_23-2151034081.jpg",
|
||||
alt: "Elena Rossi",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/top-view-blue-condom-white-background_23-2148259780.jpg",
|
||||
alt: "David Chen",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-man-posing-with-hat_23-2148884304.jpg",
|
||||
alt: "Maria Gomez",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-young-man-posing-with-hat_23-2148884304.jpg", alt: "Sarah Miller" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-people-with-glasses-posing-studio_23-2150169312.jpg", alt: "James Wilson" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/3d-cartoon-style-character_23-2151034081.jpg", alt: "Elena Rossi" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/top-view-blue-condom-white-background_23-2148259780.jpg", alt: "David Chen" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-young-man-posing-with-hat_23-2148884304.jpg", alt: "Maria Gomez" }
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="slide-up"
|
||||
@@ -277,27 +120,9 @@ export default function LandingPage() {
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "150+",
|
||||
title: "Projects Completed",
|
||||
description: "Across 12 unique industries",
|
||||
icon: CheckCircle2,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "50+",
|
||||
title: "Happy Clients",
|
||||
description: "Global brands we trust",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "95%",
|
||||
title: "Conversion Rate",
|
||||
description: "Average client lift",
|
||||
icon: TrendingUp,
|
||||
},
|
||||
{ id: "m1", value: "150+", title: "Projects Completed", description: "Across 12 unique industries", icon: CheckCircle2 },
|
||||
{ id: "m2", value: "50+", title: "Happy Clients", description: "Global brands we trust", icon: Users },
|
||||
{ id: "m3", value: "95%", title: "Conversion Rate", description: "Average client lift", icon: TrendingUp }
|
||||
]}
|
||||
title="Agency Milestones"
|
||||
description="Quantifiable impact delivered through consistent creative excellence."
|
||||
@@ -309,21 +134,8 @@ export default function LandingPage() {
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"No Hidden Costs",
|
||||
"No Generic Solutions",
|
||||
"No Missed Deadlines",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Discovery & Research",
|
||||
"Strategic Planning",
|
||||
"Iterative Design",
|
||||
"Agile Development",
|
||||
],
|
||||
}}
|
||||
negativeCard={{ items: ["No Hidden Costs", "No Generic Solutions", "No Missed Deadlines"] }}
|
||||
positiveCard={{ items: ["Discovery & Research", "Strategic Planning", "Iterative Design", "Agile Development"] }}
|
||||
title="Our Strategic Process"
|
||||
description="A refined workflow to ensure project success."
|
||||
/>
|
||||
@@ -331,33 +143,14 @@ export default function LandingPage() {
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alice Johnson",
|
||||
role: "Creative Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-charismatic-sensual-male-black-sweater-with-wet_613910-11158.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mark Spencer",
|
||||
role: "Senior Developer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/enterprise-manager-analyzes-annual-reports-statistics-pc_482257-94061.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena Rodriguez",
|
||||
role: "UI/UX Lead",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teenager-light-movie-projector_23-2149489836.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David Kim",
|
||||
role: "Project Manager",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Alice Johnson", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/portrait-charismatic-sensual-male-black-sweater-with-wet_613910-11158.jpg" },
|
||||
{ id: "t2", name: "Mark Spencer", role: "Senior Developer", imageSrc: "http://img.b2bpic.net/free-photo/enterprise-manager-analyzes-annual-reports-statistics-pc_482257-94061.jpg" },
|
||||
{ id: "t3", name: "Elena Rodriguez", role: "UI/UX Lead", imageSrc: "http://img.b2bpic.net/free-photo/teenager-light-movie-projector_23-2149489836.jpg" },
|
||||
{ id: "t4", name: "David Kim", role: "Project Manager", imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg" }
|
||||
]}
|
||||
title="The Minds Behind The Work"
|
||||
description="Meet the creative team powering our agency's vision."
|
||||
@@ -369,21 +162,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq1",
|
||||
title: "How do you start a project?",
|
||||
content: "We begin with a discovery phase to align goals.",
|
||||
},
|
||||
{
|
||||
id: "faq2",
|
||||
title: "Do you work with startups?",
|
||||
content: "Absolutely, we specialize in high-growth startups.",
|
||||
},
|
||||
{
|
||||
id: "faq3",
|
||||
title: "What is the typical timeline?",
|
||||
content: "Most projects are completed within 8-12 weeks.",
|
||||
},
|
||||
{ id: "faq1", title: "How do you start a project?", content: "We begin with a discovery phase to align goals." },
|
||||
{ id: "faq2", title: "Do you work with startups?", content: "Absolutely, we specialize in high-growth startups." },
|
||||
{ id: "faq3", title: "What is the typical timeline?", content: "Most projects are completed within 8-12 weeks." }
|
||||
]}
|
||||
title="Common Inquiries"
|
||||
description="Answers to frequently asked questions about our process and partnership."
|
||||
@@ -394,63 +175,20 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Let's Collaborate"
|
||||
title="Ready to bring your ideas to life?"
|
||||
description="Get in touch today to discuss your next digital product or design challenge."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Contact Us", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "UI Design",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Development",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Services", items: [{ label: "UI Design", href: "#" }, { label: "Development", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user