Update src/app/page.tsx

This commit is contained in:
2026-04-12 02:43:39 +00:00
parent caa39ad2da
commit afc274dc7f

View File

@@ -27,292 +27,124 @@ export default function LandingPage() {
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Products",
id: "products",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Instyle Industries"
button={{
text: "Get Quote",
href: "#contact",
}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Products", id: "products" },
{ name: "Contact", id: "contact" },
]}
brandName="Instyle Industries"
button={{
text: "Get Quote", href: "#contact"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Premium Aluminium Roofing Solutions in Ghana"
description="Trusted for Quality, Durability & Affordability"
buttons={[
{
text: "Request a Quote",
href: "#contact",
},
{
text: "Call Now",
href: "tel:+",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/concrete-building_1127-2031.jpg?_wi=1"
showDimOverlay={true}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg",
alt: "Businessman smiling",
},
{
src: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",
alt: "Business leader",
},
{
src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",
alt: "Smiling professional",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-15972.jpg",
alt: "Professional man",
},
{
src: "http://img.b2bpic.net/free-photo/senior-businessman-outside-modern-office-building_1139-1076.jpg",
alt: "Senior businessman",
},
]}
avatarText="Trusted by 500+ satisfied clients"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Premium Aluminium Roofing Solutions in Ghana"
description="Trusted for Quality, Durability & Affordability"
buttons={[
{ text: "Request a Quote", href: "#contact" },
{ text: "Call Now", href: "tel:+" },
]}
imageSrc="http://img.b2bpic.net/free-photo/concrete-building_1127-2031.jpg"
showDimOverlay={true}
avatars={[
{ src: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg", alt: "Businessman smiling" },
{ src: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg", alt: "Business leader" },
{ src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg", alt: "Smiling professional" },
{ src: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-15972.jpg", alt: "Professional man" },
{ src: "http://img.b2bpic.net/free-photo/senior-businessman-outside-modern-office-building_1139-1076.jpg", alt: "Senior businessman" },
]}
avatarText="Trusted by 500+ satisfied clients"
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={false}
title="One of the Best Aluminium Roofing Companies in Ghana"
buttons={[
{
text: "Learn More",
},
]}
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={false}
title="One of the Best Aluminium Roofing Companies in Ghana"
buttons={[{ text: "Learn More" }]}
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "1",
name: "Aluminium Roofing Sheets",
price: "High Quality",
imageSrc: "http://img.b2bpic.net/free-photo/contrasting-outdoor-texture-design_23-2149756593.jpg?_wi=1",
},
{
id: "2",
name: "AluZinc Roofing Sheets",
price: "Premium Grade",
imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15638.jpg?_wi=1",
},
{
id: "3",
name: "Sliding Doors & Windows",
price: "Modern Design",
imageSrc: "http://img.b2bpic.net/free-photo/white-hallway-with-glass-doors-metal-ceiling-modern-building_181624-7177.jpg",
},
{
id: "4",
name: "Roof Trusses",
price: "Engineered Strength",
imageSrc: "http://img.b2bpic.net/free-photo/detail-glass-architectures-blue-tone_1359-612.jpg",
},
{
id: "5",
name: "Aluminium Washing Basins",
price: "Durable & Elegant",
imageSrc: "http://img.b2bpic.net/free-photo/view-faucet-kitchen_268835-3786.jpg",
},
{
id: "6",
name: "Industrial Components",
price: "Reliable Quality",
imageSrc: "http://img.b2bpic.net/free-photo/metal-glass-structure_1127-2042.jpg",
},
]}
title="Our Products & Services"
description="Discover our range of industrial-grade building materials designed for the Ghanaian landscape."
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
animationType="slide-up"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{ id: "1", name: "Aluminium Roofing Sheets", price: "High Quality", imageSrc: "http://img.b2bpic.net/free-photo/contrasting-outdoor-texture-design_23-2149756593.jpg" },
{ id: "2", name: "AluZinc Roofing Sheets", price: "Premium Grade", imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15638.jpg" },
{ id: "3", name: "Sliding Doors & Windows", price: "Modern Design", imageSrc: "http://img.b2bpic.net/free-photo/white-hallway-with-glass-doors-metal-ceiling-modern-building_181624-7177.jpg" },
{ id: "4", name: "Roof Trusses", price: "Engineered Strength", imageSrc: "http://img.b2bpic.net/free-photo/detail-glass-architectures-blue-tone_1359-612.jpg" },
{ id: "5", name: "Aluminium Washing Basins", price: "Durable & Elegant", imageSrc: "http://img.b2bpic.net/free-photo/view-faucet-kitchen_268835-3786.jpg" },
{ id: "6", name: "Industrial Components", price: "Reliable Quality", imageSrc: "http://img.b2bpic.net/free-photo/metal-glass-structure_1127-2042.jpg" },
]}
title="Our Products & Services"
description="Discover our range of industrial-grade building materials designed for the Ghanaian landscape."
/>
</div>
<div id="why-us" data-section="why-us">
<FeatureBento
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Premium Quality",
description: "Only the finest materials for your construction projects.",
bentoComponent: "reveal-icon",
icon: Shield,
imageSrc: "http://img.b2bpic.net/free-photo/iron-structure_1127-2097.jpg",
imageAlt: "Iron structure",
},
{
title: "Affordable Pricing",
description: "Unbeatable prices for high-grade roofing products.",
bentoComponent: "reveal-icon",
icon: Award,
imageSrc: "http://img.b2bpic.net/free-photo/concrete-building_1127-2031.jpg?_wi=2",
imageAlt: "Iron structure",
},
{
title: "Accessible Facility",
description: "Our location is central and disability-friendly.",
bentoComponent: "reveal-icon",
icon: MapPin,
imageSrc: "http://img.b2bpic.net/free-photo/contrasting-outdoor-texture-design_23-2149756593.jpg?_wi=2",
imageAlt: "Iron structure",
},
{
title: "Customer-Focused",
description: "Reliable, friendly, and expert service always.",
bentoComponent: "reveal-icon",
icon: UserCheck,
imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15638.jpg?_wi=2",
imageAlt: "Iron structure",
},
]}
title="Why Choose Instyle Industries?"
description="We are committed to building Ghana with quality, confidence, and trust."
/>
</div>
<div id="why-us" data-section="why-us">
<FeatureBento
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
features={[
{ title: "Premium Quality", description: "Only the finest materials for your construction projects.", bentoComponent: "reveal-icon", icon: Shield },
{ title: "Affordable Pricing", description: "Unbeatable prices for high-grade roofing products.", bentoComponent: "reveal-icon", icon: Award },
{ title: "Accessible Facility", description: "Our location is central and disability-friendly.", bentoComponent: "reveal-icon", icon: MapPin },
{ title: "Customer-Focused", description: "Reliable, friendly, and expert service always.", bentoComponent: "reveal-icon", icon: UserCheck },
]}
title="Why Choose Instyle Industries?"
description="We are committed to building Ghana with quality, confidence, and trust."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Kofi A.",
handle: "@kofi",
testimonial: "Best place for original aluminium roofing sheets at affordable prices.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-professional_1098-14759.jpg",
},
{
id: "2",
name: "Ama S.",
handle: "@ama",
testimonial: "One of the best aluminium roofing companies in Ghana.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-businessman-looking-camera_23-2147839978.jpg",
},
{
id: "3",
name: "Kwame B.",
handle: "@kwame",
testimonial: "Highly recommended for quality roofing sheets.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg",
},
{
id: "4",
name: "Adjoa O.",
handle: "@adjoa",
testimonial: "Affordable, durable, and reliable products.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/expressive-middle-aged-woman-posing_344912-2831.jpg",
},
{
id: "5",
name: "Mensa T.",
handle: "@mensa",
testimonial: "Quality and professionalism in every transaction.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg",
},
]}
showRating={true}
title="What Our Customers Say"
description="Hear from our partners and clients about their experience with our services."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Kofi A.", handle: "@kofi", testimonial: "Best place for original aluminium roofing sheets at affordable prices.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/business-professional_1098-14759.jpg" },
{ id: "2", name: "Ama S.", handle: "@ama", testimonial: "One of the best aluminium roofing companies in Ghana.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-businessman-looking-camera_23-2147839978.jpg" },
{ id: "3", name: "Kwame B.", handle: "@kwame", testimonial: "Highly recommended for quality roofing sheets.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg" },
{ id: "4", name: "Adjoa O.", handle: "@adjoa", testimonial: "Affordable, durable, and reliable products.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/expressive-middle-aged-woman-posing_344912-2831.jpg" },
{ id: "5", name: "Mensa T.", handle: "@mensa", testimonial: "Quality and professionalism in every transaction.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg" },
]}
showRating={true}
title="What Our Customers Say"
description="Hear from our partners and clients about their experience with our services."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Get Your Roofing Solution Today"
description="Were ready to help you build with quality and confidence. Request a quote or contact our team now."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Your Email",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "Tell us about your project",
required: true,
}}
imageSrc="http://img.b2bpic.net/free-photo/construction-site-with-tower-crane-apartments-urban-modern-architecture_169016-69092.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Get Your Roofing Solution Today"
description="Were ready to help you build with quality and confidence. Request a quote or contact our team now."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email", required: true },
]}
textarea={{ name: "message", placeholder: "Tell us about your project", required: true }}
imageSrc="http://img.b2bpic.net/free-photo/construction-site-with-tower-crane-apartments-urban-modern-architecture_169016-69092.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "About",
href: "#about",
},
{
label: "Products",
href: "#products",
},
],
},
{
items: [
{
label: "Contact Us",
href: "#contact",
},
{
label: "WhatsApp",
href: "https://wa.me/",
},
],
},
]}
logoText="Instyle Industries"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "About", href: "#about" }, { label: "Products", href: "#products" }] },
{ items: [{ label: "Contact Us", href: "#contact" }, { label: "WhatsApp", href: "https://wa.me/" }] },
]}
logoText="Instyle Industries"
/>
</div>
</ReactLenis>
</ThemeProvider>
);