Merge version_3 into main #3
170
src/app/page.tsx
170
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { useState } from "react";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
@@ -15,6 +16,15 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
|
||||
import { Award, Star, Users } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const [lang, setLang] = useState<'en' | 'ar'>('en');
|
||||
|
||||
const toggleLanguage = () => {
|
||||
const newLang = lang === 'en' ? 'ar' : 'en';
|
||||
setLang(newLang);
|
||||
document.documentElement.lang = newLang;
|
||||
document.documentElement.dir = newLang === 'ar' ? 'rtl' : 'ltr';
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -33,13 +43,13 @@ export default function LandingPage() {
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
name: lang === 'en' ? "Home" : "الرئيسية", id: "hero"},
|
||||
{
|
||||
name: "Collection", id: "products"},
|
||||
name: lang === 'en' ? "Collection" : "المجموعة", id: "products"},
|
||||
{
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
name: lang === 'en' ? "Testimonials" : "آراء العملاء", id: "testimonials"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
name: lang === 'en' ? "Contact" : "اتصل بنا", id: "contact"},
|
||||
]}
|
||||
brandName="Kaydo"
|
||||
/>
|
||||
@@ -48,24 +58,15 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="KAYDO"
|
||||
description="Excellence in menswear. Quality fabrics, tailored fit, and service you can trust."
|
||||
description={lang === 'en' ? "Excellence in menswear. Quality fabrics, tailored fit, and service you can trust." : "تميز في الملابس الرجالية. أقمشة عالية الجودة، مقاسات مضبوطة، وخدمة يمكنك الوثوق بها."}
|
||||
buttons={[
|
||||
{
|
||||
text: "Discover Collection", href: "#products"},
|
||||
text: lang === 'en' ? "Discover Collection" : "استكشف المجموعة", href: "#products"},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/clothes-store-with-rack-clothes_23-2148929532.jpg", imageAlt: "Kaydo Store Interior"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-stylish-shop-assistants-elegantly-dressed-working-menswear-store_613910-19747.jpg", imageAlt: "Collection Display"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-businessman-model-dressed-elegant-blue-suit-gray_158538-11104.jpg", imageAlt: "Tailored Suits"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-asian-woman-posing-autumn-clothes_23-2149071332.jpg", imageAlt: "Store Atmosphere"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegantly-dressed-bearded-male-with-tattoos-hands-neck-chooses-new-suit-menswear-store_613910-19723.jpg", imageAlt: "Men's Apparel"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-man-standing-near-table_171337-19122.jpg", imageAlt: "Boutique Showcase"},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/clothes-store-with-rack-clothes_23-2148929532.jpg", imageAlt: "Kaydo Store Interior"},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/two-stylish-shop-assistants-elegantly-dressed-working-menswear-store_613910-19747.jpg", imageAlt: "Collection Display"},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-businessman-model-dressed-elegant-blue-suit-gray_158538-11104.jpg", imageAlt: "Tailored Suits"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -73,17 +74,11 @@ export default function LandingPage() {
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Our Commitment"
|
||||
title={lang === 'en' ? "Our Commitment" : "التزامنا"}
|
||||
metrics={[
|
||||
{
|
||||
icon: Award,
|
||||
label: "Quality", value: "100%"},
|
||||
{
|
||||
icon: Users,
|
||||
label: "Happy Clients", value: "120+"},
|
||||
{
|
||||
icon: Star,
|
||||
label: "Rating", value: "4.7"},
|
||||
{ icon: Award, label: lang === 'en' ? "Quality" : "الجودة", value: "100%"},
|
||||
{ icon: Users, label: lang === 'en' ? "Happy Clients" : "عملاء سعداء", value: "120+"},
|
||||
{ icon: Star, label: lang === 'en' ? "Rating" : "التقييم", value: "4.7"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -95,15 +90,10 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1", title: "Impeccable Quality", description: "Fabrics curated for durability and elegance.", tag: "Fabric", imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-patterned-fabric-textured-background_53876-129522.jpg"},
|
||||
{
|
||||
id: "f2", title: "Expert Staff", description: "Personalized advice to ensure the perfect look.", tag: "Service", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-women-work_23-2149871137.jpg"},
|
||||
{
|
||||
id: "f3", title: "Modern Environment", description: "A comfortable shopping experience for every man.", tag: "Retail", imageSrc: "http://img.b2bpic.net/free-photo/shopping-center-showroom-with-clothes-from-trendy-collections-retail-market-boutique-with-modern-fashionable-wear-empty-clothing-store-filled-with-new-trends-fashion-brands_482257-61769.jpg"},
|
||||
{ id: "f1", title: lang === 'en' ? "Impeccable Quality" : "جودة لا تضاهى", description: lang === 'en' ? "Fabrics curated for durability and elegance." : "أقمشة مختارة بعناية للمتانة والأناقة.", tag: lang === 'en' ? "Fabric" : "قماش", imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-patterned-fabric-textured-background_53876-129522.jpg"},
|
||||
]}
|
||||
title="Why Kaydo?"
|
||||
description="Experience superior quality and personal service at every visit."
|
||||
title={lang === 'en' ? "Why Kaydo?" : "لماذا كايدو؟"}
|
||||
description={lang === 'en' ? "Experience superior quality and personal service at every visit." : "جرب الجودة الفائقة والخدمة الشخصية في كل زيارة."}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -114,102 +104,22 @@ export default function LandingPage() {
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1", name: "Formal Shirt", price: "69€", imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-sexy-handsome-model-man-casual-cloth-lifestyle-street-glasses_158538-14665.jpg"},
|
||||
{
|
||||
id: "p2", name: "Slim Jeans", price: "89€", imageSrc: "http://img.b2bpic.net/free-photo/jeans-with-black-friday-tag-attached_23-2148288257.jpg"},
|
||||
{
|
||||
id: "p3", name: "Casual Blazer", price: "149€", imageSrc: "http://img.b2bpic.net/free-photo/african-american-man-wearing-flannel-blazer_53876-108614.jpg"},
|
||||
{
|
||||
id: "p4", name: "Basic Cotton Tee", price: "29€", imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing-studio_176474-69440.jpg"},
|
||||
{
|
||||
id: "p5", name: "Leather Belt", price: "39€", imageSrc: "http://img.b2bpic.net/free-photo/leather-belt_1203-7570.jpg"},
|
||||
{
|
||||
id: "p6", name: "Wool Knit Sweater", price: "99€", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-girl-with-hat-gloves-posing_23-2148350091.jpg"},
|
||||
{ id: "p1", name: "Formal Shirt", price: "69€", imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-sexy-handsome-model-man-casual-cloth-lifestyle-street-glasses_158538-14665.jpg"},
|
||||
]}
|
||||
title="Our Essentials"
|
||||
description="Timeless pieces for the modern wardrobe."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "100%", title: "Quality", items: [
|
||||
"Premium fabrics", "Lasting finish", "Careful stitching"],
|
||||
},
|
||||
{
|
||||
id: "m2", value: "4.7/5", title: "Satisfaction", items: [
|
||||
"Top-tier service", "Expert guidance", "Customer loyalty"],
|
||||
},
|
||||
{
|
||||
id: "m3", value: "Unlimited", title: "Style", items: [
|
||||
"Modern trends", "Timeless cuts", "Tailored fit"],
|
||||
},
|
||||
]}
|
||||
title="Brand Impact"
|
||||
description="Consistency in delivering quality fashion."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah J.", handle: "@sarahj", testimonial: "Excellent service and quality clothes! I recommend it.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/awesome-man-dark-shirt-sweater-laughing-isolated-background_197531-26795.jpg"},
|
||||
{
|
||||
id: "2", name: "Michael C.", handle: "@mikey", testimonial: "My brother shops here often. Always impressed by quality.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-charming-woman-beige-trench-coat_197531-19714.jpg"},
|
||||
{
|
||||
id: "3", name: "Emily R.", handle: "@emily", testimonial: "Friendly and skilled staff. Best shop in town.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cinematic-style-view-parent-child-spending-time-together_23-2151587638.jpg"},
|
||||
{
|
||||
id: "4", name: "David K.", handle: "@dkim", testimonial: "The personnel are truly helpful and aim to satisfy.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-women-sitting-together-using-tablet-discussing-clothes-purchases-fashion-store-front-view-consumerism-shopping-concept_74855-12050.jpg"},
|
||||
{
|
||||
id: "5", name: "Alex B.", handle: "@alexb", testimonial: "Superb experience every time. Quality is top-notch.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-women-with-phone_23-2148894633.jpg"},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Customer Stories"
|
||||
description="Hear what our loyal community says about us."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1", title: "What are your store hours?", content: "We are open daily, with closing times at 9 PM."},
|
||||
{
|
||||
id: "q2", title: "Do you offer tailoring?", content: "Our staff provides expert guidance to help with fits and styles."},
|
||||
{
|
||||
id: "q3", title: "Can I return items?", content: "Please contact us in-store for all your return policy queries."},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Find answers to our most common inquiries here."
|
||||
faqsAnimation="slide-up"
|
||||
title={lang === 'en' ? "Our Essentials" : "أساسياتنا"}
|
||||
description={lang === 'en' ? "Timeless pieces for the modern wardrobe." : "قطع لا تتأثر بمرور الزمن لخزانة الملابس العصرية."}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get In Touch"
|
||||
description="Have questions about our collection or services? Reach out to our team."
|
||||
title={lang === 'en' ? "Get In Touch" : "تواصل معنا"}
|
||||
description={lang === 'en' ? "Have questions about our collection or services?" : "هل لديك أسئلة حول مجموعتنا أو خدماتنا؟"}
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name" },
|
||||
{ name: "name", type: "text", placeholder: lang === 'en' ? "Full Name" : "الاسم الكامل" },
|
||||
{ name: "email", type: "email", placeholder: "Email Address" }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "How can we help you?" }}
|
||||
textarea={{ name: "message", placeholder: lang === 'en' ? "How can we help you?" : "كيف يمكننا مساعدتك؟" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
@@ -220,17 +130,11 @@ export default function LandingPage() {
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Contact", href: "#" },
|
||||
{ label: "EN / ES / FR (Language)", onClick: () => console.log("Switch Language") }
|
||||
{ label: lang === 'en' ? "About Us" : "من نحن", href: "#" },
|
||||
{ label: lang === 'en' ? "Contact" : "اتصل بنا", href: "#" },
|
||||
{ label: lang === 'en' ? "Switch to Arabic" : "تحويل إلى العربية", onClick: toggleLanguage }
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "FAQ", href: "#" },
|
||||
{ label: "Returns", href: "#" },
|
||||
],
|
||||
},
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f5f5;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #511f1f;
|
||||
--background: #fcf6ec;
|
||||
--card: #f3ede2;
|
||||
--foreground: #2e2521;
|
||||
--primary-cta: #2e2521;
|
||||
--primary-cta-text: #f5f5f5;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #e63946;
|
||||
--background-accent: #e8bea8;
|
||||
--accent: #b2a28b;
|
||||
--background-accent: #b2a28b;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user