bender/077d2bd7-7a28-4071-8d3d-a82637ded47c
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_1
Branches Tags
bender:main bender:version_4 bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_2
Branches Tags
bender:main bender:version_4 bender:version_3 bender:version_2 bender:version_1

2 Commits
version_1 ... version_2

Author SHA1 Message Date
bender
d041499279 Update src/app/styles/variables.css 2026-04-30 20:44:04 +00:00
bender
b330bfbbcc Update src/app/page.tsx 2026-04-30 20:44:04 +00:00
2 changed files with 109 additions and 305 deletions
Expand all files Collapse all files

400
src/app/page.tsx
View File

@@ -2,316 +2,120 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm'; import { Coffee, Briefcase, Zap, Mail, MessageSquare } from "lucide-react";
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia'; import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven'; import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FooterSimple from '@/components/sections/footer/FooterSimple'; import FeatureBento from '@/components/sections/feature/FeatureBento';
import HeroSplit from '@/components/sections/hero/HeroSplit'; import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven'; import ContactCTA from '@/components/sections/contact/ContactCTA';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne'; import FooterBase from '@/components/sections/footer/FooterBase';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
export default function LandingPage() { export default function LandingPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="shift-hover" defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur" defaultTextAnimation="reveal-blur"
borderRadius="pill" borderRadius="soft"
contentWidth="mediumSmall" contentWidth="medium"
sizing="mediumSizeLargeTitles" sizing="medium"
background="circleGradient" background="none"
cardStyle="glass-depth" cardStyle="solid"
primaryButtonStyle="flat" primaryButtonStyle="flat"
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
headingFontWeight="bold" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <NavbarStyleApple
<NavbarLayoutFloatingOverlay brandName="Agency"
navItems={[ navItems={[
{ { name: "Portfolio", id: "#portfolio" },
name: "Portfolio", { name: "Benefits", id: "#benefits" },
id: "#portfolio", { name: "Process", id: "#how-it-works" },
}, { name: "Contact", id: "#contact" }
{ ]}
name: "Process", />
id: "#how-it-works",
},
{
name: "Contact",
id: "#contact",
},
]}
brandName="Agency X"
button={{
text: "Get Preview",
href: "#contact",
}}
/>
</div>
<div id="hero" data-section="hero"> <div id="hero">
<HeroSplit <HeroBillboard
background={{ title="Modern Websites for Local Growth"
variant: "plain", description="We craft professional, high-performance websites that build credibility and drive customers to your business. Clean, fast, and results-focused."
}} background={{ variant: "plain" }}
title="Websites That Convert, Not Just Look Good." buttons={[{ text: "Get Started", href: "#contact" }]}
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." imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797750.jpg"
buttons={[ />
{ </div>
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="portfolio" data-section="portfolio"> <div id="portfolio">
<ProductCardOne <ProductCardThree
animationType="slide-up" title="Recent Work"
textboxLayout="split-description" description="Designed to stand out in the local market."
gridVariant="three-columns-all-equal-width" gridVariant="one-large-left-three-stacked-right"
useInvertedBackground={false} animationType="slide-up"
products={[ textboxLayout="split"
{ useInvertedBackground={false}
id: "1", products={[
name: "The Modern Café", { 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" },
price: "View Demo", { 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" },
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: "p3", name: "Business Consulting", price: "Lead Gen", imageSrc: "http://img.b2bpic.net/free-photo/digital-assets-business-management-system-concept_53876-133814.jpg" }
}, ]}
{ />
id: "2", </div>
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="benefits" data-section="benefits"> <div id="benefits">
<FeatureCardSeven <FeatureBento
animationType="slide-up" title="Built for Success"
textboxLayout="split" description="We focus on the metrics that matter for your bottom line."
useInvertedBackground={false} animationType="slide-up"
features={[ textboxLayout="split"
{ useInvertedBackground={false}
title: "Get More Clients", features={[
description: "High-converting designs engineered to drive leads.", { title: "High Conversion", description: "Optimized layouts to capture more leads.", bentoComponent: 'reveal-icon', icon: Zap },
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: "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 }
{ ]}
title: "Professional Image", />
description: "Look like an industry leader with custom design.", </div>
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="how-it-works" data-section="how-it-works"> <div id="how-it-works">
<MetricCardEleven <MetricCardThree
animationType="slide-up" title="Our 3-Step Process"
textboxLayout="default" description="Seamless delivery, every single time."
useInvertedBackground={false} animationType="slide-up"
metrics={[ textboxLayout="split"
{ useInvertedBackground={false}
id: "m1", metrics={[
value: "01", { id: "m1", icon: Coffee, title: "Discovery", value: "Step 01" },
title: "We Create Preview", { id: "m2", icon: Zap, title: "Design", value: "Step 02" },
description: "You get a custom look.", { id: "m3", icon: Briefcase, title: "Launch", value: "Step 03" }
imageSrc: "http://img.b2bpic.net/free-photo/small-business-strategy-marketing-enterprise-concept_53876-133756.jpg", ]}
}, />
{ </div>
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="social-proof" data-section="social-proof"> <div id="contact">
<SocialProofOne <ContactCTA
textboxLayout="default" title="Ready to Build?"
useInvertedBackground={false} description="Reach out to us via email at contact@agency.com or start a conversation instantly via WhatsApp."
names={[ tag="Get In Touch"
"Café Bistro", buttons={[
"Urban Style", { text: "Email Us", href: "mailto:contact@agency.com" },
"Elite Fitness", { text: "Chat on WhatsApp", href: "https://wa.me/15551234567" }
"Bloom Florist", ]}
"Fresh Market", background={{ variant: "plain" }}
"Local Tech", useInvertedBackground={true}
"Studio Art", />
]} </div>
title="Trusted by Local Heroes"
description="We power growing businesses in our community."
/>
</div>
<div id="faq" data-section="faq"> <div id="footer">
<FaqSplitMedia <FooterBase
textboxLayout="split" logoText="Agency"
useInvertedBackground={false} columns={[
faqs={[ { title: "Agency", items: [{ label: "Home", href: "#" }, { label: "Portfolio", href: "#portfolio" }] },
{ { title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "WhatsApp", href: "https://wa.me/15551234567" }] }
id: "f1", ]}
title: "How fast can we launch?", />
content: "Usually within 2-4 weeks.", </div>
},
{
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>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff; --accent: #ffffff;
--background-accent: #ffffff; */ --background-accent: #ffffff; */
--background: #f5f4ef; --background: #ffffff;
--card: #dad6cd; --card: #f5f5f5;
--foreground: #2a2928; --foreground: #1a1a1a;
--primary-cta: #2a2928; --primary-cta: #1a1a1a;
--primary-cta-text: #f5f4ef; --primary-cta-text: #f5f4ef;
--secondary-cta: #ecebea; --secondary-cta: #f5f5f5;
--secondary-cta-text: #2a2928; --secondary-cta-text: #2a2928;
--accent: #ffffff; --accent: #8a8a8a;
--background-accent: #c6b180; --background-accent: #e8e6e1;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);