Files
e852adbf-d720-42ba-99cd-e6a…/src/app/page.tsx
2026-03-20 00:18:19 +00:00

262 lines
15 KiB
TypeScript

"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { Zap, Package, CheckCircle, Globe, TrendingUp, Star, HelpCircle } from "lucide-react";
export default function HomePage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "About", id: "about" },
{ name: "Products", id: "products" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" },
];
const footerColumns = [
{
title: "Company", items: [
{ label: "About Us", href: "/about" },
{ label: "Our Products", href: "/products" },
{ label: "Careers", href: "#" },
{ label: "Blog", href: "#" },
],
},
{
title: "Services", items: [
{ label: "Distribution", href: "#" },
{ label: "Logistics", href: "#" },
{ label: "Wholesale", href: "#" },
{ label: "Bulk Orders", href: "#" },
],
},
{
title: "Support", items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Support Portal", href: "#" },
{ label: "Tracking", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Compliance", href: "#" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="large"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Istaqbaal"
navItems={navItems}
button={{
text: "Get Started", href: "/contact"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
title="Premium Distribution Solutions for Every Industry"
description="Istaqbaal Agencies is your trusted partner in product distribution, delivering excellence across multiple sectors with reliability and innovation."
background={{ variant: "rotated-rays-animated-grid" }}
tag="Distribution Excellence"
tagIcon={Zap}
tagAnimation="slide-up"
buttons={[
{ text: "Explore Our Products", href: "/products" },
{ text: "Get In Touch", href: "/contact" },
]}
buttonAnimation="blur-reveal"
carouselItems={[
{
id: "carousel-1", imageSrc: "http://img.b2bpic.net/free-photo/diverse-team-business-owners-packing-order-shipping-using-cardboard-boxes-merchandise-man-woman-working-supply-chain-logistics-quality-control-handheld-shot_482257-63936.jpg?_wi=1", imageAlt: "modern warehouse distribution center professional"},
{
id: "carousel-2", imageSrc: "http://img.b2bpic.net/free-photo/abstract-blur-supermarket-grocery-store-background_640221-331.jpg?_wi=1", imageAlt: "industrial product packaging cardboard boxes"},
{
id: "carousel-3", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-medical-elements-composition-with-copy-space_23-2148502907.jpg?_wi=1", imageAlt: "consumer goods product line"},
{
id: "carousel-4", imageSrc: "http://img.b2bpic.net/free-photo/modern-stationary-collection-arrangement_23-2149309690.jpg?_wi=1", imageAlt: "electronics technology gadgets"},
{
id: "carousel-5", imageSrc: "http://img.b2bpic.net/free-photo/businesspeople-working-office_1139-254.jpg?_wi=1", imageAlt: "professional business team working together"},
{
id: "carousel-6", imageSrc: "http://img.b2bpic.net/free-photo/employees-working-warehouse_23-2148923075.jpg?_wi=1", imageAlt: "logistics tracking delivery management"},
]}
autoPlay={true}
autoPlayInterval={5000}
ariaLabel="Hero carousel showcasing Istaqbaal distribution services"
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="About Istaqbaal Agencies"
description={[
"Istaqbaal Agencies stands as a leading distributor of premium products across diverse industries. With years of expertise and a commitment to excellence, we bridge the gap between manufacturers and retailers.", "Our comprehensive network ensures efficient delivery, competitive pricing, and exceptional customer service. We specialize in providing tailored distribution solutions that meet the unique needs of each client.", "From consumer goods to industrial products, our portfolio spans multiple categories, making us your one-stop solution for all distribution requirements."]}
buttons={[{ text: "Learn More", href: "/about" }]}
buttonAnimation="slide-up"
showBorder={true}
useInvertedBackground={false}
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
title="Our Product Categories"
description="Explore our diverse range of products distributed across multiple sectors to serve your business needs."
tag="Wide Selection"
tagIcon={Package}
tagAnimation="opacity"
buttons={[{ text: "View All Products", href: "/products" }]}
buttonAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
products={[
{
id: "product-cat-1", name: "Consumer Goods", price: "Wholesale Available", imageSrc: "http://img.b2bpic.net/free-photo/abstract-blur-supermarket-grocery-store-background_640221-331.jpg?_wi=2", imageAlt: "Consumer goods and packaged products"},
{
id: "product-cat-2", name: "Industrial Equipment", price: "Custom Pricing", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-medical-elements-composition-with-copy-space_23-2148502907.jpg?_wi=2", imageAlt: "Industrial equipment and machinery"},
{
id: "product-cat-3", name: "Specialty Products", price: "Bulk Discounts", imageSrc: "http://img.b2bpic.net/free-photo/modern-stationary-collection-arrangement_23-2149309690.jpg?_wi=2", imageAlt: "Specialty and premium products"},
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
title="Why Choose Istaqbaal Agencies"
description="We deliver comprehensive distribution services backed by industry expertise and customer-centric solutions."
tag="Key Advantages"
tagIcon={CheckCircle}
tagAnimation="slide-up"
buttons={[{ text: "Partner With Us", href: "/contact" }]}
buttonAnimation="blur-reveal"
accordionItems={[
{
id: "feature-1", title: "Wide Product Portfolio", content: "Access thousands of products across multiple categories including consumer goods, industrial equipment, pharmaceuticals, and specialty items. Our diverse inventory ensures one-stop shopping for all your business needs."},
{
id: "feature-2", title: "Efficient Logistics Network", content: "Leverage our optimized distribution network with real-time tracking and reliable delivery systems. We ensure products reach your location on time with minimal handling and maximum care."},
{
id: "feature-3", title: "Competitive Pricing", content: "Benefit from our bulk purchasing power and streamlined operations. We offer competitive wholesale rates without compromising on quality or service standards."},
{
id: "feature-4", title: "Professional Customer Support", content: "Our dedicated support team is available to assist with orders, inquiries, and logistics concerns. We prioritize your satisfaction and long-term business relationship."},
]}
imageSrc="http://img.b2bpic.net/free-photo/employees-working-warehouse_23-2148923075.jpg?_wi=2"
imageAlt="Advanced logistics and distribution management"
mediaAnimation="slide-up"
useInvertedBackground={false}
mediaPosition="right"
/>
</div>
<div id="socialproof" data-section="socialproof">
<SocialProofOne
title="Trusted by Leading Companies"
description="Join hundreds of businesses that rely on Istaqbaal Agencies for their distribution needs."
tag="Global Partners"
tagIcon={Globe}
tagAnimation="opacity"
textboxLayout="default"
useInvertedBackground={true}
names={[
"Enterprise Corp", "Retail Solutions", "Tech Industries", "Manufacturing Pro", "Logistics Plus", "Commerce Hub", "Finance Partners"]}
logos={[
"http://img.b2bpic.net/free-vector/abstract-colorful-floral-shape-with-logo_1035-8982.jpg", "http://img.b2bpic.net/free-vector/colorful-set-labor-day-labels_23-2147658136.jpg", "http://img.b2bpic.net/free-vector/technological-logo-design_1424-39.jpg", "http://img.b2bpic.net/free-vector/gradient-mechanical-engineering-logo-template_23-2149999399.jpg", "http://img.b2bpic.net/free-vector/blue-circular-abstract-logo_1043-69.jpg", "http://img.b2bpic.net/free-photo/internationals-people-standing-cafe_1157-32400.jpg", "http://img.b2bpic.net/free-vector/gradient-accounting-logo-template_23-2148857284.jpg"]}
showCard={true}
speed={40}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
title="Our Impact By The Numbers"
description="Quantifiable results demonstrating our commitment to excellence in distribution services."
tag="Performance Metrics"
tagIcon={TrendingUp}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="scale-rotate"
metrics={[
{
id: "metric-1", value: "500+", title: "Products Distributed", description: "Across multiple industry sectors and categories", videoSrc: "https://example.com/video1.mp4?_wi=1", videoAriaLabel: "Products distributed video"},
{
id: "metric-2", value: "99.2%", title: "On-Time Delivery", description: "Consistent reliability in every shipment", videoSrc: "https://example.com/video2.mp4?_wi=1", videoAriaLabel: "On-time delivery video"},
{
id: "metric-3", value: "1000+", title: "Active Clients", description: "Businesses trusting us nationwide", videoSrc: "https://example.com/video3.mp4?_wi=1", videoAriaLabel: "Active clients video"},
{
id: "metric-4", value: "20+", title: "Years Experience", description: "Industry leadership and expertise", videoSrc: "https://example.com/video4.mp4?_wi=1", videoAriaLabel: "Years experience video"},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
cardTitle="What Our Partners Say"
cardTag="Client Testimonials"
cardTagIcon={Star}
cardAnimation="blur-reveal"
useInvertedBackground={true}
testimonials={[
{
id: "testimonial-1", name: "Ahmed Hassan", imageSrc: "http://img.b2bpic.net/free-photo/content-indian-ceo-standing-smiling-portrait-successful-pensive-bearded-businessman-glasses-posing-office-room-business-expression-management-concept_74855-11642.jpg?_wi=1", imageAlt: "professional headshot business person"},
{
id: "testimonial-2", name: "Fatima Al-Mansouri", imageSrc: "http://img.b2bpic.net/free-photo/close-up-good-looking-smiling-friendly-female-trainee-ready-tackle-assignments-smiling-broadly-feeling-lucky-day-work-self-assured-encouraged-achieve-success-goal-white-wall_176420-35567.jpg?_wi=1", imageAlt: "female business professional headshot"},
{
id: "testimonial-3", name: "Mohammed Al-Rashid", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-businessman-office_1163-5471.jpg?_wi=1", imageAlt: "diverse business professional portrait"},
{
id: "testimonial-4", name: "Layla Al-Khattabi", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-successful-businesswoman-suit-cross-arms-chest-smile-look-confident-stan_1258-118782.jpg?_wi=1", imageAlt: "business professional photo portrait"},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to partner with Istaqbaal Agencies? Get in touch with our team today to discuss your distribution needs and explore how we can support your business growth."
animationType="entrance-slide"
background={{ variant: "rotated-rays-static-grid" }}
useInvertedBackground={true}
buttons={[
{ text: "Contact Our Team", href: "/contact" },
{ text: "Request a Quote", href: "/contact" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Istaqbaal Agencies"
copyrightText="© 2025 Istaqbaal Agencies. All rights reserved."
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}