Merge version_1 into main #1
508
src/app/page.tsx
508
src/app/page.tsx
@@ -16,371 +16,171 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "portfolio",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Jozi Creative"
|
||||
button={{
|
||||
text: "Get a Quote",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Jozi Creative"
|
||||
button={{ text: "Get a Quote", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Creative Solutions from Johannesburg"
|
||||
description="Professional graphic design, web design, and HTML email development services to elevate your digital presence."
|
||||
kpis={[
|
||||
{
|
||||
value: "100+",
|
||||
label: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "50+",
|
||||
label: "Happy Clients",
|
||||
},
|
||||
{
|
||||
value: "5+",
|
||||
label: "Years Experience",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/neat-tidy-workspace-with-laptop_23-2148592306.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164865.jpg",
|
||||
alt: "Still life of office desk mess",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/keyboard-near-tablet-cup-smartphone-plant-monitor-cooling-fan_23-2148036906.jpg",
|
||||
alt: "Keyboard near tablet",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/office-desk-with-computer-digital-tablet-mobile-phone_1252-898.jpg",
|
||||
alt: "Office desk setup",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/empty-interior-with-chess-board-game-chips-table-space-prepared-fun-get-together-with-friends-no-people-living-room-decorated-with-leisure-activity-games-enjoy-gathering_482257-43520.jpg",
|
||||
alt: "Leisure activity",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hand-holding-mobile-smartphone-touchscreen-technology-business-concept-3d-cartoon-illustration_56104-1709.jpg",
|
||||
alt: "Technology illustration",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by teams"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Graphic Design",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Web Development",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Email Marketing",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Brand Identity",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Digital Strategy",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "plain" }}
|
||||
title="Creative Solutions from Johannesburg"
|
||||
description="Professional graphic design, web design, and HTML email development services to elevate your digital presence."
|
||||
kpis={[
|
||||
{ value: "100+", label: "Projects Completed" },
|
||||
{ value: "50+", label: "Happy Clients" },
|
||||
{ value: "5+", label: "Years Experience" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/neat-tidy-workspace-with-laptop_23-2148592306.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164865.jpg", alt: "Still life of office desk mess" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/keyboard-near-tablet-cup-smartphone-plant-monitor-cooling-fan_23-2148036906.jpg", alt: "Keyboard near tablet" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/office-desk-with-computer-digital-tablet-mobile-phone_1252-898.jpg", alt: "Office desk setup" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/empty-interior-with-chess-board-game-chips-table-space-prepared-fun-get-together-with-friends-no-people-living-room-decorated-with-leisure-activity-games-enjoy-gathering_482257-43520.jpg", alt: "Leisure activity" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/hand-holding-mobile-smartphone-touchscreen-technology-business-concept-3d-cartoon-illustration_56104-1709.jpg", alt: "Technology illustration" }
|
||||
]}
|
||||
avatarText="Trusted by teams"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Graphic Design" },
|
||||
{ type: "text", text: "Web Development" },
|
||||
{ type: "text", text: "Email Marketing" },
|
||||
{ type: "text", text: "Brand Identity" },
|
||||
{ type: "text", text: "Digital Strategy" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Elevating brands through ",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/pencil-right-side_187299-45687.jpg",
|
||||
alt: "Design icon",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " innovative digital craft.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{ type: "text", content: "Elevating brands through " },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/pencil-right-side_187299-45687.jpg", alt: "Design icon" },
|
||||
{ type: "text", content: " innovative digital craft." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Graphic Design",
|
||||
description: "Compelling brand identities, print media, and visual assets.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-assortment-supplies-one-color_23-2149669129.jpg",
|
||||
},
|
||||
{
|
||||
title: "Web Design",
|
||||
description: "User-centric, responsive websites that convert visitors into clients.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/keyboard-button-closeup-laptop-keyboard_169016-61245.jpg",
|
||||
},
|
||||
{
|
||||
title: "HTML Email Development",
|
||||
description: "Professional, cross-platform email templates that look great everywhere.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/email-messages-network-circuit-board-link-connection-technology_1379-885.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Expert Services"
|
||||
description="We specialize in high-end design services tailored for local and international businesses."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Graphic Design", description: "Compelling brand identities, print media, and visual assets.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-assortment-supplies-one-color_23-2149669129.jpg" },
|
||||
{ title: "Web Design", description: "User-centric, responsive websites that convert visitors into clients.", imageSrc: "http://img.b2bpic.net/free-photo/keyboard-button-closeup-laptop-keyboard_169016-61245.jpg" },
|
||||
{ title: "HTML Email Development", description: "Professional, cross-platform email templates that look great everywhere.", imageSrc: "http://img.b2bpic.net/free-photo/email-messages-network-circuit-board-link-connection-technology_1379-885.jpg" }
|
||||
]}
|
||||
title="Our Expert Services"
|
||||
description="We specialize in high-end design services tailored for local and international businesses."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Brand",
|
||||
name: "Corporate Identity",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-view-office-items-business-cards_23-2148500499.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Tech",
|
||||
name: "Mobile Web App",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "8",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-126263.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Marketing",
|
||||
name: "Email Campaign",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "15",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=69zvyt",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Brand",
|
||||
name: "Modern Packaging",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brain-booster-pills-container-still-life_23-2150760043.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "Web",
|
||||
name: "E-commerce Portal",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "20",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-look-clothing-kiosk-service_482257-89749.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "Marketing",
|
||||
name: "Promo Assets",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "9",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-exclusive-sale_23-2152027055.jpg",
|
||||
},
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="Explore our recent work and creative success stories."
|
||||
/>
|
||||
</div>
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", brand: "Brand", name: "Corporate Identity", price: "Featured", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/high-view-office-items-business-cards_23-2148500499.jpg" },
|
||||
{ id: "p2", brand: "Tech", name: "Mobile Web App", price: "Featured", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-126263.jpg" },
|
||||
{ id: "p3", brand: "Marketing", name: "Email Campaign", price: "Featured", rating: 5, reviewCount: "15", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=69zvyt" },
|
||||
{ id: "p4", brand: "Brand", name: "Modern Packaging", price: "Featured", rating: 5, reviewCount: "5", imageSrc: "http://img.b2bpic.net/free-photo/brain-booster-pills-container-still-life_23-2150760043.jpg" },
|
||||
{ id: "p5", brand: "Web", name: "E-commerce Portal", price: "Featured", rating: 5, reviewCount: "20", imageSrc: "http://img.b2bpic.net/free-photo/people-look-clothing-kiosk-service_482257-89749.jpg" },
|
||||
{ id: "p6", brand: "Marketing", name: "Promo Assets", price: "Featured", rating: 5, reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-exclusive-sale_23-2152027055.jpg" }
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="Explore our recent work and creative success stories."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Alpha Tech",
|
||||
"Jozi Retail",
|
||||
"Cape Digital",
|
||||
"Summit Finance",
|
||||
"Vista Agency",
|
||||
"Green Solutions",
|
||||
"Blue Horizon",
|
||||
]}
|
||||
title="Trusted by Growing Businesses"
|
||||
description="Collaborating with brands across South Africa to bring visions to life."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Alpha Tech", "Jozi Retail", "Cape Digital", "Summit Finance", "Vista Agency", "Green Solutions", "Blue Horizon"]}
|
||||
title="Trusted by Growing Businesses"
|
||||
description="Collaborating with brands across South Africa to bring visions to life."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
handle: "@sarah",
|
||||
testimonial: "Exceptional design quality, highly recommend!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mark D.",
|
||||
handle: "@mark",
|
||||
testimonial: "Transformed our brand identity completely.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-woman-looking-up-copy-space_1262-3088.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma R.",
|
||||
handle: "@emma",
|
||||
testimonial: "Professional and creative communication throughout.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586558.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David K.",
|
||||
handle: "@david",
|
||||
testimonial: "Top tier email development services.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586556.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Chloe L.",
|
||||
handle: "@chloe",
|
||||
testimonial: "Fast turnaround and high precision design work.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/joyful-man-white-tshirt-jacket-smiling-brown-background_197531-26657.jpg",
|
||||
},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Client Feedback"
|
||||
description="See what our clients say about our design work."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah J.", handle: "@sarah", testimonial: "Exceptional design quality, highly recommend!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg" },
|
||||
{ id: "2", name: "Mark D.", handle: "@mark", testimonial: "Transformed our brand identity completely.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-woman-looking-up-copy-space_1262-3088.jpg" },
|
||||
{ id: "3", name: "Emma R.", handle: "@emma", testimonial: "Professional and creative communication throughout.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586558.jpg" },
|
||||
{ id: "4", name: "David K.", handle: "@david", testimonial: "Top tier email development services.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586556.jpg" },
|
||||
{ id: "5", name: "Chloe L.", handle: "@chloe", testimonial: "Fast turnaround and high precision design work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/joyful-man-white-tshirt-jacket-smiling-brown-background_197531-26657.jpg" }
|
||||
]}
|
||||
showRating={true}
|
||||
title="Client Feedback"
|
||||
description="See what our clients say about our design work."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do we start?",
|
||||
content: "Fill out our contact form and we will reach out.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you offer maintenance?",
|
||||
content: "Yes, we provide ongoing web maintenance packages.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What is the turnaround?",
|
||||
content: "Usually 2-4 weeks depending on the project complexity.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/diverse-customer-center-workers-assisting-clients-with-installing-software_482257-126181.jpg"
|
||||
title="Common Questions"
|
||||
description="Answers to everything you need to know about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How do we start?", content: "Fill out our contact form and we will reach out." },
|
||||
{ id: "f2", title: "Do you offer maintenance?", content: "Yes, we provide ongoing web maintenance packages." },
|
||||
{ id: "f3", title: "What is the turnaround?", content: "Usually 2-4 weeks depending on the project complexity." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/diverse-customer-center-workers-assisting-clients-with-installing-software_482257-126181.jpg"
|
||||
title="Common Questions"
|
||||
description="Answers to everything you need to know about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Contact Us"
|
||||
title="Start Your Next Project"
|
||||
description="Ready to work together? Send us a message today."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Contact Us"
|
||||
title="Start Your Next Project"
|
||||
description="Ready to work together? Send us a message today."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Jozi Creative"
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Graphic Design",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Web Development",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Jozi Creative"
|
||||
columns={[
|
||||
{ title: "Services", items: [{ label: "Graphic Design", href: "#services" }, { label: "Web Development", href: "#services" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user