230 lines
11 KiB
TypeScript
230 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
|
import { Gauge, Monitor, Sparkles, TrendingUp, Zap, CheckCircle } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLarge"
|
|
background="none"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "home"},
|
|
{
|
|
name: "About", id: "about"},
|
|
{
|
|
name: "Work", id: "work"},
|
|
{
|
|
name: "How It Works", id: "how-it-works"},
|
|
{
|
|
name: "Clients", id: "clients"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName=""
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroSplitKpi
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
imagePosition="right"
|
|
title="WHEN PEOPLE GOOGLE YOUR SHOP, WHAT DO THEY FIND?"
|
|
description="I DESIGN AND BUILD HIGH-CONVERTING WEBSITES AND DIGITAL PRODUCTS THAT DRIVE RESULTS. LET'S CREATE SOMETHING IMPACTFUL TOGETHER. YOU CAN REACH ME DIRECTLY AT IBKHEN99@GMAIL.COM."
|
|
enableKpiAnimation={true}
|
|
kpis={[
|
|
{ value: "95%", label: "Improved Search Rankings" },
|
|
{ value: "3X", label: "Conversion Rate Increase" },
|
|
{ value: "50+", label: "Happy Clients" }
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvEZbugZJMMJKmRQ7QXba2nKnk/tmp/can-you-generate-a-picture-of-a-pc-setup-1781137469840-24fc73da.jpg"
|
|
imageAlt="Professional headshot of a web designer"
|
|
mediaAnimation="slide-up"
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon", text: "Innovation", icon: Sparkles
|
|
},
|
|
{
|
|
type: "text-icon", text: "Efficiency", icon: Gauge
|
|
},
|
|
{
|
|
type: "text-icon", text: "User Experience", icon: Monitor
|
|
},
|
|
{
|
|
type: "text-icon", text: "Scalability", icon: TrendingUp
|
|
},
|
|
{
|
|
type: "text-icon", text: "Performance", icon: Zap
|
|
},
|
|
]}
|
|
marqueeSpeed={40}
|
|
showMarqueeCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
useInvertedBackground={true}
|
|
imagePosition="right"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvEZbugZJMMJKmRQ7QXba2nKnk/uploaded-1781143312703-guy0l1k6.png"
|
|
imageAlt="Headshot of Ibrahim, a local web designer"
|
|
mediaAnimation="slide-up"
|
|
title="WHY A LOCAL GUY AND NOT SOME COMPANY?"
|
|
description="CHOOSING A LOCAL GUY LIKE ME OVER A BIG COMPANY MEANS YOU GET DEDICATED, PERSONALIZED ATTENTION FROM SOMEONE DEEPLY INVESTED IN YOUR BUSINESS'S SUCCESS. I BRING YEARS OF EXPERIENCE TO TRANSFORM COMPLEX IDEAS INTO INTUITIVE, HIGH-CONVERTING DIGITAL SOLUTIONS, OFFERING STRATEGIC THINKING AND METICULOUS EXECUTION WITHOUT THE OVERHEADS OR IMPERSONAL SERVICE OF A LARGE AGENCY."
|
|
buttons={[]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
bulletPoints={[
|
|
{ title: "Personalized Service", description: "Dedicated, one-on-one attention ensures your vision is perfectly realized.", icon: CheckCircle },
|
|
{ title: "Proven Expertise", description: "Years of experience delivering high-converting, intuitive digital solutions.", icon: CheckCircle },
|
|
{ title: "Cost-Effective", description: "Achieve premium results without the hefty overhead of large agencies.", icon: CheckCircle }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
|
|
<div id="work" data-section="work">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="two-columns-alternating-heights"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "p1", brand: "", name: "Automotive Project ", price: "", rating: 5,
|
|
reviewCount: "25", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvEZbugZJMMJKmRQ7QXba2nKnk/uploaded-1781134678368-5c2qrpas.png", imageAlt: "AI SaaS Platform Dashboard"},
|
|
{
|
|
id: "p2", brand: "", name: "Automotive Project ", price: "", rating: 5,
|
|
reviewCount: "18", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvEZbugZJMMJKmRQ7QXba2nKnk/uploaded-1781134469186-xp7xy5lm.png", imageAlt: "Corporate Website Homepage"},
|
|
{
|
|
id: "p3", brand: "", name: "Autobody project ", price: "", rating: 4,
|
|
reviewCount: "30", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvEZbugZJMMJKmRQ7QXba2nKnk/uploaded-1781134490666-z1gftx3q.png", imageAlt: "Online Course Platform UI"},
|
|
{
|
|
id: "p4", brand: "", name: "Autobody Project ", price: "", rating: 5,
|
|
reviewCount: "12", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvEZbugZJMMJKmRQ7QXba2nKnk/uploaded-1781134511954-f922btm0.png", imageAlt: "Modern Blog Interface"},
|
|
{
|
|
id: "p5", brand: "", name: "Roofing Project ", price: "", rating: 4,
|
|
reviewCount: "22", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvEZbugZJMMJKmRQ7QXba2nKnk/uploaded-1781134662725-kuyphl0l.png", imageAlt: "Real Estate Listing Website"},
|
|
{
|
|
id: "p6", brand: "", name: "Roofing Project ", price: "", rating: 5,
|
|
reviewCount: "15", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvEZbugZJMMJKmRQ7QXba2nKnk/uploaded-1781134689001-yl8r30sw.png", imageAlt: "Restaurant Online Ordering"},
|
|
]}
|
|
title="SHOWCASING MY WEB PROJECTS"
|
|
description="EXPLORE A SELECTION OF HIGH-PERFORMING WEBSITES I'VE DESIGNED AND DEVELOPED FOR CLIENTS ACROSS VARIOUS INDUSTRIES."
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
<FeatureCardTwelve
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
title="How It Works"
|
|
description="MY SIMPLE, TRANSPARENT PROCESS TO GET YOUR SHOP FOUND ONLINE, FROM INITIAL LOOK TO ONGOING SUCCESS."
|
|
features={[
|
|
{
|
|
id: "step1", label: "Step 1", title: "Look First", items: ["I conduct a thorough analysis of your current online presence and business goals to identify opportunities."]
|
|
},
|
|
{
|
|
id: "step2", label: "Step 2", title: "$50 and It's Live", items: ["A streamlined setup process gets a foundational, high-quality online presence up and running quickly for a minimal initial investment."]
|
|
},
|
|
{
|
|
id: "step3", label: "Step 3", title: "$75/Month, Never Think About It", items: ["Enjoy ongoing maintenance, updates, and optimization without any hassle, ensuring your site always performs at its best."]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
|
|
<div id="clients" data-section="clients">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"Global Innovations", "Digital Dynamics", "Apex Solutions", "Creative Edge Studio", "FutureScape Tech", "Catalyst Brands", "Streamline Services"]}
|
|
title="Trusted by Diverse Industries"
|
|
description="MY COMMITMENT TO EXCELLENCE HAS EARNED THE TRUST OF CLIENTS RANGING FROM STARTUPS TO ESTABLISHED ENTERPRISES."
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Let's Collaborate"
|
|
title="Ready to Start Your Next Project?"
|
|
description="WHETHER YOU HAVE A SPECIFIC VISION OR NEED HELP DEFINING YOUR DIGITAL STRATEGY, I'M HERE TO HELP. REACH OUT AND LET'S DISCUSS HOW I CAN ELEVATE YOUR ONLINE PRESENCE. YOU CAN ALSO EMAIL ME DIRECTLY AT IBKHEN99@GMAIL.COM."
|
|
imageSrc="http://img.b2bpic.net/free-photo/woman-using-smartphone-text-with-chat-bubbles_23-2151989429.jpg"
|
|
imageAlt="Person working at a desk"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Send Message"
|
|
termsText="By sending a message, you're confirming that you agree with my privacy policy."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Web Design", href: "#work"},
|
|
{
|
|
label: "Development", href: "#work"},
|
|
{
|
|
label: "UI/UX Strategy", href: "#about"},
|
|
{
|
|
label: "Consulting", href: "#contact"},
|
|
{
|
|
label: "How It Works", href: "#how-it-works"},
|
|
{
|
|
label: "Email: ibkhen99@gmail.com", href: "mailto:ibkhen99@gmail.com"}
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Me", href: "#about"},
|
|
{
|
|
label: "Portfolio", href: "#work"},
|
|
{
|
|
label: "Contact", href: "#contact"}
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2024 Ibrahim. All rights reserved."
|
|
bottomRightText="Built with Webild."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |