bender/e1be0852-5b06-401b-a3b9-f78822db4053
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_4 into main

Browse Source 
Merge version_4 into main
This commit was merged in pull request #4.
This commit is contained in:
bender
2026-02-22 12:20:24 +00:00
parent 9c4cd78962 c2922db74c
commit a90397c965
7 changed files with 358 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/app/blog/page.tsx
View File

@@ -14,43 +14,45 @@ export default function BlogPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="pill"
contentWidth="medium" contentWidth="medium"
sizing="large" sizing="mediumLarge"
background="aurora" background="fluid"
cardStyle="inset" cardStyle="soft-shadow"
primaryButtonStyle="primary-glow" primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow" secondaryButtonStyle="glass"
headingFontWeight="light" headingFontWeight="bold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleApple <NavbarStyleApple
brandName="Hookah Haven" brandName="MyCo"
navItems={[ navItems={[
{ name: "Головна", id: "/" }, { name: "Home", id: "/" },
{ name: "Продукція", id: "/#products" }, { name: "About", id: "/#about" },
{ name: "Про нас", id: "/#about" }, { name: "Features", id: "/#features" },
{ name: "Особливості", id: "/#features" }, { name: "Products", id: "/#products" },
{ name: "Відгуки", id: "/#testimonials" }, { name: "Testimonials", id: "/#testimonials" },
{ name: "FAQ", id: "/#faq" }, { name: "FAQ", id: "/#faq" },
{ name: "Контакти", id: "/#contact" } { name: "Contact", id: "/#contact" },
{ name: "Blog", id: "/blog" },
{ name: "Shop", id: "/shop" }
]} ]}
/> />
</div> </div>
{isLoading ? ( {isLoading ? (
<div className="w-content-width mx-auto py-20 text-center"> <div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Завантаження дописів...</p> <p className="text-foreground">Loading blog posts...</p>
</div> </div>
) : ( ) : (
<div id="blog" data-section="blog"> <div id="blog" data-section="blog">
<BlogCardTwo <BlogCardTwo
blogs={posts} blogs={posts}
title="Останні статті" title="Latest Insights & Updates"
description="Ідеї та оновлення від нашої команди" description="Stay informed with our articles and news."
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
animationType="slide-up" animationType="slide-up"
@@ -60,25 +62,24 @@ export default function BlogPage() {
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseCard <FooterBaseCard
logoText="Hookah Haven" logoText="MyCo"
columns={[ columns={[
{ {
title: "Магазин", items: [ title: "Solutions", items: [
{ label: "Кальяни", href: "/#products" }, { label: "Products", href: "/#products" },
{ label: "Тютюн", href: "/#products" }, { label: "Features", href: "/#features" }
{ label: "Вугілля", href: "/#products" },
{ label: "Аксесуари", href: "/#products" }
] ]
}, },
{ {
title: "Компанія", items: [ title: "Company", items: [
{ label: "Про нас", href: "/#about" }, { label: "About Us", href: "/#about" },
{ label: "Blog", href: "/blog" },
{ label: "FAQ", href: "/#faq" }, { label: "FAQ", href: "/#faq" },
{ label: "Контакти", href: "/#contact" } { label: "Contact", href: "/#contact" }
] ]
} }
]} ]}
copyrightText="© 2024 Hookah Haven. Всі права захищені." copyrightText="© 2024 MyCo. All rights reserved."
/> />
</div> </div>
</ReactLenis> </ReactLenis>

29
src/app/layout.tsx
View File

@@ -1,24 +1,31 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Archivo } from "next/font/google"; import { DM_Sans } from "next/font/google";
import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper"; import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag"; import Tag from "@/tag/Tag";
const archivo = Archivo({ const dmSans = DM_Sans({
variable: "--font-archivo", subsets: ["latin"], variable: "--font-dm-sans", subsets: ["latin"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Hookah Haven | Кальяни преміум-класу, тютюн та аксесуари", description: "Відкрийте для себе найкращий вибір кальянів, преміальних тютюнових сумішей та необхідних аксесуарів у Hookah Haven. Підніміть свій досвід куріння вже сьогодні.", keywords: ["кальян", "шиша", "тютюн", "вугілля", "аксесуари для кальяну", "преміум кальян", "онлайн магазин кальянів"], title: "My Awesome Website | Innovative Solutions & Services", description: "Discover innovative solutions and services tailored for your needs. Explore our products, features, and client testimonials.", keywords: ["website", "solutions", "services", "innovative", "products", "features"],
openGraph: { openGraph: {
title: "Hookah Haven | Кальяни преміум-класу, тютюн та аксесуари", description: "Відкрийте для себе найкращий вибір кальянів, преміальних тютюнових сумішей та необхідних аксесуарів у Hookah Haven. Підніміть свій досвід куріння вже сьогодні.", url: "/", siteName: "Hookah Haven", images: [ title: "My Awesome Website | Innovative Solutions & Services", description: "Discover innovative solutions and services tailored for your needs. Explore our products, features, and client testimonials.", url: "/", siteName: "My Awesome Website", images: [
{ {
url: "https://img.b2bpic.net/free-photo/group-handsome-retro-welldressed-man-gangsters-spend-time-club-smoking-hookah-multiethnic-male-bachelor-mafia-party-restaurant_627829-12017.jpg", alt: "Елегантний кальянний набір з димом"}, url: "https://via.placeholder.com/1200x630.png?text=My+Awesome+Website", alt: "My Awesome Website Banner"
}
], ],
type: "website"}, type: "website"
twitter: {
card: "summary_large_image", title: "Hookah Haven | Кальяни преміум-класу, тютюн та аксесуари", description: "Відкрийте для себе найкращий вибір кальянів, преміальних тютюнових сумішей та необхідних аксесуарів у Hookah Haven. Підніміть свій досвід куріння вже сьогодні.", images: ["https://img.b2bpic.net/free-photo/group-handsome-retro-welldressed-man-gangsters-spend-time-club-smoking-hookah-multiethnic-male-bachelor-mafia-party-restaurant_627829-12017.jpg"],
}, },
twitter: {
card: "summary_large_image", title: "My Awesome Website | Innovative Solutions & Services", description: "Discover innovative solutions and services tailored for your needs. Explore our products, features, and client testimonials.", images: ["https://via.placeholder.com/1200x630.png?text=My+Awesome+Website"]
}
}; };
export default function RootLayout({ export default function RootLayout({
@@ -27,10 +34,10 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="uk" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<ServiceWrapper> <ServiceWrapper>
<body <body
className={`${archivo.variable} antialiased`} className={`${dmSans.variable} ${inter.variable} antialiased`}
> >
<Tag /> <Tag />
{children} {children}

194
src/app/page.tsx
View File

@@ -2,130 +2,142 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll'; import HeroLogo from '@/components/sections/hero/HeroLogo';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout'; import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne'; import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix'; import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive'; import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText'; import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactText from '@/components/sections/contact/ContactText'; import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Boxes, CheckCircle, Headphones } from 'lucide-react'; import { Phone } from 'lucide-react';
export default function LandingPage() { export default function LandingPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="pill"
contentWidth="medium" contentWidth="medium"
sizing="large" sizing="mediumLarge"
background="aurora" background="fluid"
cardStyle="inset" cardStyle="soft-shadow"
primaryButtonStyle="primary-glow" primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow" secondaryButtonStyle="glass"
headingFontWeight="light" headingFontWeight="bold"
> >
<main> <main>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleApple <NavbarStyleApple
brandName="Hookah Haven" brandName="MyCo"
navItems={[ navItems={[
{name: "Продукція", id: "products"}, {name: "Home", id: "/"},
{name: "Про нас", id: "about"}, {name: "About", id: "#about"},
{name: "Особливості", id: "features"}, {name: "Features", id: "#features"},
{name: "Відгуки", id: "testimonials"}, {name: "Products", id: "#products"},
{name: "FAQ", id: "faq"}, {name: "Testimonials", id: "#testimonials"},
{name: "Контакти", id: "contact"} {name: "FAQ", id: "#faq"},
{name: "Contact", id: "#contact"},
{name: "Blog", id: "/blog"},
{name: "Shop", id: "/shop"}
]} ]}
/> />
</div> </div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardScroll <HeroLogo
background={{ variant: "radial-gradient" }} logoText="MyCo"
title="Відчуйте найкращий кальян" description="Innovative solutions for a brighter future."
description="Відкрийте для себе преміум-вибір тютюну, кальянів та аксесуарів для неперевершеного досвіду куріння."
tag="Ваш найкращий кальянний напрямок"
buttons={[ buttons={[
{text: "Купити зараз", href: "#products"}, { text: "Get Started", href: "/#contact" },
{text: "Дізнатися більше", href: "#about"} { text: "Learn More", href: "/#about" }
]} ]}
imageSrc="https://img.b2bpic.net/free-photo/group-handsome-retro-welldressed-man-gangsters-spend-time-club-smoking-hookah-multiethnic-male-bachelor-mafia-party-restaurant_627829-12017.jpg" imageSrc="https://via.placeholder.com/1920x1080.png?text=Modern+Business"
imageAlt="Елегантний кальянний набір з димом" imageAlt="Modern business cityscape"
tagAnimation="blur-reveal" showDimOverlay={true}
buttonAnimation="blur-reveal"
/> />
</div> </div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<TextSplitAbout <MediaSplitTabsAbout
title="Наша пристрасть до кальяну" title="Our Story & Vision"
description={[ description="We are dedicated to building innovative solutions that empower businesses and individuals."
"У Hookah Haven ми прагнемо забезпечити ентузіастів продукцією найвищої якості. Від рідкісних тютюнових сумішей до вишуканих кальянів та необхідних аксесуарів, ми ретельно підбираємо нашу колекцію, щоб кожна затяжка приносила задоволення.", "Ми віримо у покращення ваших моментів відпочинку та соціального спілкування за допомогою чудового кальяну. Наша відданість досконалості гарантує неперевершений досвід." tabs={[
{ id: "mission", label: "Our Mission", description: "To deliver cutting-edge technology and exceptional service that drives success." },
{ id: "values", label: "Our Values", description: "Integrity, innovation, customer focus, and collaboration are at the core of everything we do." },
{ id: "team", label: "Our Team", description: "A passionate group of experts committed to excellence and achieving remarkable results." }
]} ]}
imageSrc="https://via.placeholder.com/800x600.png?text=Team+Collaboration"
imageAlt="Team collaborating in an office"
imagePosition="right"
mediaAnimation="slide-up"
useInvertedBackground={false} useInvertedBackground={false}
showBorder={true}
buttons={[{ text: "Наша історія", href: "#about" }]}
/> />
</div> </div>
<div id="products" data-section="products"> <div id="products" data-section="products">
<ProductCardOne <ProductCardTwo
title="Рекомендовані товари" title="Our Featured Products"
description="Ознайомтеся з нашою відібраною колекцією преміальних кальянів, вишуканого тютюну та необхідних аксесуарів." description="Explore a selection of our most popular and innovative products designed to meet your needs."
products={[ products={[
{id: "1", name: "Розкішний скляний кальян", price: "$249.99", imageSrc: "https://img.b2bpic.net/free-photo/meduza-hookah-with-cockatails-side-view_140725-9140.jpg", imageAlt: "Розкішна скляна кальянна трубка"}, { id: "1", brand: "TechInnovate", name: "AI Assistant Pro", price: "$199.99", rating: 5, reviewCount: "1.2k", imageSrc: "https://via.placeholder.com/400x400.png?text=AI+Assistant" },
{id: "2", name: "Екзотичні тютюнові суміші", price: "$19.99", imageSrc: "https://img.b2bpic.net/free-photo/fresh-shisha-woman-hands_140725-1338.jpg", imageAlt: "Барвисті упаковки екзотичних тютюнових сумішей"}, { id: "2", brand: "FutureGadgets", name: "Smart Home Hub", price: "$249.00", rating: 4, reviewCount: "850", imageSrc: "https://via.placeholder.com/400x400.png?text=Smart+Home" },
{id: "3", name: "Натуральне кокосове вугілля", price: "$12.99", imageSrc: "https://img.b2bpic.net/free-photo/close-up-hookah-vaping_23-2149297183.jpg", imageAlt: "Купка натурального кокосового вугілля"}, { id: "3", brand: "InnovateCo", name: "Cloud Storage Plus", price: "$49.99", rating: 4, reviewCount: "3.5k", imageSrc: "https://via.placeholder.com/400x400.png?text=Cloud+Storage" },
{id: "4", name: "Преміум шланг для кальяну", price: "$34.99", imageSrc: "https://img.b2bpic.net/free-photo/hookah-still-life-composition_23-2149213330.jpg", imageAlt: "Преміум шланг для кальяну"} { id: "4", brand: "FutureTech", name: "Eco-Friendly Charger", price: "$29.99", rating: 5, reviewCount: "2.1k", imageSrc: "https://via.placeholder.com/400x400.png?text=Eco+Charger" }
]} ]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up" animationType="slide-up"
gridVariant="three-columns-all-equal-width" useInvertedBackground={true}
useInvertedBackground={false}
textboxLayout="default" textboxLayout="default"
/> />
</div> </div>
<div id="features" data-section="features"> <div id="features" data-section="features">
<FeatureCardTwentySix <FeatureCardThree
title="Чому обирають Hookah Haven?" title="Key Features That Set Us Apart"
description="Ми пропонуємо неперевершений вибір, гарантію якості та віддану підтримку клієнтів для покращення вашого кальянного досвіду." description="Discover the core functionalities and benefits that make our solutions stand out."
features={[ features={[
{title: "Неперевершена якість", description: "Лише найкращі матеріали та інгредієнти потрапляють до нашого асортименту, гарантуючи неперевершений досвід.", imageSrc: "https://img.b2bpic.net/free-photo/suitmaker-tailor-cutting-fabric_482257-78193.jpg", imageAlt: "Крупний план добре виготовленого компонента кальяну", buttonIcon: CheckCircle}, { id: "01", title: "Advanced Analytics", description: "Gain deep insights with our powerful and intuitive analytics dashboard.", imageSrc: "https://via.placeholder.com/600x400.png?text=Analytics" },
{title: "Широкий асортимент", description: "Від класичних дизайнів до сучасних інновацій, знайдіть ідеальний кальян та тютюн на свій смак.", imageSrc: "https://img.b2bpic.net/free-photo/supermarket-banner-with-various-items_23-2149501012.jpg", imageAlt: "Різноманітний асортимент кальянів та тютюнових коробок", buttonIcon: Boxes}, { id: "02", title: "Seamless Integration", description: "Connect effortlessly with your existing tools and workflows.", imageSrc: "https://via.placeholder.com/600x400.png?text=Integration" },
{title: "Професійна підтримка клієнтів", description: "Наша обізнана команда готова допомогти вам з будь-якими питаннями чи рекомендаціями.", imageSrc: "https://img.b2bpic.net/free-photo/smiling-call-center-manager-providing-guidance-intern-addressing-questions_482257-125804.jpg", imageAlt: "Представник служби підтримки клієнтів допомагає клієнту", buttonIcon: Headphones} { id: "03", title: "24/7 Support", description: "Our dedicated support team is always here to help you succeed.", imageSrc: "https://via.placeholder.com/600x400.png?text=Support" }
]} ]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
useInvertedBackground={false}
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true}
/> />
</div> </div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardFive <TestimonialCardOne
title="Що кажуть наші клієнти" title="What Our Clients Say"
description="Послухайте від задоволених ентузіастів, які відчули різницю Hookah Haven." description="Hear directly from our satisfied customers about their experience with our services."
testimonials={[ testimonials={[
{id: "1", name: "Омар Аль-Хасан, Знавець", date: "Date: 15 May 2024", title: "Просто найкращі!", quote: "Hookah Haven забезпечує якість та різноманітність. Моє улюблене місце для всіх потреб шиші.", tag: "Преміум досвід", avatarSrc: "https://img.b2bpic.net/free-photo/man-relaxing-by-vaping-from-hookah-bar_23-2149191823.jpg", imageSrc: "https://img.b2bpic.net/free-photo/man-relaxing-by-vaping-from-hookah-bar_23-2149191823.jpg", imageAlt: "Задоволений клієнт насолоджується кальяном"}, { id: "1", name: "Alice Wonderland", role: "CEO, InnovateCo", company: "Tech Solutions", rating: 5, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+1" },
{id: "2", name: "Лейла Хан, Власниця лаунжу", date: "Date: 20 April 2024", title: "Підвищили мій бізнес", quote: "Їх опції вугілля та тютюну просто фантастичні. Мої клієнти в захваті від якості!", tag: "Бізнес-партнер", avatarSrc: "https://img.b2bpic.net/free-photo/stylish-beard-arabian-man-glasses-military-jacket-smoking-hookah-street-bar-arab-model-having-rest-taking-selfie-phone_627829-2773.jpg", imageSrc: "https://img.b2bpic.net/free-photo/stylish-beard-arabian-man-glasses-military-jacket-smoking-hookah-street-bar-arab-model-having-rest-taking-selfie-phone_627829-2773.jpg", imageAlt: "Власниця лаунжу посміхається"}, { id: "2", name: "Bob The Builder", role: "Founder, ConstructCo", company: "Design Agency", rating: 4, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+2" },
{id: "3", name: "Ахмед Малік, Соціальний курець", date: "Date: 10 March 2024", title: "Відмінний вибір та сервіс", quote: "Знайшов тут свою нову улюблену суміш. Персонал був неймовірно корисним та доброзичливим.", tag: "Новий фаворит", avatarSrc: "https://img.b2bpic.net/free-photo/girl-vaping_1303-5744.jpg", imageSrc: "https://img.b2bpic.net/free-photo/girl-vaping_1303-5744.jpg", imageAlt: "Людина насолоджується кальянною сесією"}, { id: "3", name: "Charlie Chaplin", role: "Manager, Creative Hub", company: "Media Group", rating: 5, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+3" }
{id: "4", name: "Сара Джафарі, Ентузіастка", date: "Date: 02 February 2024", title: "Неперевершена якість!", quote: "Кальяни приголомшливі та працюють бездоганно. Безумовно, варті кожної копійки.", tag: "Високоякісне обладнання", avatarSrc: "https://img.b2bpic.net/free-photo/people-enjoying-night-out-together_23-2149173623.jpg", imageSrc: "https://img.b2bpic.net/free-photo/people-enjoying-night-out-together_23-2149173623.jpg", imageAlt: "Жінка милується кальяном"}
]} ]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
useInvertedBackground={true}
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false}
/> />
</div> </div>
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqSplitText <FaqSplitMedia
sideTitle="Часті питання" title="Frequently Asked Questions"
description="Find quick answers to the most common questions about our products and services."
faqs={[ faqs={[
{id: "1", title: "Який тютюн ви пропонуєте?", content: "Ми пропонуємо широкий асортимент преміального тютюну для кальяну, включаючи традиційні, сучасні та екзотичні суміші від провідних світових брендів."}, { id: "1", title: "How does your service work?", content: "Our service provides seamless integration with your existing systems, ensuring a smooth transition and minimal disruption." },
{id: "2", title: "Чи здійснюєте ви міжнародну доставку?", content: "Наразі ми здійснюємо доставку лише в межах [Вашої країни/регіону]. Будь ласка, перегляньте нашу політику доставки для отримання додаткової інформації."}, { id: "2", title: "What is your pricing model?", content: "We offer flexible pricing tiers designed to fit businesses of all sizes, from startups to large enterprises." },
{id: "3", title: "Як доглядати за новим кальяном?", content: "Кожен кальян поставляється з інструкціями по догляду. Зазвичай, найкраще чистити всі компоненти після кожного використання теплою водою та щіткою."}, { id: "3", title: "Can I customize the features?", content: "Yes, our platform is highly customizable, allowing you to tailor features to your specific business needs." },
{id: "4", title: "Яка ваша політика повернення?", content: "Ми приймаємо повернення протягом 30 днів з моменту покупки для невикористаних та нерозпакованих товарів. Детальну інформацію дивіться в нашій повній політиці повернення."} { id: "4", title: "Do you offer support?", content: "Absolutely! We provide 24/7 customer support via chat, email, and phone to assist you with any inquiries." }
]} ]}
textPosition="left" imageSrc="https://via.placeholder.com/800x600.png?text=FAQ+Support"
imageAlt="Customer support representatives"
mediaAnimation="slide-up"
mediaPosition="left"
faqsAnimation="slide-up" faqsAnimation="slide-up"
useInvertedBackground={false} useInvertedBackground={false}
animationType="smooth" animationType="smooth"
@@ -133,35 +145,37 @@ export default function LandingPage() {
</div> </div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactText <ContactFaq
text="Готові покращити свій кальянний досвід? Зв'яжіться з нашою командою для персоналізованих рекомендацій або будь-яких запитів." ctaTitle="Ready to Start?"
buttons={[ ctaDescription="Get in touch with our team today to discuss your project and discover how we can help."
{text: "Зв'язатися з нами", href: "/contact"}, ctaButton={{ text: "Contact Us Now", href: "/#contact" }}
{text: "Купити всю продукцію", href: "#products"} ctaIcon={Phone}
faqs={[
{ id: "1", title: "What are your office hours?", content: "Our support team is available Monday to Friday, 9 AM to 5 PM EST." },
{ id: "2", title: "Where are you located?", content: "We operate globally with a primary office in a major tech hub. Contact us for specific details." },
{ id: "3", title: "How quickly do you respond?", content: "We aim to respond to all inquiries within 24 business hours." }
]} ]}
animationType="reveal-blur"
background={{ variant: "radial-gradient" }}
useInvertedBackground={true} useInvertedBackground={true}
animationType="slide-up"
/> />
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseCard <FooterBaseCard
logoText="Hookah Haven" logoText="MyCo"
columns={[ columns={[
{title: "Магазин", items: [ {title: "Solutions", items: [
{label: "Кальяни", href: "#products"}, {label: "Products", href: "/#products"},
{label: "Тютюн", href: "#products"}, {label: "Features", href: "/#features"}
{label: "Вугілля", href: "#products"},
{label: "Аксесуари", href: "#products"}
]}, ]},
{title: "Компанія", items: [ {title: "Company", items: [
{label: "Про нас", href: "#about"}, {label: "About Us", href: "/#about"},
{label: "FAQ", href: "#faq"}, {label: "Blog", href: "/blog"},
{label: "Контакти", href: "#contact"} {label: "FAQ", href: "/#faq"},
{label: "Contact", href: "/#contact"}
]} ]}
]} ]}
copyrightText="© 2024 Hookah Haven. Всі права захищені." copyrightText="© 2024 MyCo. All rights reserved."
/> />
</div> </div>
</main> </main>

171
src/app/shop/[id]/page.tsx
View File

@@ -77,41 +77,60 @@ function ProductPageContent({ params }: ProductPageProps) {
if (isLoading) { if (isLoading) {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="pill"
contentWidth="medium" contentWidth="medium"
sizing="large" sizing="mediumLarge"
background="aurora" background="fluid"
cardStyle="inset" cardStyle="soft-shadow"
primaryButtonStyle="primary-glow" primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow" secondaryButtonStyle="glass"
headingFontWeight="light" headingFontWeight="bold"
> >
<ReactLenis root> <ReactLenis root>
<div id="navbar" data-section="navbar"> <div id="navbar" data-section="navbar">
<NavbarStyleApple <NavbarStyleApple
brandName="Hookah Haven" brandName="MyCo"
navItems={[ navItems={[
{ name: "Головна", id: "/" }, { name: "Home", id: "/" },
{ name: "Магазин", id: "/shop" } { name: "About", id: "/#about" },
{ name: "Features", id: "/#features" },
{ name: "Products", id: "/#products" },
{ name: "Testimonials", id: "/#testimonials" },
{ name: "FAQ", id: "/#faq" },
{ name: "Contact", id: "/#contact" },
{ name: "Blog", id: "/blog" },
{ name: "Shop", id: "/shop" }
]} ]}
button={{ text: "Кошик", onClick: () => setCartOpen(true) }} button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/> />
</div> </div>
<main className="min-h-screen flex items-center justify-center pt-20"> <main className="min-h-screen flex items-center justify-center pt-20">
<div id="loading-indicator" data-section="loading-indicator"> <div id="loading-indicator" data-section="loading-indicator">
<p className="text-foreground">Завантаження товару...</p> <p className="text-foreground">Loading product...</p>
</div> </div>
</main> </main>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseCard <FooterBaseCard
logoText="Hookah Haven" logoText="MyCo"
columns={[ columns={[
{ title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] }, {
{ title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", href: "#contact" }] } title: "Solutions", items: [
{ label: "Products", href: "/#products" },
{ label: "Features", href: "/#features" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Blog", href: "/blog" },
{ label: "FAQ", href: "/#faq" },
{ label: "Contact", href: "/#contact" }
]
}
]} ]}
copyrightText="© 2024 Hookah Haven. Всі права захищені." copyrightText="© 2024 MyCo. All rights reserved."
/> />
</div> </div>
</ReactLenis> </ReactLenis>
@@ -122,47 +141,66 @@ function ProductPageContent({ params }: ProductPageProps) {
if (!product) { if (!product) {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="pill"
contentWidth="medium" contentWidth="medium"
sizing="large" sizing="mediumLarge"
background="aurora" background="fluid"
cardStyle="inset" cardStyle="soft-shadow"
primaryButtonStyle="primary-glow" primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow" secondaryButtonStyle="glass"
headingFontWeight="light" headingFontWeight="bold"
> >
<ReactLenis root> <ReactLenis root>
<div id="navbar" data-section="navbar"> <div id="navbar" data-section="navbar">
<NavbarStyleApple <NavbarStyleApple
brandName="Hookah Haven" brandName="MyCo"
navItems={[ navItems={[
{ name: "Головна", id: "/" }, { name: "Home", id: "/" },
{ name: "Магазин", id: "/shop" } { name: "About", id: "/#about" },
{ name: "Features", id: "/#features" },
{ name: "Products", id: "/#products" },
{ name: "Testimonials", id: "/#testimonials" },
{ name: "FAQ", id: "/#faq" },
{ name: "Contact", id: "/#contact" },
{ name: "Blog", id: "/blog" },
{ name: "Shop", id: "/shop" }
]} ]}
button={{ text: "Кошик", onClick: () => setCartOpen(true) }} button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/> />
</div> </div>
<main className="min-h-screen flex items-center justify-center pt-20"> <main className="min-h-screen flex items-center justify-center pt-20">
<div id="not-found" data-section="not-found" className="text-center"> <div id="not-found" data-section="not-found" className="text-center">
<p className="text-foreground mb-4">Товар не знайдено</p> <p className="text-foreground mb-4">Product not found</p>
<button <button
onClick={() => router.push("/shop")} onClick={() => router.push("/shop")}
className="primary-button px-6 py-2 rounded-theme text-primary-cta-text" className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
> >
Повернутися до магазину Back to Shop
</button> </button>
</div> </div>
</main> </main>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseCard <FooterBaseCard
logoText="Hookah Haven" logoText="MyCo"
columns={[ columns={[
{ title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] }, {
{ title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", href: "#contact" }] } title: "Solutions", items: [
{ label: "Products", href: "/#products" },
{ label: "Features", href: "/#features" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Blog", href: "/blog" },
{ label: "FAQ", href: "/#faq" },
{ label: "Contact", href: "/#contact" }
]
}
]} ]}
copyrightText="© 2024 Hookah Haven. Всі права захищені." copyrightText="© 2024 MyCo. All rights reserved."
/> />
</div> </div>
</ReactLenis> </ReactLenis>
@@ -172,26 +210,33 @@ function ProductPageContent({ params }: ProductPageProps) {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="pill"
contentWidth="medium" contentWidth="medium"
sizing="large" sizing="mediumLarge"
background="aurora" background="fluid"
cardStyle="inset" cardStyle="soft-shadow"
primaryButtonStyle="primary-glow" primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow" secondaryButtonStyle="glass"
headingFontWeight="light" headingFontWeight="bold"
> >
<ReactLenis root> <ReactLenis root>
<div id="navbar" data-section="navbar"> <div id="navbar" data-section="navbar">
<NavbarStyleApple <NavbarStyleApple
brandName="Hookah Haven" brandName="MyCo"
navItems={[ navItems={[
{ name: "Головна", id: "/" }, { name: "Home", id: "/" },
{ name: "Магазин", id: "/shop" } { name: "About", id: "/#about" },
{ name: "Features", id: "/#features" },
{ name: "Products", id: "/#products" },
{ name: "Testimonials", id: "/#testimonials" },
{ name: "FAQ", id: "/#faq" },
{ name: "Contact", id: "/#contact" },
{ name: "Blog", id: "/blog" },
{ name: "Shop", id: "/shop" }
]} ]}
button={{ text: "Кошик", onClick: () => setCartOpen(true) }} button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/> />
</div> </div>
<div id="product-detail-card" data-section="product-detail-card"> <div id="product-detail-card" data-section="product-detail-card">
@@ -210,8 +255,8 @@ function ProductPageContent({ params }: ProductPageProps) {
inventoryQuantity={meta.inventoryQuantity} inventoryQuantity={meta.inventoryQuantity}
sku={meta.sku} sku={meta.sku}
buttons={[ buttons={[
{ text: "Додати до кошика", onClick: handleAddToCart }, { text: "Add to Cart", onClick: handleAddToCart },
{ text: "Купити зараз", onClick: handleBuyNow } { text: "Buy Now", onClick: handleBuyNow }
]} ]}
/> />
</div> </div>
@@ -225,19 +270,31 @@ function ProductPageContent({ params }: ProductPageProps) {
total={`$${cartTotal}`} total={`$${cartTotal}`}
buttons={[ buttons={[
{ {
text: isCheckoutLoading ? "Обробка..." : "Оформити замовлення", onClick: handleCheckout, text: isCheckoutLoading ? "Processing..." : "Checkout", onClick: handleCheckout,
}, },
]} ]}
/> />
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseCard <FooterBaseCard
logoText="Hookah Haven" logoText="MyCo"
columns={[ columns={[
{ title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] }, {
{ title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", href: "#contact" }] } title: "Solutions", items: [
{ label: "Products", href: "/#products" },
{ label: "Features", href: "/#features" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Blog", href: "/blog" },
{ label: "FAQ", href: "/#faq" },
{ label: "Contact", href: "/#contact" }
]
}
]} ]}
copyrightText="© 2024 Hookah Haven. Всі права захищені." copyrightText="© 2024 MyCo. All rights reserved."
/> />
</div> </div>
</ReactLenis> </ReactLenis>

114
src/app/shop/page.tsx
View File

@@ -44,39 +44,58 @@ function ShopPageContent() {
if (isLoading) { if (isLoading) {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="pill"
contentWidth="medium" contentWidth="medium"
sizing="large" sizing="mediumLarge"
background="aurora" background="fluid"
cardStyle="inset" cardStyle="soft-shadow"
primaryButtonStyle="primary-glow" primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow" secondaryButtonStyle="glass"
headingFontWeight="light" headingFontWeight="bold"
> >
<ReactLenis root> <ReactLenis root>
<div id="navbar" data-section="navbar"> <div id="navbar" data-section="navbar">
<NavbarStyleApple <NavbarStyleApple
brandName="Hookah Haven" brandName="MyCo"
navItems={[ navItems={[
{ name: "Головна", id: "/" }, { name: "Home", id: "/" },
{ name: "Магазин", id: "/shop" } { name: "About", id: "/#about" },
{ name: "Features", id: "/#features" },
{ name: "Products", id: "/#products" },
{ name: "Testimonials", id: "/#testimonials" },
{ name: "FAQ", id: "/#faq" },
{ name: "Contact", id: "/#contact" },
{ name: "Blog", id: "/blog" },
{ name: "Shop", id: "/shop" }
]} ]}
button={{ text: "Кошик", onClick: () => setCartOpen(true) }} button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/> />
</div> </div>
<main className="min-h-screen flex items-center justify-center pt-20"> <main className="min-h-screen flex items-center justify-center pt-20">
<p className="text-foreground">Завантаження товарів...</p> <p className="text-foreground">Loading products...</p>
</main> </main>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseCard <FooterBaseCard
logoText="Hookah Haven" logoText="MyCo"
columns={[ columns={[
{ title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] }, {
{ title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", href: "#contact" }] } title: "Solutions", items: [
{ label: "Products", href: "/#products" },
{ label: "Features", href: "/#features" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Blog", href: "/blog" },
{ label: "FAQ", href: "/#faq" },
{ label: "Contact", href: "/#contact" }
]
}
]} ]}
copyrightText="© 2024 Hookah Haven. Всі права захищені." copyrightText="© 2024 MyCo. All rights reserved."
/> />
</div> </div>
</ReactLenis> </ReactLenis>
@@ -86,26 +105,33 @@ function ShopPageContent() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="pill"
contentWidth="medium" contentWidth="medium"
sizing="large" sizing="mediumLarge"
background="aurora" background="fluid"
cardStyle="inset" cardStyle="soft-shadow"
primaryButtonStyle="primary-glow" primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow" secondaryButtonStyle="glass"
headingFontWeight="light" headingFontWeight="bold"
> >
<ReactLenis root> <ReactLenis root>
<div id="navbar" data-section="navbar"> <div id="navbar" data-section="navbar">
<NavbarStyleApple <NavbarStyleApple
brandName="Hookah Haven" brandName="MyCo"
navItems={[ navItems={[
{ name: "Головна", id: "/" }, { name: "Home", id: "/" },
{ name: "Магазин", id: "/shop" } { name: "About", id: "/#about" },
{ name: "Features", id: "/#features" },
{ name: "Products", id: "/#products" },
{ name: "Testimonials", id: "/#testimonials" },
{ name: "FAQ", id: "/#faq" },
{ name: "Contact", id: "/#contact" },
{ name: "Blog", id: "/blog" },
{ name: "Shop", id: "/shop" }
]} ]}
button={{ text: "Кошик", onClick: () => setCartOpen(true) }} button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/> />
</div> </div>
<div id="product-catalog" data-section="product-catalog"> <div id="product-catalog" data-section="product-catalog">
@@ -114,9 +140,9 @@ function ShopPageContent() {
products={products} products={products}
searchValue={search} searchValue={search}
onSearchChange={setSearch} onSearchChange={setSearch}
searchPlaceholder="Пошук товарів..." searchPlaceholder="Search products..."
filters={filters} filters={filters}
emptyMessage="Товари не знайдено" emptyMessage="No products found"
/> />
</div> </div>
<div id="product-cart" data-section="product-cart"> <div id="product-cart" data-section="product-cart">
@@ -129,19 +155,31 @@ function ShopPageContent() {
total={`$${cartTotal}`} total={`$${cartTotal}`}
buttons={[ buttons={[
{ {
text: isCheckoutLoading ? "Обробка..." : "Оформити замовлення", onClick: handleCheckout, text: isCheckoutLoading ? "Processing..." : "Checkout", onClick: handleCheckout,
}, },
]} ]}
/> />
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseCard <FooterBaseCard
logoText="Hookah Haven" logoText="MyCo"
columns={[ columns={[
{ title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] }, {
{ title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", href: "#contact" }] } title: "Solutions", items: [
{ label: "Products", href: "/#products" },
{ label: "Features", href: "/#features" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Blog", href: "/blog" },
{ label: "FAQ", href: "/#faq" },
{ label: "Contact", href: "/#contact" }
]
}
]} ]}
copyrightText="© 2024 Hookah Haven. Всі права захищені." copyrightText="© 2024 MyCo. All rights reserved."
/> />
</div> </div>
</ReactLenis> </ReactLenis>

4
src/app/styles/base.css
View File

@@ -11,7 +11,7 @@ html {
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: var(--font-archivo), sans-serif; font-family: var(--font-inter), sans-serif;
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
overscroll-behavior: none; overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: var(--font-archivo), sans-serif; font-family: var(--font-dm-sans), sans-serif;
} }

28
src/app/styles/variables.css
View File

@@ -2,23 +2,23 @@
/* Base units */ /* Base units */
/* --vw is set by ThemeProvider */ /* --vw is set by ThemeProvider */
/* --background: #0a0a0a;; /* --background: #f5faff;;
--card: #1a1a1a;; --card: #f1f8ff;;
--foreground: #ffffffe6;; --foreground: #001122;;
--primary-cta: #e6e6e6;; --primary-cta: #15479c;;
--secondary-cta: #1a1a1a;; --secondary-cta: #ffffff;;
--accent: #737373;; --accent: #a8cce8;;
--background-accent: #737373;; */ --background-accent: #7ba3cf;; */
--background: #0a0a0a;; --background: #f5faff;;
--card: #1a1a1a;; --card: #f1f8ff;;
--foreground: #ffffffe6;; --foreground: #001122;;
--primary-cta: #e6e6e6;; --primary-cta: #15479c;;
--primary-cta-text: #0a0a0a;; --primary-cta-text: #0a0a0a;;
--secondary-cta: #1a1a1a;; --secondary-cta: #ffffff;;
--secondary-cta-text: #ffffffe6;; --secondary-cta-text: #ffffffe6;;
--accent: #737373;; --accent: #a8cce8;;
--background-accent: #737373;; --background-accent: #7ba3cf;;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);