Files
77e8abfe-a67d-45a8-adec-f68…/src/app/page.tsx
2026-04-23 23:24:25 +00:00

237 lines
10 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Shield } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeLargeTitles"
background="aurora"
cardStyle="glass-depth"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home", id: "hero"},
{
name: "About", id: "about"},
{
name: "Services", id: "services"},
{
name: "Products", id: "products"},
{
name: "Reviews", id: "testimonials"},
{
name: "Contact", id: "contact"},
]}
brandName="WhatWeDoBest Graphics"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
background={{
variant: "plain"}}
logoText="Wear Confidence. Print Excellence."
description="Premium custom apparel, graphic printing, and quality clothing supply crafted in Polokwane."
buttons={[
{
text: "Shop Now", href: "#products"},
{
text: "Request a Quote", href: "#contact"},
]}
mediaAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164871.jpg"
imageAlt="custom apparel printing workshop"
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={false}
tag="About Us"
title="Crafting Your Identity"
description="At WhatWeDoBest Graphics Company / Buddywest Clothing Investment Company (PTY) LTD, we specialize in high-quality clothing supply, custom printing, and graphic branding solutions."
subdescription="From stylish everyday wear to branded apparel for businesses, schools, events, and organizations — we turn ideas into wearable identity."
icon={Shield}
imageSrc="http://img.b2bpic.net/free-photo/young-man-screen-printing_1163-2777.jpg"
mediaAnimation="blur-reveal"
imageAlt="high quality garments clothing stack"
/>
</div>
<div id="services" data-section="services">
<FeatureCardSixteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
negativeCard={{
items: [
"Limited DIY options", "Low-quality mass production", "Slow service times", "Lack of customization", "Inconsistent sizing"],
}}
positiveCard={{
items: [
"Premium Quality Garments", "Custom Printing & Branding", "Bulk Clothing Supply", "Reliable Service & Fast Turnaround", "Expert Design Support"],
}}
title="Why We Are The Best"
description="We don't just print; we build partnerships through quality service."
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
products={[
{
id: "p1", name: "Printed T-Shirts", price: "From R150", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-man-with-skateboard_23-2147678181.jpg"},
{
id: "p2", name: "Custom Hoodies", price: "From R350", imageSrc: "http://img.b2bpic.net/free-photo/person-pressing-buzzer_23-2149731359.jpg"},
{
id: "p3", name: "Caps & Accessories", price: "From R100", imageSrc: "http://img.b2bpic.net/free-photo/creative-trucker-hat-still-life_23-2149504623.jpg"},
{
id: "p4", name: "Corporate Wear", price: "From R250", imageSrc: "http://img.b2bpic.net/free-photo/business-people-walking-together_53876-22943.jpg"},
{
id: "p5", name: "School & Team", price: "From R180", imageSrc: "http://img.b2bpic.net/free-photo/front-view-women-football-team_23-2148634639.jpg"},
{
id: "p6", name: "Streetwear", price: "From R299", imageSrc: "http://img.b2bpic.net/free-vector/damn-good-black-blue-retro-calligraphy_53876-99595.jpg"},
]}
title="Featured Collections"
description="Explore our high-quality custom apparel options."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardFourteen
useInvertedBackground={true}
title="Our Impact"
tag="Reliability"
metrics={[
{
id: "m1", value: "4.8/5", description: "Customer Rating"},
{
id: "m2", value: "1000+", description: "Happy Clients"},
{
id: "m3", value: "24h", description: "Fast Turnaround"},
{
id: "m4", value: "500+", description: "Projects Completed"},
{
id: "m5", value: "10+", description: "Years Experience"},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
testimonials={[
{
id: "t1", name: "Pilusa Mankopane", role: "Client", company: "Local", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg"},
{
id: "t2", name: "Moloko Lwandlelwethu", role: "Client", company: "Local", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12688.jpg"},
{
id: "t3", name: "John D.", role: "Corporate", company: "TechCorp", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/stuido-portrait-happy-cheerful-young-businessman_273609-12506.jpg"},
{
id: "t4", name: "Sarah K.", role: "Manager", company: "RetailLab", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businesswoman_23-2149153829.jpg"},
{
id: "t5", name: "Mike R.", role: "Team Lead", company: "SportsGroup", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg"},
]}
title="What Our Clients Say"
description="Trusted by businesses and individuals across Polokwane."
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{
id: "f1", title: "How do I place an order?", content: "You can request a quote via our website or give us a call at 071 425 0293."},
{
id: "f2", title: "Do you offer bulk printing?", content: "Yes, we specialize in bulk orders for corporate and team apparel."},
{
id: "f3", title: "What is the turnaround time?", content: "Most orders are processed within 24-48 hours depending on quantity and complexity."},
{
id: "f4", title: "Can I bring my own garments?", content: "Yes, we accept customer-provided garments for printing as long as they are compatible with our machines."},
{
id: "f5", title: "Where are you located?", content: "House No. 172 Letsokoane, Bloodriver Ext, Seshego-B, Polokwane, 0724."},
]}
title="Frequently Asked Questions"
description="Everything you need to know about our services."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "plain"}}
tag="Contact Us"
title="Get in touch today"
description="Need custom clothing or branding? We are located at House No. 172 Letsokoane, Bloodriver Ext, Seshego-B, Polokwane, 0724. Open MondaySaturday from 7 AM."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "Home", href: "#hero"},
{
label: "Services", href: "#services"},
{
label: "Products", href: "#products"},
],
},
{
items: [
{
label: "Contact", href: "#contact"},
{
label: "FAQs", href: "#faq"},
],
},
]}
logoText="WhatWeDoBest"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}