Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 3760880d5c | |||
| d365a14a3e | |||
| d074740392 | |||
| 231630918c | |||
| 7c530ddb13 | |||
| a1adb91942 | |||
| d041499279 | |||
| b330bfbbcc |
400
src/app/page.tsx
400
src/app/page.tsx
@@ -2,316 +2,120 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import { Coffee, Briefcase, Zap, Mail, MessageSquare } from "lucide-react";
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "#portfolio",
|
||||
},
|
||||
{
|
||||
name: "Process",
|
||||
id: "#how-it-works",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Agency X"
|
||||
button={{
|
||||
text: "Get Preview",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<NavbarStyleApple
|
||||
brandName="Agency"
|
||||
navItems={[
|
||||
{ name: "Portfolio", id: "#portfolio" },
|
||||
{ name: "Benefits", id: "#benefits" },
|
||||
{ name: "Process", id: "#how-it-works" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Websites That Convert, Not Just Look Good."
|
||||
description="We build premium, high-converting digital storefronts tailored for your local business. Get more clients with a site that works as hard as you do."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Your Free Preview",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-seller-car-dealership_23-2149106140.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/minimalist-office-interior-design_23-2151826279.jpg",
|
||||
alt: "Minimalist office interior design",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797750.jpg",
|
||||
alt: "Modern office space with futuristic decor and furniture",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/modern-minimalist-office-black-white_23-2151777551.jpg",
|
||||
alt: "Modern and minimalist office in black and white",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797676.jpg",
|
||||
alt: "Modern office space with futuristic decor and furniture",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/futuristic-kitchen-interior-design_23-2151821346.jpg",
|
||||
alt: "Futuristic kitchen interior design",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 50+ local leaders"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "SEO Optimized",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Mobile Responsive",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Fast Loading",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Conversion Focused",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modern Design",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero">
|
||||
<HeroBillboard
|
||||
title="Modern Websites for Local Growth"
|
||||
description="We craft professional, high-performance websites that build credibility and drive customers to your business. Clean, fast, and results-focused."
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[{ text: "Get Started", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797750.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "The Modern Café",
|
||||
price: "View Demo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-man-s-hands-keyboard-open-generic-laptop-male-student-studying-online-his-notebook-computer_273609-1402.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Elite Fashion Co.",
|
||||
price: "View Demo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-autumnal-leaf-with-copy-space_23-2148647659.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Success Business LLC",
|
||||
price: "View Demo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-assets-business-management-system-concept_53876-133814.jpg",
|
||||
},
|
||||
]}
|
||||
title="Website Previews"
|
||||
description="Real examples of modern design."
|
||||
/>
|
||||
</div>
|
||||
<div id="portfolio">
|
||||
<ProductCardThree
|
||||
title="Recent Work"
|
||||
description="Designed to stand out in the local market."
|
||||
gridVariant="one-large-left-three-stacked-right"
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "City Café", price: "Custom Web", imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-man-s-hands-keyboard-open-generic-laptop-male-student-studying-online-his-notebook-computer_273609-1402.jpg" },
|
||||
{ id: "p2", name: "Fashion Brand", price: "E-commerce", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-autumnal-leaf-with-copy-space_23-2148647659.jpg" },
|
||||
{ id: "p3", name: "Business Consulting", price: "Lead Gen", imageSrc: "http://img.b2bpic.net/free-photo/digital-assets-business-management-system-concept_53876-133814.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="benefits" data-section="benefits">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Get More Clients",
|
||||
description: "High-converting designs engineered to drive leads.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/nobody-architectural-office-with-building-model-maquette-design-property-real-estate-empty-space-plan-construction-layout-structure-with-blueprints-urban-sketch_482257-38861.jpg",
|
||||
},
|
||||
{
|
||||
title: "Professional Image",
|
||||
description: "Look like an industry leader with custom design.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-technology-communication-caucasian-student-using-laptop-computer-texting-friends-online-via-social-media_273609-1407.jpg",
|
||||
},
|
||||
{
|
||||
title: "Build Trust",
|
||||
description: "Clean, credible sites that earn client confidence.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-single-s-day-banner_23-2149520230.jpg",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Us?"
|
||||
description="We turn visitors into loyal customers."
|
||||
/>
|
||||
</div>
|
||||
<div id="benefits">
|
||||
<FeatureBento
|
||||
title="Built for Success"
|
||||
description="We focus on the metrics that matter for your bottom line."
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "High Conversion", description: "Optimized layouts to capture more leads.", bentoComponent: 'reveal-icon', icon: Zap },
|
||||
{ title: "Industry Trust", description: "Modern design that makes you look the part.", bentoComponent: 'reveal-icon', icon: Briefcase },
|
||||
{ title: "Customer Growth", description: "Reaching your community with impact.", bentoComponent: 'reveal-icon', icon: Coffee }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "01",
|
||||
title: "We Create Preview",
|
||||
description: "You get a custom look.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/small-business-strategy-marketing-enterprise-concept_53876-133756.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "02",
|
||||
title: "You Approve",
|
||||
description: "We finalize every detail.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345398.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "03",
|
||||
title: "We Launch",
|
||||
description: "Your site goes live.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businesspeople-office-financial-investments-looking-chroma-key-laptop_482257-120503.jpg",
|
||||
},
|
||||
]}
|
||||
title="Simple 3-Step Process"
|
||||
description="Getting your new site is effortless."
|
||||
/>
|
||||
</div>
|
||||
<div id="how-it-works">
|
||||
<MetricCardThree
|
||||
title="Our 3-Step Process"
|
||||
description="Seamless delivery, every single time."
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Coffee, title: "Discovery", value: "Step 01" },
|
||||
{ id: "m2", icon: Zap, title: "Design", value: "Step 02" },
|
||||
{ id: "m3", icon: Briefcase, title: "Launch", value: "Step 03" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Café Bistro",
|
||||
"Urban Style",
|
||||
"Elite Fitness",
|
||||
"Bloom Florist",
|
||||
"Fresh Market",
|
||||
"Local Tech",
|
||||
"Studio Art",
|
||||
]}
|
||||
title="Trusted by Local Heroes"
|
||||
description="We power growing businesses in our community."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact">
|
||||
<ContactCTA
|
||||
title="Ready to Build?"
|
||||
description="Reach out to us via email at contact@agency.com or start a conversation instantly via WhatsApp."
|
||||
tag="Get In Touch"
|
||||
buttons={[
|
||||
{ text: "Email Us", href: "mailto:contact@agency.com" },
|
||||
{ text: "Chat on WhatsApp", href: "https://api.whatsapp.com/send/?phone=50488601068&text&type=phone_number&app_absent=0" }
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How fast can we launch?",
|
||||
content: "Usually within 2-4 weeks.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you manage everything?",
|
||||
content: "Yes, we handle hosting and maintenance.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Can I edit the site?",
|
||||
content: "Yes, we provide easy access.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780717.jpg"
|
||||
title="Common Questions"
|
||||
description="Everything you need to know."
|
||||
mediaAnimation="slide-up"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Start Your Project"
|
||||
description="Email: jc8016.martinez@gmail.com | Need help? Chat via WhatsApp."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email Address",
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your business goals",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/wooden-workspace-design_1048-1772.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Agency",
|
||||
items: [
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#portfolio",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Email",
|
||||
href: "mailto:jc8016.martinez@gmail.com",
|
||||
},
|
||||
{
|
||||
label: "WhatsApp",
|
||||
href: "https://wa.me/15551234567",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Digital Agency X"
|
||||
bottomRightText="All rights reserved"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<FooterBase
|
||||
logoText="Agency"
|
||||
columns={[
|
||||
{ title: "Agency", items: [{ label: "Home", href: "#" }, { label: "Portfolio", href: "#portfolio" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "WhatsApp", href: "https://api.whatsapp.com/send/?phone=50488601068&text&type=phone_number&app_absent=0" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f4ef;
|
||||
--card: #dad6cd;
|
||||
--foreground: #2a2928;
|
||||
--primary-cta: #2a2928;
|
||||
--background: #ffffff;
|
||||
--card: #f5f5f5;
|
||||
--foreground: #1a1a1a;
|
||||
--primary-cta: #1a1a1a;
|
||||
--primary-cta-text: #f5f4ef;
|
||||
--secondary-cta: #ecebea;
|
||||
--secondary-cta: #f5f5f5;
|
||||
--secondary-cta-text: #2a2928;
|
||||
--accent: #ffffff;
|
||||
--background-accent: #c6b180;
|
||||
--accent: #8a8a8a;
|
||||
--background-accent: #e8e6e1;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user