grand commit

app/[locale]/(root)/(shop)/about-us/page.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+
+export default function AboutUsPage() {
+	return (
+		<div className='mb-12 mt-8'>
+			<div className='container max-w-[922px] text-lg text-brand-violet-950'>
+				<h1 className='text-3xl font-bold text-brand-violet'>
+					Bewell: здоровий спосіб життя для всіх
+				</h1>
+				<div className='py-4'>
+					<strong>Інтернет-магазин біологічних добавок Bewell</strong> — це
+					зручна і надійна крамниця для всіх, хто піклується про здоров’я. У нас
+					ви знайдете якісні дієтичні добавки від європейських виробників і
+					зможете подбати про себе і про рідних без зайвих клопотів.
+				</div>
+
+				<h2 className='my-4 text-2xl font-bold text-brand-violet'>
+					Асортимент магазину <strong>Bewell</strong>
+				</h2>
+				<p>
+					У нас є все, що потрібно для профілактики різноманітних захворювань та
+					підтримки здоров’я. Це комплексні препарати, у складі яких
+					переважають:
+				</p>
+				<ul className='my-4 ml-12 list-disc'>
+					<li>екстракти рослин;</li>
+					<li>мікро- та макроелементи;</li>
+					<li>вітаміни.</li>
+				</ul>
+				<p>
+					Усі ці компоненти необхідно споживати щоденно, щоб отримати добову
+					норму вітамінів, мікро- та макроелементів. Дієтичні добавки — просте
+					доповнення до харчування, яке забезпечує організм необхідними
+					поживними речовинами.
+				</p>
+				<p>
+					Щоб визначитися, яка з добавок підійде саме вам, пропонуємо зануритися
+					в наш каталог і вибрати відповідний розділ:
+				</p>
+				<ul className='my-4 ml-12 list-decimal'>
+					<li>
+						Комплексні препарати. Універсальні добавки для поліпшення здоров’я.
+						Це вітаміни та мікроелементи для волосся, шкіри, підтримки
+						імунітету, серця, нервової системи, травлення тощо.
+					</li>
+					<li>
+						Добавки для підтримки жіночого здоров’я (
+						<strong>вітаміни для жінок</strong>). Це зокрема препарати для
+						відновлення менструального циклу, для полегшення симптомів
+						менопаузи.
+					</li>
+					<li>
+						Добавки для підтримки здоров’я чоловіків (
+						<strong>вітаміни для чоловіків</strong>). Препарати для покращення
+						статевої функції, здоров’я передміхурової залози.
+					</li>
+					<li>
+						Препарати для зміцнення імунітету. Такі добавки корисні не лише для
+						відновлення після захворювання та лікування, а також для
+						профілактики захворювань.
+					</li>
+					<li>
+						Добавки для відновлення енергії. Ці засоби допомагають боротися з
+						втомою, покращують обмін речовин, допомагають почуватися енергійніше
+						та краще спати.{' '}
+					</li>
+				</ul>
+				<h2 className='my-4 text-2xl font-bold text-brand-violet'>
+					Як замовити якісні дієтичні добавки?
+				</h2>
+				<p>
+					В <strong>Bewell</strong> можна замовити продукцію відомих
+					європейських виробників. Дієтичні добавки не є лікарськими засобами,
+					але це хороша профілактика захворювань та підтримки здоров’я.
+					Препарати, представлені в нашому магазині, можна побачити в
+					асортименті аптек, адже це перевірена продукція, яка успішно
+					використовується на лише в Україні, а й в Європі. Щоб зробити
+					замовлення, виберіть потрібний препарат, додайте до кошика та зазначте
+					умови відправки та оплати.
+				</p>
+				<h2 className='my-4 text-2xl font-bold text-brand-violet'>
+					Bewell: наша філософія та принцип роботи
+				</h2>
+				<p>
+					Головний пріоритет <strong>Bewell</strong> — підтримка здорового
+					способу життя. Ми віримо, що ключ до гарного самопочуття та довголіття
+					можна знайти в природі, збалансованому харчуванні та усвідомлений
+					підтримці організму. Саме тому ми прагнемо допомогти кожному клієнту
+					знайти найкращі добавки для підтримки організму та профілактики
+					захворювань.
+				</p>
+				<p>
+					Ми дбаємо про чесність і прозорість — пропонуємо лише сертифіковані,
+					перевірені добавки, які сприяють зміцненню імунітету, відновленню
+					енергії та покращенню сну, а також — внутрішній гармонії.
+				</p>
+			</div>
+		</div>
+	)
+}

app/[locale]/(root)/(shop)/cart/page.tsx

@@ -16,13 +16,15 @@ export default function Cart() {
 	return (
 		<div className='mt-1'>
 			<div className='container'>
-				<section className='mx-auto my-8 max-w-[640px] text-brand-violet'>
-					<h1 className='text-3xl font-bold'>{t('basket')}</h1>
-					<div className='bsdg-brand-violet-200 my-4 grid grid-cols-3 gap-4 border-t-2 border-brand-violet py-4'>
-						<div className='bg-brand-violet-100'>Назва</div>
-						<div className='bg-brand-violet-100'>Кількість</div>
-						<div className='bg-brand-violet-100'>Вартість</div>
-					</div>
+				<section className='bw-cart-wrapper mx-auto my-8 max-w-[640px] text-brand-violet'>
+					<h1 className='mb-6 border-b border-b-brand-violet pb-6 text-3xl font-bold'>
+						{t('basket')}
+					</h1>
+					<header className='flex text-xl'>
+						<div className='col'>{t('title')}</div>
+						<div className='flex-none'>{t('quantity')}</div>
+						<div className='col text-right'>{t('amount')}</div>
+					</header>
 					<CartItems />
 				</section>
 			</div>

app/[locale]/(root)/(shop)/catalog/page.tsx

@@ -0,0 +1,22 @@
+import {getCatalogIndexData} from '@prisma/client/sql'
+import {getLocale} from 'next-intl/server'
+import {notFound} from 'next/navigation'
+
+import CategoryPageIndex from '@/components/pages/category/page'
+import {CategoryPageSqlSchema} from '@/lib/data/models/sqlSchemas'
+import {db} from '@/lib/db/prisma/client'
+
+export default async function CatalogPage({
+	params
+}: {
+	params: Promise<{slug?: string}>
+}) {
+	const loc = await getLocale()
+	const catalog: CategoryPageSqlSchema[] = await db.$queryRawTyped(
+		getCatalogIndexData(loc)
+	)
+
+	if (catalog.length < 1) notFound()
+
+	return <CategoryPageIndex data={catalog} />
+}

app/[locale]/(root)/(shop)/category/[[...slug]]/page.tsx

@@ -0,0 +1,22 @@
+import {getCategoryBySlugWitData} from '@prisma/client/sql'
+import {notFound} from 'next/navigation'
+
+import CategoryPageIndex from '@/components/pages/category/page'
+import {CategoryPageSqlSchema} from '@/lib/data/models/sqlSchemas'
+import {db} from '@/lib/db/prisma/client'
+
+export default async function Categories({
+	params
+}: {
+	params: Promise<{slug?: string}>
+}) {
+	const {slug} = await params
+	const [uri] = slug || []
+	const category: CategoryPageSqlSchema[] = await db.$queryRawTyped(
+		getCategoryBySlugWitData(uri)
+	)
+
+	if (category.length < 2) notFound()
+
+	return <CategoryPageIndex data={category} />
+}

app/[locale]/(root)/page.tsx

@@ -1,11 +1,16 @@
+import {getCatalogIndexData} from '@prisma/client/sql'
+import {getLocale} from 'next-intl/server'
 import Image from 'next/image'
 
 import FeatureCards from '@/components/shared/home/feature-cards'
 import {HomeCarousel} from '@/components/shared/home/home-carousel'
 import AppCatalog from '@/components/shared/sidebar/app-catalog'
+import FeatureCardFront from '@/components/shared/store/feature-card-front'
 import {carousels} from '@/lib/data'
+import {CategoryPageSqlSchema} from '@/lib/data/models/sqlSchemas'
 import {db} from '@/lib/db/prisma/client'
 import {dump} from '@/lib/utils'
+import mainFallback from '@/public/main-fallback.jpg'
 import image from '@/public/uploads/products/IMG_6572.jpg'
 
 // const storeModel = async (id: any) => {
@@ -26,6 +31,11 @@ import image from '@/public/uploads/products/IMG_6572.jpg'
 // }
 
 export default async function HomePage() {
+	const loc = await getLocale()
+	const catalog: CategoryPageSqlSchema[] = await db.$queryRawTyped(
+		getCatalogIndexData(loc)
+	)
+
 	return (
 		<>
 			<div className='mt-1'>
@@ -34,18 +44,27 @@ export default async function HomePage() {
 						<AppCatalog />
 					</section>
 					<div className='bw-layout-col-right pt-3'>
-						{/*<pre>{dump(await storeModel(1))}</pre>*/}
 						<section className='w-full'>
 							<HomeCarousel items={carousels}></HomeCarousel>
 						</section>
 					</div>
 				</div>
 			</div>
-			{/*<pre>{JSON.stringify(session)}</pre>*/}
 
-			<section className='mb-4 mt-[128px]'>
-				<div className='container'>
-					<FeatureCards />
+			<section className='container mb-4 mt-[128px]'>
+				<FeatureCards items={catalog} />
+				<div className='re relative my-12 overflow-hidden'>
+					<Image
+						alt={''}
+						width={1440}
+						height={753}
+						src={mainFallback}
+						sizes='100vw'
+						style={{
+							width: '100%',
+							height: 'auto'
+						}}
+					/>
 				</div>
 			</section>
 		</>

app/globals.css

@@ -1,3 +1,5 @@
+@import "@/components/pages/product/embla.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -120,6 +122,13 @@ body {
     @apply sm:w-5/12 md:w-7/12 xl:w-8/12 flex-1 sm:flex-auto sm:pl-4 md:pl-7 xl:pl-9
   }
 
+  .bw-product-col-left{
+    @apply flex-1 sm:w-5/12 sm:flex-auto sm:pl-4 md:w-7/12 md:pl-7 xl:w-auto xl:pl-9
+  }
+  .bw-product-col-right{
+    @apply flex-1 sm:w-7/12 md:w-5/12 lg:flex-col xl:w-[360px] xl:flex-none
+  }
+
   .bw-header-col-left {
     @apply w-[9/12] flex-auto
   }
@@ -221,8 +230,10 @@ body {
   font-size: 1rem !important;
   line-height: 1.45 !important;
   color: rgb(40, 26, 76) !important;
-
+  background: transparent !important;
+  text-align: left !important;
 }
+
 .bw-product__text {
   h2 * {
     font-weight: 700 !important;
@@ -234,5 +245,23 @@ body {
   input {
     @apply text-xl leading-none border-0 text-brand-violet font-bold;
   }
-
+}
+
+.bw-cart-btn.lucide {
+    @apply text-brand-violet;
+    width: 32px;
+    height: 32px;
+    &:hover {
+      @apply drop-shadow-lg shadow-brand-violet-400;
+    }
+  }
+
+.bw-card-footer {
+  background: #f2f5fa !important;
+}
+
+.bw-cart-wrapper {
+  .col{
+    flex: 1;
+  }
 }