Merge version_5 into main #5
381
src/app/page.tsx
381
src/app/page.tsx
@@ -1,375 +1,34 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
|
||||
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
||||
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
||||
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
||||
import TextAbout from "@/components/sections/about/TextAbout";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { Star, Globe } from "lucide-react";
|
||||
import { useTranslation } from "@/hooks/useTranslation";
|
||||
|
||||
export default function HomePage() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const navItems = [
|
||||
{ name: t("nav.home"), id: "/" },
|
||||
{ name: t("nav.menu"), id: "/menu" },
|
||||
{ name: t("nav.services"), id: "services" },
|
||||
{ name: t("nav.contact"), id: "contact" },
|
||||
{ name: t("nav.about"), id: "why-us" },
|
||||
{ name: "🇸🇼 Kiswahili", id: "#" },
|
||||
];
|
||||
|
||||
const handleLanguageChange = (language: string) => {
|
||||
localStorage.setItem("preferredLanguage", language);
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="aurora"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName={t("brand.name")}
|
||||
bottomLeftText={t("brand.location")}
|
||||
bottomRightText={t("brand.phone")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText={t("hero.logo")}
|
||||
description={t("hero.description")}
|
||||
buttons={[
|
||||
{
|
||||
text: t("hero.callButton"),
|
||||
href: "tel:0655311355"},
|
||||
{
|
||||
text: t("hero.orderButton"),
|
||||
href: "https://wa.me/255655311355"},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/pork-barbecue-cooked-grilled-charcoal-barbecue-is-beautiful-meat-fire-meat-coals_132075-13607.jpg", imageAlt: t("hero.slide1Alt"),
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-couple-having-drinks-party_23-2148037653.jpg", imageAlt: t("hero.slide2Alt"),
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/homemade-delicious-sandwich-fries-chicken-nuggets-black-board-fries-pepper-dark-gray-blurred-surface_179666-42621.jpg?_wi=1", imageAlt: t("hero.slide3Alt"),
|
||||
},
|
||||
]}
|
||||
autoplayDelay={5000}
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyThree
|
||||
tag={t("services.tag")}
|
||||
title={t("services.title")}
|
||||
description={t("services.description")}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: t("services.feature1Title"),
|
||||
tags: [
|
||||
t("services.feature1Tag1"),
|
||||
t("services.feature1Tag2"),
|
||||
],
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/happy-smiling-bartender-barista-using-coffee-machine-prepare-order-making-cappuccino-latte_1258-203406.jpg?_wi=1", imageAlt: t("services.feature1Alt"),
|
||||
},
|
||||
{
|
||||
id: "2", title: t("services.feature2Title"),
|
||||
tags: [
|
||||
t("services.feature2Tag1"),
|
||||
t("services.feature2Tag2"),
|
||||
],
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-adults-traveling-london_23-2149259470.jpg?_wi=1", imageAlt: t("services.feature2Alt"),
|
||||
},
|
||||
{
|
||||
id: "3", title: t("services.feature3Title"),
|
||||
tags: [
|
||||
t("services.feature3Tag1"),
|
||||
t("services.feature3Tag2"),
|
||||
],
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/delivery-concept-portrait-handsome-african-american-pizza-delivery-man-isolated-grey-studio-background-copy-space_1258-102231.jpg?_wi=1", imageAlt: t("services.feature3Alt"),
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="trust" data-section="trust">
|
||||
<TestimonialCardTwo
|
||||
tag={t("testimonials.tag")}
|
||||
title={t("testimonials.title")}
|
||||
description={t("testimonials.description")}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: t("testimonials.testimonial1Name"),
|
||||
role: t("testimonials.testimonial1Role"),
|
||||
testimonial: t("testimonials.testimonial1Text"),
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/portrait-beautiful-woman-park-by-red-leaves_1303-22124.jpg", imageAlt: t("testimonials.testimonial1Alt"),
|
||||
icon: Star,
|
||||
},
|
||||
{
|
||||
id: "2", name: t("testimonials.testimonial2Name"),
|
||||
role: t("testimonials.testimonial2Role"),
|
||||
testimonial: t("testimonials.testimonial2Text"),
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1689.jpg", imageAlt: t("testimonials.testimonial2Alt"),
|
||||
icon: Star,
|
||||
},
|
||||
{
|
||||
id: "3", name: t("testimonials.testimonial3Name"),
|
||||
role: t("testimonials.testimonial3Role"),
|
||||
testimonial: t("testimonials.testimonial3Text"),
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/mature-woman-striped-shirt-clenching-teeth-looking-troubled-front-view_176474-52779.jpg", imageAlt: t("testimonials.testimonial3Alt"),
|
||||
icon: Star,
|
||||
},
|
||||
{
|
||||
id: "4", name: t("testimonials.testimonial4Name"),
|
||||
role: t("testimonials.testimonial4Role"),
|
||||
testimonial: t("testimonials.testimonial4Text"),
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/closeup-portrait-cheerful-attractive-young-male-student-showing-promo-pointing-upper-left-corn_1258-109454.jpg", imageAlt: t("testimonials.testimonial4Alt"),
|
||||
icon: Star,
|
||||
},
|
||||
{
|
||||
id: "5", name: t("testimonials.testimonial5Name"),
|
||||
role: t("testimonials.testimonial5Role"),
|
||||
testimonial: t("testimonials.testimonial5Text"),
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-woman-with-glasses-laughing_23-2148415938.jpg", imageAlt: t("testimonials.testimonial5Alt"),
|
||||
icon: Star,
|
||||
},
|
||||
{
|
||||
id: "6", name: t("testimonials.testimonial6Name"),
|
||||
role: t("testimonials.testimonial6Role"),
|
||||
testimonial: t("testimonials.testimonial6Text"),
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/smiling-dad-dancing-with-daughter_23-2147800128.jpg", imageAlt: t("testimonials.testimonial6Alt"),
|
||||
icon: Star,
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="menu" data-section="menu">
|
||||
<ProductCardOne
|
||||
tag={t("menu.tag")}
|
||||
title={t("menu.title")}
|
||||
description={t("menu.description")}
|
||||
products={[
|
||||
{
|
||||
id: "1", name: t("menu.product1Name"),
|
||||
price: t("menu.product1Price"),
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/top-view-fried-chicken-tomatoes-lemon-slices-oval-plate-table-free-space_140725-147488.jpg?_wi=1", imageAlt: t("menu.product1Alt"),
|
||||
},
|
||||
{
|
||||
id: "2", name: t("menu.product2Name"),
|
||||
price: t("menu.product2Price"),
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/making-homemade-burger-ingredients-cooking-wooden-tabletop-view-flat-lay-copy-space_127032-3012.jpg?_wi=1", imageAlt: t("menu.product2Alt"),
|
||||
},
|
||||
{
|
||||
id: "3", name: t("menu.product3Name"),
|
||||
price: t("menu.product3Price"),
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-adult-enjoying-food_23-2149303526.jpg?_wi=1", imageAlt: t("menu.product3Alt"),
|
||||
},
|
||||
{
|
||||
id: "4", name: t("menu.product4Name"),
|
||||
price: t("menu.product4Price"),
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/fruit-cocktail-glass-cafe_1339-7258.jpg?_wi=1", imageAlt: t("menu.product4Alt"),
|
||||
},
|
||||
]}
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: t("menu.viewFullMenuButton"),
|
||||
href: "/menu"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why-us" data-section="why-us">
|
||||
<TextAbout
|
||||
tag={t("whyUs.tag")}
|
||||
title={t("whyUs.title")}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: t("whyUs.reserveButton"),
|
||||
href: "#contact"},
|
||||
{
|
||||
text: t("whyUs.orderButton"),
|
||||
href: "https://wa.me/255655311355"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
title={t("socialProof.title")}
|
||||
description={t("socialProof.description")}
|
||||
tag={t("socialProof.tag")}
|
||||
names={[
|
||||
t("socialProof.proof1"),
|
||||
t("socialProof.proof2"),
|
||||
t("socialProof.proof3"),
|
||||
t("socialProof.proof4"),
|
||||
t("socialProof.proof5"),
|
||||
t("socialProof.proof6"),
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text={t("contact.text")}
|
||||
animationType="reveal-blur"
|
||||
buttons={[
|
||||
{
|
||||
text: t("contact.callButton"),
|
||||
href: "tel:0655311355"},
|
||||
{
|
||||
text: t("contact.whatsappButton"),
|
||||
href: "https://wa.me/255655311355"},
|
||||
]}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
sideTitle={t("faq.sideTitle")}
|
||||
sideDescription={t("faq.sideDescription")}
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: t("faq.question1Title"),
|
||||
content: t("faq.question1Content"),
|
||||
},
|
||||
{
|
||||
id: "2", title: t("faq.question2Title"),
|
||||
content: t("faq.question2Content"),
|
||||
},
|
||||
{
|
||||
id: "3", title: t("faq.question3Title"),
|
||||
content: t("faq.question3Content"),
|
||||
},
|
||||
{
|
||||
id: "4", title: t("faq.question4Title"),
|
||||
content: t("faq.question4Content"),
|
||||
},
|
||||
{
|
||||
id: "5", title: t("faq.question5Title"),
|
||||
content: t("faq.question5Content"),
|
||||
},
|
||||
{
|
||||
id: "6", title: t("faq.question6Title"),
|
||||
content: t("faq.question6Content"),
|
||||
},
|
||||
]}
|
||||
textPosition="left"
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: t("footer.locationTitle"),
|
||||
items: [
|
||||
{
|
||||
label: t("footer.locationAddress"),
|
||||
href: "https://maps.google.com/?q=Kzone+Cafe+Grill+Kigamboni"},
|
||||
{
|
||||
label: t("footer.locationMap"),
|
||||
href: "https://maps.google.com/?q=Kzone+Cafe+Grill+Kigamboni"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: t("footer.contactTitle"),
|
||||
items: [
|
||||
{
|
||||
label: t("footer.contactPhone"),
|
||||
href: "tel:0655311355"},
|
||||
{
|
||||
label: t("footer.contactWhatsapp"),
|
||||
href: "https://wa.me/255655311355"},
|
||||
{
|
||||
label: t("footer.contactHours"),
|
||||
href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: t("footer.servicesTitle"),
|
||||
items: [
|
||||
{
|
||||
label: t("footer.servicesDineIn"),
|
||||
href: "#services"},
|
||||
{
|
||||
label: t("footer.servicesDriveThrough"),
|
||||
href: "#services"},
|
||||
{
|
||||
label: t("footer.servicesDelivery"),
|
||||
href: "#services"},
|
||||
{
|
||||
label: t("footer.servicesReservations"),
|
||||
href: "#contact"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText={t("footer.copyright")}
|
||||
/>
|
||||
</div>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Menu", id: "#menu" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
{ name: "Order", id: "#order" },
|
||||
]}
|
||||
brandName="Kzone"
|
||||
bottomLeftText="24/7 Service"
|
||||
bottomRightText="Kigamboni, Tanzania"
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user