Merge version_2 into main #2
338
src/app/page.tsx
338
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, CheckCircle, Shield, TrendingUp } from "lucide-react";
|
||||
import { Award, CheckCircle, Shield, TrendingUp, Search, Code, Rocket } 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: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "#team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Team", id: "#team" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="ApexStudio"
|
||||
/>
|
||||
@@ -56,118 +44,26 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Crafting Digital Experiences."
|
||||
description="We are a full-service web design agency specializing in high-performance digital products and immersive user experiences for innovative brands."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hacker-hood-bringing-laptop-with-code_482257-78425.jpg?_wi=1",
|
||||
imageAlt: "Hero scene 1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-ai-tech-agency-workspace-providing-custom-software-development-services_482257-120228.jpg?_wi=1",
|
||||
imageAlt: "Hero scene 2",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-digital-particle-waves-design-background_1048-12573.jpg?_wi=1",
|
||||
imageAlt: "Hero scene 3",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-asian-girl-blue-shirt-holding-tablet-showing-presentation-partners-who-looking-screen-with-cheerful-expression_273609-6189.jpg?_wi=1",
|
||||
imageAlt: "Hero scene 4",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg?_wi=1",
|
||||
imageAlt: "Hero scene 5",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/5g-connection-technology-background-with-man-using-futuristic-virtual-screen-digital-remix_53876-108511.jpg?_wi=1",
|
||||
imageAlt: "Hero scene 6",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/hacker-hood-bringing-laptop-with-code_482257-78425.jpg", imageAlt: "Hero scene 1" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-ai-tech-agency-workspace-providing-custom-software-development-services_482257-120228.jpg", imageAlt: "Hero scene 2" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-digital-particle-waves-design-background_1048-12573.jpg", imageAlt: "Hero scene 3" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cute-asian-girl-blue-shirt-holding-tablet-showing-presentation-partners-who-looking-screen-with-cheerful-expression_273609-6189.jpg", imageAlt: "Hero scene 4" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg", imageAlt: "Hero scene 5" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/5g-connection-technology-background-with-man-using-futuristic-virtual-screen-digital-remix_53876-108511.jpg", imageAlt: "Hero scene 6" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-digital-particle-waves-design-background_1048-12573.jpg?_wi=2",
|
||||
imageAlt: "Hero scene 3",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-asian-girl-blue-shirt-holding-tablet-showing-presentation-partners-who-looking-screen-with-cheerful-expression_273609-6189.jpg?_wi=2",
|
||||
imageAlt: "Hero scene 4",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg?_wi=2",
|
||||
imageAlt: "Hero scene 5",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/5g-connection-technology-background-with-man-using-futuristic-virtual-screen-digital-remix_53876-108511.jpg?_wi=2",
|
||||
imageAlt: "Hero scene 6",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hacker-hood-bringing-laptop-with-code_482257-78425.jpg?_wi=2",
|
||||
imageAlt: "Hero scene 1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-ai-tech-agency-workspace-providing-custom-software-development-services_482257-120228.jpg?_wi=2",
|
||||
imageAlt: "Hero scene 2",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Project",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hacker-hood-bringing-laptop-with-code_482257-78425.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/empty-ai-tech-agency-workspace-providing-custom-software-development-services_482257-120228.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-abstract-digital-particle-waves-design-background_1048-12573.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cute-asian-girl-blue-shirt-holding-tablet-showing-presentation-partners-who-looking-screen-with-cheerful-expression_273609-6189.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/hacker-hood-bringing-laptop-with-code_482257-78425.jpg",
|
||||
alt: "Logo 1",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/empty-ai-tech-agency-workspace-providing-custom-software-development-services_482257-120228.jpg",
|
||||
alt: "Logo 2",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/3d-abstract-digital-particle-waves-design-background_1048-12573.jpg",
|
||||
alt: "Logo 3",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/cute-asian-girl-blue-shirt-holding-tablet-showing-presentation-partners-who-looking-screen-with-cheerful-expression_273609-6189.jpg",
|
||||
alt: "Logo 4",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",
|
||||
alt: "Logo 5",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-digital-particle-waves-design-background_1048-12573.jpg", imageAlt: "Hero scene 3" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cute-asian-girl-blue-shirt-holding-tablet-showing-presentation-partners-who-looking-screen-with-cheerful-expression_273609-6189.jpg", imageAlt: "Hero scene 4" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg", imageAlt: "Hero scene 5" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/5g-connection-technology-background-with-man-using-futuristic-virtual-screen-digital-remix_53876-108511.jpg", imageAlt: "Hero scene 6" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/hacker-hood-bringing-laptop-with-code_482257-78425.jpg", imageAlt: "Hero scene 1" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-ai-tech-agency-workspace-providing-custom-software-development-services_482257-120228.jpg", imageAlt: "Hero scene 2" },
|
||||
]}
|
||||
buttons={[{ text: "Start Project", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -177,28 +73,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Web Design",
|
||||
description: "Custom high-converting websites.",
|
||||
bentoComponent: "globe",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hacker-hood-bringing-laptop-with-code_482257-78425.jpg?_wi=3",
|
||||
imageAlt: "tech agency hero",
|
||||
},
|
||||
{
|
||||
title: "Analytics",
|
||||
description: "Real-time performance metrics.",
|
||||
bentoComponent: "line-chart",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-ai-tech-agency-workspace-providing-custom-software-development-services_482257-120228.jpg?_wi=3",
|
||||
imageAlt: "web design agency interior",
|
||||
},
|
||||
{
|
||||
title: "Consulting",
|
||||
description: "Strategic digital growth.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Shield,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-digital-particle-waves-design-background_1048-12573.jpg?_wi=3",
|
||||
imageAlt: "futuristic dashboard",
|
||||
},
|
||||
{ title: "Web Design", description: "Custom high-converting websites.", bentoComponent: "globe" },
|
||||
{ title: "Analytics", description: "Real-time performance metrics.", bentoComponent: "line-chart" },
|
||||
{ title: "Consulting", description: "Strategic digital growth.", bentoComponent: "reveal-icon", icon: Shield },
|
||||
]}
|
||||
title="Services we provide"
|
||||
description="Our expertise spans across design, development, and digital strategy to help you scale your business."
|
||||
@@ -210,27 +87,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Research",
|
||||
description: "Deep discovery and market research.",
|
||||
buttonIcon: "Search",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-asian-girl-blue-shirt-holding-tablet-showing-presentation-partners-who-looking-screen-with-cheerful-expression_273609-6189.jpg?_wi=3",
|
||||
imageAlt: "tech team collaboration",
|
||||
},
|
||||
{
|
||||
title: "Development",
|
||||
description: "Agile and iterative builds.",
|
||||
buttonIcon: "Code",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg?_wi=3",
|
||||
imageAlt: "ux ui prototype",
|
||||
},
|
||||
{
|
||||
title: "Launch",
|
||||
description: "Deployment and maintenance.",
|
||||
buttonIcon: "Rocket",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/5g-connection-technology-background-with-man-using-futuristic-virtual-screen-digital-remix_53876-108511.jpg?_wi=3",
|
||||
imageAlt: "digital innovation concept",
|
||||
},
|
||||
{ title: "Research", description: "Deep discovery and market research.", buttonIcon: Search },
|
||||
{ title: "Development", description: "Agile and iterative builds.", buttonIcon: Code },
|
||||
{ title: "Launch", description: "Deployment and maintenance.", buttonIcon: Rocket },
|
||||
]}
|
||||
title="Our Proven Workflow"
|
||||
description="A streamlined process designed to deliver exceptional results with transparency and efficiency."
|
||||
@@ -244,26 +103,11 @@ export default function LandingPage() {
|
||||
rating={5}
|
||||
author="Sarah Miller, CEO"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-happy-woman_23-2148778279.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/professional-studio-setup-ai-generated-content-photography-editing_482257-126882.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-woman-working-digital-tablet-office_329181-12063.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/5g-connection-technology-background-with-man-using-futuristic-virtual-screen-digital-remix_53876-108511.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-beautiful-happy-woman_23-2148778279.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/professional-studio-setup-ai-generated-content-photography-editing_482257-126882.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-woman-working-digital-tablet-office_329181-12063.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/5g-connection-technology-background-with-man-using-futuristic-virtual-screen-digital-remix_53876-108511.jpg", alt: "Client 5" },
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="slide-up"
|
||||
@@ -277,27 +121,9 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "150+",
|
||||
title: "Projects",
|
||||
description: "Completed globally.",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "99%",
|
||||
title: "Satisfaction",
|
||||
description: "Client retention rate.",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "2x",
|
||||
title: "Growth",
|
||||
description: "Avg. boost for clients.",
|
||||
icon: TrendingUp,
|
||||
},
|
||||
{ id: "m1", value: "150+", title: "Projects", description: "Completed globally.", icon: CheckCircle },
|
||||
{ id: "m2", value: "99%", title: "Satisfaction", description: "Client retention rate.", icon: Award },
|
||||
{ id: "m3", value: "2x", title: "Growth", description: "Avg. boost for clients.", icon: TrendingUp },
|
||||
]}
|
||||
title="Built for Impact"
|
||||
description="Numbers speak for our work and the value we bring to our clients."
|
||||
@@ -309,20 +135,8 @@ export default function LandingPage() {
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Slow deployment",
|
||||
"Overpriced services",
|
||||
"Outdated tech",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Agile delivery",
|
||||
"Transparent pricing",
|
||||
"Modern stacks",
|
||||
],
|
||||
}}
|
||||
negativeCard={{ items: ["Slow deployment", "Overpriced services", "Outdated tech"] }}
|
||||
positiveCard={{ items: ["Agile delivery", "Transparent pricing", "Modern stacks"] }}
|
||||
title="Why Choose Us"
|
||||
description="We offer a distinct approach that balances speed, quality, and scalability."
|
||||
/>
|
||||
@@ -334,24 +148,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
team={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "James Bond",
|
||||
role: "Architect",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-happy-woman_23-2148778279.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Maya Smith",
|
||||
role: "Lead Designer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-studio-setup-ai-generated-content-photography-editing_482257-126882.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "John Doe",
|
||||
role: "Strategist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-working-digital-tablet-office_329181-12063.jpg",
|
||||
},
|
||||
{ id: "t1", name: "James Bond", role: "Architect", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-happy-woman_23-2148778279.jpg" },
|
||||
{ id: "t2", name: "Maya Smith", role: "Lead Designer", imageSrc: "http://img.b2bpic.net/free-photo/professional-studio-setup-ai-generated-content-photography-editing_482257-126882.jpg" },
|
||||
{ id: "t3", name: "John Doe", role: "Strategist", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-working-digital-tablet-office_329181-12063.jpg" },
|
||||
]}
|
||||
title="Meet the Team"
|
||||
description="Digital experts passionate about pushing the boundaries of what is possible."
|
||||
@@ -363,21 +162,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Timeline?",
|
||||
content: "Typically 6-8 weeks.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Payment?",
|
||||
content: "Milestone-based billing.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Support?",
|
||||
content: "Comprehensive maintenance plans.",
|
||||
},
|
||||
{ id: "f1", title: "Timeline?", content: "Typically 6-8 weeks." },
|
||||
{ id: "f2", title: "Payment?", content: "Milestone-based billing." },
|
||||
{ id: "f3", title: "Support?", content: "Comprehensive maintenance plans." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Get clear answers about our process, timelines, and how we collaborate."
|
||||
@@ -388,50 +175,19 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Get in touch"
|
||||
title="Ready to launch?"
|
||||
description="Let's collaborate on your next digital challenge."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Contact Us", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Studio",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Studio", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
logoText="ApexStudio"
|
||||
/>
|
||||
@@ -439,4 +195,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user