P14:[{"_344":93,"_345":46,"_346":347},"app1","app2","diffPatch","diff --git a/.env b/.env\nnew file mode 100644\nindex 0000000..65eca45\n--- /dev/null\n+++ b/.env\n@@ -0,0 +1,11 @@\n+# Environment variables declared in this file are automatically made available to Prisma.\n+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema\n+\n+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.\n+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings\n+\n+# The following `prisma+postgres` URL is similar to the URL produced by running a local Prisma Postgres \n+# server with the `prisma dev` CLI command, when not choosing any non-default ports or settings. The API key, unlike the \n+# one found in a remote Prisma Postgres URL, does not contain any sensitive information.\n+ \n+DATABASE_URL=\"file:./prisma/data.db\"\n\\ No newline at end of file\ndiff --git a/.env.example b/.env.example\nnew file mode 100644\nindex 0000000..f64a04f\n--- /dev/null\n+++ b/.env.example\n@@ -0,0 +1 @@\n+DATABASE_URL=\"file:./prisma/data.db\"\n\\ No newline at end of file\ndiff --git a/app/app.css b/app/app.css\nnew file mode 100644\nindex 0000000..f61f092\n--- /dev/null\n+++ b/app/app.css\n@@ -0,0 +1,16 @@\n+@import 'tailwindcss';\n+\n+@theme {\n+\t--font-sans:\n+\t\t'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',\n+\t\t'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n+}\n+\n+html,\n+body {\n+\t@apply bg-white dark:bg-gray-950;\n+\n+\t@media (prefers-color-scheme: dark) {\n+\t\tcolor-scheme: dark;\n+\t}\n+}\ndiff --git a/app/components/footer.tsx b/app/components/footer.tsx\nnew file mode 100644\nindex 0000000..7ce637c\n--- /dev/null\n+++ b/app/components/footer.tsx\n@@ -0,0 +1,109 @@\n+import { ShoppingBag } from 'lucide-react'\n+import { Link } from 'react-router'\n+\n+export const Footer = () => {\n+\treturn (\n+\t\t\n+\t)\n+}\ndiff --git a/app/components/header.tsx b/app/components/header.tsx\nnew file mode 100644\nindex 0000000..8069fa6\n--- /dev/null\n+++ b/app/components/header.tsx\n@@ -0,0 +1,133 @@\n+import { ShoppingBag, Search, Menu, X } from 'lucide-react'\n+import { useState } from 'react'\n+import { Link, useLocation, Form, useSearchParams } from 'react-router'\n+\n+export const Header = () => {\n+\tconst [isMenuOpen, setIsMenuOpen] = useState(false)\n+\tconst navigation = [\n+\t\t{ name: 'Home', href: '/' },\n+\t\t{ name: 'Products', href: '/products' },\n+\t\t{ name: 'About', href: '/about' },\n+\t\t{ name: 'Contact', href: '/contact' },\n+\t]\n+\tconst [searchParams] = useSearchParams()\n+\tconst location = useLocation()\n+\tconst isActive = (href: string) => location.pathname === href\n+\tconst q = searchParams.get('q') || ''\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\tEpicStore\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\n+\t\t\t\t\t\n+\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t{navigation.map((item) => (\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t{item.name}\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{/* \n+ \n+ */}\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\n+\t\t\t\t\t

\n+\t\t\t\t\t\t{/* */}\n+\t\t\t\t\t\t setIsMenuOpen(!isMenuOpen)}\n+\t\t\t\t\t\t\tclassName=\"p-2 text-gray-700 hover:text-amber-600 dark:text-gray-300 dark:hover:text-amber-500\"\n+\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t{isMenuOpen ? (\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t) : (\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t)}\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\n+\t\t\t{isMenuOpen && (\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t{navigation.map((item) => (\n+\t\t\t\t\t\t\t setIsMenuOpen(false)}\n+\t\t\t\t\t\t\t\tclassName={`block text-base font-medium tracking-wide transition-colors duration-300 ${\n+\t\t\t\t\t\t\t\t\tisActive(item.href)\n+\t\t\t\t\t\t\t\t\t\t? 'text-amber-600 dark:text-amber-500'\n+\t\t\t\t\t\t\t\t\t\t: 'text-gray-700 hover:text-amber-600 dark:text-gray-300 dark:hover:text-amber-500'\n+\t\t\t\t\t\t\t\t}`}\n+\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t{item.name}\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t))}\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t)}\n+\t\t

\n+\t)\n+}\ndiff --git a/app/components/product-card.tsx b/app/components/product-card.tsx\nnew file mode 100644\nindex 0000000..b43c877\n--- /dev/null\n+++ b/app/components/product-card.tsx\n@@ -0,0 +1,54 @@\n+import { Heart, Star } from 'lucide-react'\n+import { Link } from 'react-router'\n+import { type ProductCardInfo } from '#app/domain/products.server.js'\n+\n+export function ProductCard({ product }: { product: ProductCardInfo }) {\n+\treturn (\n+\t\t\n+\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t{product.reviewScore.toFixed(1)}\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t{product.brand.name}\n+\t\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t\t\t{product.name}\n+\t\t\t\t\t

\n+\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t\t{product.description}\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t${product.price}\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\t{product._count.reviews} reviews\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\n+\t)\n+}\ndiff --git a/app/db.server.ts b/app/db.server.ts\nnew file mode 100644\nindex 0000000..f1cb3d5\n--- /dev/null\n+++ b/app/db.server.ts\n@@ -0,0 +1,9 @@\n+import { PrismaBetterSQLite3 } from '@prisma/adapter-better-sqlite3'\n+import { PrismaClient } from './generated/prisma/client'\n+\n+const adapter = new PrismaBetterSQLite3({\n+\turl: process.env.DATABASE_URL,\n+})\n+const prisma = new PrismaClient({ adapter })\n+await prisma.$connect()\n+export const db = prisma\ndiff --git a/app/domain/brand.server.ts b/app/domain/brand.server.ts\nnew file mode 100644\nindex 0000000..218eac7\n--- /dev/null\n+++ b/app/domain/brand.server.ts\n@@ -0,0 +1,9 @@\n+import { db } from '#app/db.server.js'\n+\n+export const getAllBrands = async () => {\n+\tconst brands = await db.brand.findMany({\n+\t\torderBy: { name: 'asc' },\n+\t\tselect: { id: true, name: true },\n+\t})\n+\treturn { brands }\n+}\ndiff --git a/app/domain/category.server.ts b/app/domain/category.server.ts\nnew file mode 100644\nindex 0000000..4a1d22b\n--- /dev/null\n+++ b/app/domain/category.server.ts\n@@ -0,0 +1,16 @@\n+import { db } from '#app/db.server.js'\n+\n+export const getAllCategories = async ({\n+\tperPage,\n+}: { perPage?: number } = {}) => {\n+\tconst categories = await db.category.findMany({\n+\t\torderBy: { name: 'asc' },\n+\t\tselect: { id: true, name: true, imageUrl: true },\n+\t\ttake: perPage,\n+\t})\n+\treturn { categories }\n+}\n+\n+export type Category = Awaited<\n+\tReturnType\n+>['categories'][number]\ndiff --git a/app/domain/products.server.ts b/app/domain/products.server.ts\nnew file mode 100644\nindex 0000000..f3a3fb7\n--- /dev/null\n+++ b/app/domain/products.server.ts\n@@ -0,0 +1,207 @@\n+import { db } from '#app/db.server.js'\n+import {\n+\ttype ProductWhereInput,\n+\ttype ProductSelect,\n+\ttype ProductOrderByWithRelationInput,\n+} from '#app/generated/prisma/models.ts'\n+\n+interface ProductFilters {\n+\tcategory?: string[]\n+\tbrand?: string[]\n+\tpriceMin?: number\n+\tpriceMax?: number\n+\tsortBy?: 'name' | 'price-low' | 'price-high' | 'rating'\n+\tpage?: number\n+\tlimit?: number\n+\tsearch?: string\n+}\n+\n+// Define select object without strict typing for _count support\n+const productShortInfoSelect = {\n+\tid: true,\n+\tname: true,\n+\tdescription: true,\n+\timageUrl: true,\n+\tprice: true,\n+\tbrand: {\n+\t\tselect: {\n+\t\t\tid: true,\n+\t\t\tname: true,\n+\t\t},\n+\t},\n+\treviewScore: true,\n+\t_count: {\n+\t\tselect: {\n+\t\t\treviews: true,\n+\t\t},\n+\t},\n+} as const satisfies ProductSelect\n+\n+export const extractProductFiltersFromSearchParams = (\n+\tsearchParams: URLSearchParams,\n+): ProductFilters => {\n+\tconst search = searchParams.get('q') || undefined\n+\tconst category = searchParams.getAll('category') || []\n+\tconst brand = searchParams.getAll('brand') || []\n+\tconst priceMin = searchParams.get('priceMin')\n+\t\t? parseFloat(searchParams.get('priceMin')!)\n+\t\t: undefined\n+\tconst priceMax = searchParams.get('priceMax')\n+\t\t? parseFloat(searchParams.get('priceMax')!)\n+\t\t: undefined\n+\tconst sortBy = (searchParams.get('sortBy') || 'name') as\n+\t\t| 'name'\n+\t\t| 'price-low'\n+\t\t| 'price-high'\n+\t\t| 'rating'\n+\tconst page = parseInt(searchParams.get('page') || '1')\n+\tconst limit = parseInt(searchParams.get('perPage') || '9')\n+\treturn { search, category, brand, priceMin, priceMax, sortBy, page, limit }\n+}\n+\n+function createProductOrderBy(\n+\tsortBy: ProductFilters['sortBy'],\n+): ProductOrderByWithRelationInput | undefined {\n+\tswitch (sortBy) {\n+\t\tcase 'name':\n+\t\t\treturn { name: 'asc' }\n+\t\tcase 'price-low':\n+\t\t\treturn { price: 'asc' }\n+\t\tcase 'price-high':\n+\t\t\treturn { price: 'desc' }\n+\t\tcase 'rating':\n+\t\t\treturn { reviewScore: 'desc' }\n+\t\tdefault:\n+\t\t\treturn { name: 'asc' }\n+\t}\n+}\n+\n+function createProductWhereClause(filters?: ProductFilters): ProductWhereInput {\n+\treturn {\n+\t\tOR: filters?.search\n+\t\t\t? [\n+\t\t\t\t\t{ name: filters.search ? { contains: filters.search } : undefined },\n+\t\t\t\t\t{\n+\t\t\t\t\t\tdescription: filters.search\n+\t\t\t\t\t\t\t? { contains: filters.search }\n+\t\t\t\t\t\t\t: undefined,\n+\t\t\t\t\t},\n+\t\t\t\t]\n+\t\t\t: undefined,\n+\t\tcategory:\n+\t\t\tfilters?.category && filters.category.length > 0\n+\t\t\t\t? { name: { in: filters.category } }\n+\t\t\t\t: undefined,\n+\t\tbrand:\n+\t\t\tfilters?.brand && filters.brand.length > 0\n+\t\t\t\t? { name: { in: filters.brand } }\n+\t\t\t\t: undefined,\n+\n+\t\tprice: {\n+\t\t\tgte: filters?.priceMin ?? 0,\n+\t\t\tlte: filters?.priceMax ?? 300,\n+\t\t},\n+\t}\n+}\n+\n+export async function getProducts(filters?: ProductFilters) {\n+\tconst page = filters?.page ?? 1\n+\tconst limit = filters?.limit ?? 4\n+\tconst skip = (page - 1) * limit\n+\n+\tconst whereClause = createProductWhereClause(filters)\n+\n+\tconst orderByClause = createProductOrderBy(filters?.sortBy)\n+\n+\t// Get products with pagination\n+\tconst products = await db.product.findMany({\n+\t\twhere: whereClause,\n+\t\torderBy: orderByClause,\n+\t\tselect: productShortInfoSelect,\n+\t\tskip,\n+\t\ttake: limit,\n+\t})\n+\n+\t// Get total count for pagination metadata\n+\tconst totalCount = await db.product.count({\n+\t\twhere: whereClause,\n+\t})\n+\n+\tconst hasMore = skip + products.length < totalCount\n+\n+\treturn {\n+\t\tproducts,\n+\t\tpagination: {\n+\t\t\tpage,\n+\t\t\tlimit,\n+\t\t\ttotalCount,\n+\t\t\thasMore,\n+\t\t\ttotalPages: Math.ceil(totalCount / limit),\n+\t\t},\n+\t}\n+}\n+\n+export async function getProductById(id: string) {\n+\tconst product = await db.product.findUnique({\n+\t\twhere: { id },\n+\t\tselect: {\n+\t\t\tid: true,\n+\t\t\tname: true,\n+\t\t\tdescription: true,\n+\t\t\timageUrl: true,\n+\t\t\tprice: true,\n+\t\t\treviewScore: true,\n+\t\t\tcategory: {\n+\t\t\t\tselect: {\n+\t\t\t\t\tid: true,\n+\t\t\t\t\tname: true,\n+\t\t\t\t},\n+\t\t\t},\n+\t\t\tbrand: {\n+\t\t\t\tselect: {\n+\t\t\t\t\tid: true,\n+\t\t\t\t\tname: true,\n+\t\t\t\t},\n+\t\t\t},\n+\t\t\treviews: {\n+\t\t\t\tselect: {\n+\t\t\t\t\tid: true,\n+\t\t\t\t\trating: true,\n+\t\t\t\t\tcomment: true,\n+\t\t\t\t},\n+\t\t\t},\n+\t\t\tvariations: {\n+\t\t\t\tselect: {\n+\t\t\t\t\tcolor: true,\n+\t\t\t\t\tsize: true,\n+\t\t\t\t\tid: true,\n+\t\t\t\t\tquantity: true,\n+\t\t\t\t},\n+\t\t\t},\n+\t\t},\n+\t})\n+\treturn product\n+}\n+\n+export async function getRelatedProducts(\n+\tproductId: string | undefined,\n+\tcategoryId: string | undefined,\n+\tbrandId: string | undefined,\n+) {\n+\tif (!productId) {\n+\t\treturn []\n+\t}\n+\tconst products = await db.product.findMany({\n+\t\twhere: {\n+\t\t\tid: { not: productId },\n+\t\t\tOR: [{ categoryId: categoryId }, { brandId: brandId }],\n+\t\t},\n+\t\tselect: productShortInfoSelect,\n+\t\ttake: 4,\n+\t})\n+\treturn products\n+}\n+\n+export type ProductCardInfo = Awaited<\n+\tReturnType\n+>['products'][number]\ndiff --git a/app/hooks/use-intersection-observer.ts b/app/hooks/use-intersection-observer.ts\nnew file mode 100644\nindex 0000000..eb564d6\n--- /dev/null\n+++ b/app/hooks/use-intersection-observer.ts\n@@ -0,0 +1,28 @@\n+import { useEffect } from 'react'\n+\n+export const useIntersectionObserver = (\n+\tref: React.RefObject,\n+\tonIntersect: () => void,\n+\toptions?: IntersectionObserverInit,\n+) => {\n+\tuseEffect(() => {\n+\t\tconst observer = new IntersectionObserver((entries) => {\n+\t\t\tentries.forEach((entry) => {\n+\t\t\t\tif (entry.isIntersecting) {\n+\t\t\t\t\tonIntersect()\n+\t\t\t\t}\n+\t\t\t})\n+\t\t}, options)\n+\n+\t\tconst currentRef = ref.current\n+\t\tif (currentRef) {\n+\t\t\tobserver.observe(currentRef)\n+\t\t}\n+\n+\t\treturn () => {\n+\t\t\tif (currentRef) {\n+\t\t\t\tobserver.unobserve(currentRef)\n+\t\t\t}\n+\t\t}\n+\t}, [ref, onIntersect, options])\n+}\ndiff --git a/app/root.tsx b/app/root.tsx\nindex 93f41b7..70f8876 100644\n--- a/app/root.tsx\n+++ b/app/root.tsx\n@@ -7,6 +7,30 @@ import {\n \tScrollRestoration,\n } from 'react-router'\n import { type Route } from './+types/root'\n+import tailwindStylesheet from './app.css?url'\n+\n+export const links: Route.LinksFunction = () => [\n+\t// 📜 https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/preconnect\n+\t{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },\n+\t{ rel: 'stylesheet', href: tailwindStylesheet },\n+\t{\n+\t\trel: 'preconnect',\n+\t\thref: 'https://fonts.gstatic.com',\n+\t\tcrossOrigin: 'anonymous',\n+\t},\n+\t{\n+\t\trel: 'stylesheet',\n+\t\thref: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',\n+\t},\n+]\n+\n+export const meta: Route.MetaFunction = () => {\n+\treturn [\n+\t\t{\n+\t\t\ttitle: 'Epic Shop',\n+\t\t},\n+\t]\n+}\n \n export function Layout({ children }: { children: React.ReactNode }) {\n \treturn (\ndiff --git a/app/routes/_landing._index/categories-section.tsx b/app/routes/_landing._index/categories-section.tsx\nnew file mode 100644\nindex 0000000..7eac87c\n--- /dev/null\n+++ b/app/routes/_landing._index/categories-section.tsx\n@@ -0,0 +1,45 @@\n+import { Link } from 'react-router'\n+import { type Category } from '#app/domain/category.server.ts'\n+\n+export const CategoriesSection = ({\n+\tcategories,\n+}: {\n+\tcategories: Category[]\n+}) => {\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tShop by Category\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tFind the perfect shoes for every occasion and lifestyle\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\n+\t\t\t\t

\n+\t\t\t\t\t{categories.map((category, index) => (\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

{category.name}

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t))}\n+\t\t\t\t

\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/_landing._index/featured-products.section.tsx b/app/routes/_landing._index/featured-products.section.tsx\nnew file mode 100644\nindex 0000000..7cd6655\n--- /dev/null\n+++ b/app/routes/_landing._index/featured-products.section.tsx\n@@ -0,0 +1,43 @@\n+import { ArrowRight } from 'lucide-react'\n+import { Link } from 'react-router'\n+import { ProductCard } from '#app/components/product-card.js'\n+import { type ProductCardInfo } from '#app/domain/products.server.js'\n+\n+interface FeaturedProductsSectionProps {\n+\tproducts: ProductCardInfo[]\n+}\n+\n+export const FeaturedProductsSection = ({\n+\tproducts,\n+}: FeaturedProductsSectionProps) => {\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tFeatured Products\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tHandpicked favorites from our premium collection\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\n+\t\t\t\t

\n+\t\t\t\t\t{products.map((product) => (\n+\t\t\t\t\t\t\n+\t\t\t\t\t))}\n+\t\t\t\t

\n+\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\tView All Products\n+\t\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/_landing._index/features-section.tsx b/app/routes/_landing._index/features-section.tsx\nnew file mode 100644\nindex 0000000..c837702\n--- /dev/null\n+++ b/app/routes/_landing._index/features-section.tsx\n@@ -0,0 +1,51 @@\n+import { Truck, Shield, RefreshCw, Award } from 'lucide-react'\n+\n+const features = [\n+\t{\n+\t\ticon: ,\n+\t\ttitle: 'Free Shipping',\n+\t\tdescription: 'Free shipping on orders over $75',\n+\t},\n+\t{\n+\t\ticon: ,\n+\t\ttitle: 'Secure Payment',\n+\t\tdescription: '100% secure payment processing',\n+\t},\n+\t{\n+\t\ticon: ,\n+\t\ttitle: 'Easy Returns',\n+\t\tdescription: '30-day hassle-free returns',\n+\t},\n+\t{\n+\t\ticon: ,\n+\t\ttitle: 'Quality Guarantee',\n+\t\tdescription: 'Premium quality assurance',\n+\t},\n+]\n+\n+export const FeaturesSection = () => {\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t{features.map((feature, index) => (\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{feature.icon}\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{feature.title}\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{feature.description}\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t))}\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\n+\t)\n+}\ndiff --git a/app/routes/_landing._index/hero-section.tsx b/app/routes/_landing._index/hero-section.tsx\nnew file mode 100644\nindex 0000000..8d2b1f9\n--- /dev/null\n+++ b/app/routes/_landing._index/hero-section.tsx\n@@ -0,0 +1,61 @@\n+import { ArrowRight, Star } from 'lucide-react'\n+import { Link } from 'react-router'\n+\n+export const HeroSection = () => {\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tStep Into\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\tExcellence\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tDiscover premium footwear that combines unmatched comfort,\n+\t\t\t\t\t\t\ttimeless style, and exceptional craftsmanship.\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\tShop Collection\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\tLearn More\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t4.9\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\tCustomer Rating\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/_landing._index/newsletter-section.tsx b/app/routes/_landing._index/newsletter-section.tsx\nnew file mode 100644\nindex 0000000..e01df1b\n--- /dev/null\n+++ b/app/routes/_landing._index/newsletter-section.tsx\n@@ -0,0 +1,25 @@\n+export const NewsletterSection = () => {\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\tStay in the Loop\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\tBe the first to know about new arrivals, exclusive offers, and style\n+\t\t\t\t\ttips.\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/_landing._index/route.tsx b/app/routes/_landing._index/route.tsx\nindex 6301f22..eabbbfb 100644\n--- a/app/routes/_landing._index/route.tsx\n+++ b/app/routes/_landing._index/route.tsx\n@@ -1,3 +1,36 @@\n-export default function HomePage() {\n-\treturn

Landing page!

\n+import { getAllCategories } from '#app/domain/category.server.js'\n+import { getProducts } from '#app/domain/products.server.js'\n+import { getMetaFromMatches, getMetaTitle } from '#app/utils/metadata.js'\n+import { type Route } from './+types/route'\n+import { CategoriesSection } from './categories-section'\n+import { FeaturedProductsSection } from './featured-products.section'\n+import { FeaturesSection } from './features-section'\n+import { HeroSection } from './hero-section'\n+import { NewsletterSection } from './newsletter-section'\n+\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\tconst rootMeta = getMetaFromMatches(matches, 'root')\n+\tconst title = getMetaTitle(rootMeta)\n+\treturn [{ title }]\n+}\n+\n+export const loader = async () => {\n+\tconst [{ products }, { categories }] = await Promise.all([\n+\t\tgetProducts(),\n+\t\tgetAllCategories({ perPage: 4 }),\n+\t])\n+\n+\treturn { products, categories }\n+}\n+\n+export default function HomePage({ loaderData }: Route.ComponentProps) {\n+\treturn (\n+\t\t

\n+\t\t\t\n+\t\t\t\n+\t\t\t\n+\t\t\t\n+\t\t\t\n+\t\t

\n+\t)\n }\ndiff --git a/app/routes/_landing.about.tsx b/app/routes/_landing.about.tsx\nindex 4112dcd..58e5f97 100644\n--- a/app/routes/_landing.about.tsx\n+++ b/app/routes/_landing.about.tsx\n@@ -1,3 +1,217 @@\n+import { Award, Heart, Compass, Lightbulb } from 'lucide-react'\n+import {\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+\tconstructPrefixedTitle,\n+} from '#app/utils/metadata.js'\n+import { type Route } from './+types/_landing.about'\n+\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\tconst rootMeta = getMetaFromMatches(matches, 'root')\n+\tconst prefix = getMetaTitle(rootMeta)\n+\treturn [\n+\t\t{\n+\t\t\ttitle: constructPrefixedTitle('About Us', prefix),\n+\t\t},\n+\t]\n+}\n+\n export default function AboutPage() {\n-\treturn

About page!

\n+\tconst team = [\n+\t\t{\n+\t\t\tname: 'Marcus Rodriguez',\n+\t\t\trole: 'Founder & CEO',\n+\t\t\timage:\n+\t\t\t\t'https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=400',\n+\t\t\tbio: 'Passionate about bringing premium footwear to everyone with 15+ years in fashion retail.',\n+\t\t},\n+\t\t{\n+\t\t\tname: 'Elena Chen',\n+\t\t\trole: 'Head of Design',\n+\t\t\timage:\n+\t\t\t\t'https://images.pexels.com/photos/1181686/pexels-photo-1181686.jpeg?auto=compress&cs=tinysrgb&w=400',\n+\t\t\tbio: 'Former Nike designer with expertise in creating comfortable and stylish footwear.',\n+\t\t},\n+\t\t{\n+\t\t\tname: 'Sofia Laurent',\n+\t\t\trole: 'Customer Experience Director',\n+\t\t\timage:\n+\t\t\t\t'https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=400',\n+\t\t\tbio: 'Dedicated to ensuring every customer finds their perfect pair of shoes.',\n+\t\t},\n+\t]\n+\n+\tconst values = [\n+\t\t{\n+\t\t\ticon: ,\n+\t\t\ttitle: 'Innovation',\n+\t\t\tdescription:\n+\t\t\t\t'We constantly seek new materials and technologies to improve comfort and style.',\n+\t\t},\n+\t\t{\n+\t\t\ticon: ,\n+\t\t\ttitle: 'Passion',\n+\t\t\tdescription:\n+\t\t\t\t'Every shoe is selected with genuine care for quality and customer satisfaction.',\n+\t\t},\n+\t\t{\n+\t\t\ticon: ,\n+\t\t\ttitle: 'Quality',\n+\t\t\tdescription:\n+\t\t\t\t'We partner only with brands that meet our high standards for craftsmanship.',\n+\t\t},\n+\t\t{\n+\t\t\ticon: ,\n+\t\t\ttitle: 'Purpose',\n+\t\t\tdescription:\n+\t\t\t\t'Helping people step confidently into their daily adventures.',\n+\t\t},\n+\t]\n+\n+\treturn (\n+\t\t

\n+\t\t\t{/* Hero Section */}\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tOur Story\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tBorn from a passion for exceptional footwear and a vision to make\n+\t\t\t\t\t\tpremium shoes accessible to everyone who values quality, comfort,\n+\t\t\t\t\t\tand style.\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\n+\t\t\t{/* Story Section */}\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tWalking Together Since 2020\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tEpicStore was founded on the belief that everyone deserves\n+\t\t\t\t\t\t\t\taccess to premium footwear that doesn't compromise on comfort,\n+\t\t\t\t\t\t\t\tstyle, or quality. We started as a small team of shoe\n+\t\t\t\t\t\t\t\tenthusiasts who were frustrated by the lack of truly exceptional\n+\t\t\t\t\t\t\t\toptions in the market.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tWhat began as weekend trips to discover hidden gem shoe\n+\t\t\t\t\t\t\t\tmanufacturers has evolved into a curated marketplace that\n+\t\t\t\t\t\t\t\tconnects customers with the world's finest footwear brands, from\n+\t\t\t\t\t\t\t\testablished names to emerging designers.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tToday, we're proud to serve thousands of customers who trust us\n+\t\t\t\t\t\t\t\tto help them find shoes that not only look great but feel\n+\t\t\t\t\t\t\t\tamazing and last for years to come.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\n+\t\t\t{/* Values Section */}\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tOur Values\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tThese principles guide every decision we make and every\n+\t\t\t\t\t\t\trelationship we build.\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\n+\t\t\t\t\t

\n+\t\t\t\t\t\t{values.map((value, index) => (\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t{value.icon}\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t{value.title}\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t{value.description}\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t))}\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\n+\t\t\t{/* Team Section */}\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tMeet Our Team\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tThe passionate individuals who make EpicStore a destination for\n+\t\t\t\t\t\t\tshoe lovers everywhere.\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\n+\t\t\t\t\t

\n+\t\t\t\t\t\t{team.map((member, index) => (\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t{member.name}\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t{member.role}\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t{member.bio}\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t))}\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\n+\n+\t\t\t{/* Mission Section */}\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tOur Mission\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tTo provide exceptional footwear that empowers people to step\n+\t\t\t\t\t\tconfidently into their daily adventures, combining unmatched comfort\n+\t\t\t\t\t\twith timeless style and sustainable practices.\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\n+\t)\n }\ndiff --git a/app/routes/_landing.cart.tsx b/app/routes/_landing.cart.tsx\nindex f43d854..2f1e7f5 100644\n--- a/app/routes/_landing.cart.tsx\n+++ b/app/routes/_landing.cart.tsx\n@@ -1,7 +1,263 @@\n+import { Minus, Plus, Trash2, ArrowLeft, ShoppingBag } from 'lucide-react'\n import { Link } from 'react-router'\n+import {\n+\tconstructPrefixedTitle,\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+} from '#app/utils/metadata.js'\n+import { type Route } from '../+types/root'\n+\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\tconst rootMeta = getMetaFromMatches(matches, 'root')\n+\tconst prefix = getMetaTitle(rootMeta)\n+\treturn [\n+\t\t{\n+\t\t\ttitle: constructPrefixedTitle('Cart', prefix),\n+\t\t},\n+\t]\n+}\n \n export default function CartPage() {\n+\tconst items: {\n+\t\tid: number\n+\t\tprice: number\n+\t\timage: string\n+\t\tbrand: string\n+\t\tquantity: number\n+\t\tname: string\n+\t\tselectedSize: string\n+\t\tselectedColor: string\n+\t}[] = [\n+\t\t{\n+\t\t\tid: 1,\n+\t\t\tprice: 59.99,\n+\t\t\timage:\n+\t\t\t\t'https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t\t\tbrand: 'Nike',\n+\t\t\tquantity: 2,\n+\t\t\tname: 'Air Max 270',\n+\t\t\tselectedSize: '10',\n+\t\t\tselectedColor: 'Black',\n+\t\t},\n+\t\t{\n+\t\t\tid: 2,\n+\t\t\tprice: 89.99,\n+\t\t\timage:\n+\t\t\t\t'https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t\t\tbrand: 'Adidas',\n+\t\t\tquantity: 1,\n+\t\t\tname: 'Ultraboost 21',\n+\t\t\tselectedSize: '9',\n+\t\t\tselectedColor: 'White',\n+\t\t},\n+\t]\n+\tconst total = 0\n+\tconst itemCount = items.length\n+\tconst handleQuantityChange = (itemId: string, newQuantity: number) => {}\n+\n+\tconst getItemId = (item: any) =>\n+\t\t`${item.id}-${item.selectedSize}-${item.selectedColor}`\n+\n+\tif (items.length === 0) {\n \t\treturn (\n-\t\t

Cart page

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tYour cart is empty\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tLooks like you haven't added any items to your cart yet.\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\tContinue Shopping\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\t\t)\n+\t}\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t{/* Header */}\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tShopping Cart\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t{itemCount} {itemCount === 1 ? 'item' : 'items'} in your cart\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\tContinue Shopping\n+\t\t\t\t\t\n+\t\t\t\t

\n+\n+\t\t\t\t

\n+\t\t\t\t\t{/* Cart Items */}\n+\t\t\t\t\t

\n+\t\t\t\t\t\t{items.map((item) => (\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t\t{item.name}\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t\t{item.brand}\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t\tSize: {item.selectedSize}\n+\t\t\t\t\t\t\t\t\t\t\t\t\tColor: {item.selectedColor}\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t getItemId(item)}\n+\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"p-2 text-gray-400 transition-colors duration-200 hover:text-red-500\"\n+\t\t\t\t\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleQuantityChange(\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tgetItemId(item),\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.quantity - 1,\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n+\t\t\t\t\t\t\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"rounded border border-gray-300 p-1 transition-colors duration-200 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-700\"\n+\t\t\t\t\t\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t\t{item.quantity}\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleQuantityChange(\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tgetItemId(item),\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.quantity + 1,\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n+\t\t\t\t\t\t\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"rounded border border-gray-300 p-1 transition-colors duration-200 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-700\"\n+\t\t\t\t\t\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t\t${(item.price * item.quantity).toFixed(2)}\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t\t${item.price} each\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t))}\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\n+\t\t\t\t\t{/* Order Summary */}\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tOrder Summary\n+\t\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\tSubtotal\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t${total.toFixed(2)}\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\tShipping\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t{total > 75 ? 'Free' : '$9.99'}\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\tTax\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t${(total * 0.08).toFixed(2)}\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\tTotal\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t$\n+\t\t\t\t\t\t\t\t\t\t\t{(total + (total > 75 ? 0 : 9.99) + total * 0.08).toFixed(\n+\t\t\t\t\t\t\t\t\t\t\t\t2,\n+\t\t\t\t\t\t\t\t\t\t\t)}\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t\t{total < 75 && (\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\tAdd ${(75 - total).toFixed(2)} more for free shipping!\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t)}\n+\n+\t\t\t\t\t\t\t\n+\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t🔒 Secure Checkout\n+\t\t\t\t\t\t\t\t\t📦 Free Returns\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\n \t)\n }\ndiff --git a/app/routes/_landing.contact.tsx b/app/routes/_landing.contact.tsx\nindex dfdfbb7..f9720f4 100644\n--- a/app/routes/_landing.contact.tsx\n+++ b/app/routes/_landing.contact.tsx\n@@ -1,3 +1,321 @@\n+import { Mail, Phone, MapPin, Send, CheckCircle, Clock } from 'lucide-react'\n+import React, { useState } from 'react'\n+import {\n+\tconstructPrefixedTitle,\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+} from '#app/utils/metadata.js'\n+import { type Route } from './+types/_landing.contact'\n+\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\tconst rootMeta = getMetaFromMatches(matches, 'root')\n+\tconst prefix = getMetaTitle(rootMeta)\n+\treturn [\n+\t\t{\n+\t\t\ttitle: constructPrefixedTitle('Contact Us', prefix),\n+\t\t},\n+\t]\n+}\n+\n export default function ContactPage() {\n-\treturn

Contact page!

\n+\tconst [formData, setFormData] = useState({\n+\t\tname: '',\n+\t\temail: '',\n+\t\tsubject: '',\n+\t\tmessage: '',\n+\t})\n+\tconst [isSubmitted, setIsSubmitted] = useState(false)\n+\n+\tconst handleInputChange = (\n+\t\te: React.ChangeEvent<\n+\t\t\tHTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\n+\t\t>,\n+\t) => {\n+\t\tconst { name, value } = e.target\n+\t\tsetFormData((prev) => ({\n+\t\t\t...prev,\n+\t\t\t[name]: value,\n+\t\t}))\n+\t}\n+\n+\tconst handleSubmit = (e: React.FormEvent) => {\n+\t\te.preventDefault()\n+\t\tconsole.log('Form submitted:', formData)\n+\t\tsetIsSubmitted(true)\n+\t\tsetTimeout(() => setIsSubmitted(false), 3000)\n+\t}\n+\n+\tconst contactInfo = [\n+\t\t{\n+\t\t\ticon: ,\n+\t\t\ttitle: 'Email',\n+\t\t\tdetail: 'hello@solestyle.com',\n+\t\t\tdescription: 'We respond within 24 hours',\n+\t\t},\n+\t\t{\n+\t\t\ticon: ,\n+\t\t\ttitle: 'Phone',\n+\t\t\tdetail: '+1 (555) 123-4567',\n+\t\t\tdescription: 'Monday to Friday, 9am to 6pm PST',\n+\t\t},\n+\t\t{\n+\t\t\ticon: ,\n+\t\t\ttitle: 'Store',\n+\t\t\tdetail: '123 Fashion District, Los Angeles, CA 90015',\n+\t\t\tdescription: 'Visit our flagship store',\n+\t\t},\n+\t]\n+\n+\tconst subjects = [\n+\t\t'General Inquiry',\n+\t\t'Order Support',\n+\t\t'Returns & Exchanges',\n+\t\t'Product Information',\n+\t\t'Partnership Opportunities',\n+\t\t'Other',\n+\t]\n+\n+\treturn (\n+\t\t

\n+\t\t\t{/* Hero Section */}\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tGet in Touch\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tHave questions about our products, need help with an order, or want\n+\t\t\t\t\t\tto share feedback? We'd love to hear from you and help you find your\n+\t\t\t\t\t\tperfect pair.\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\n+\t\t\t{/* Contact Section */}\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t{/* Contact Information */}\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tContact Information\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{contactInfo.map((info, index) => (\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t{info.icon}\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t{info.title}\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t{info.detail}\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t{info.description}\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\tStore Hours\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\tMonday - Friday\n+\t\t\t\t\t\t\t\t\t\t10am - 8pm\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\tSaturday\n+\t\t\t\t\t\t\t\t\t\t10am - 6pm\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\tSunday\n+\t\t\t\t\t\t\t\t\t\t12pm - 5pm\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t{/* Contact Form */}\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\tSend us a Message\n+\t\t\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t\t\t{isSubmitted ? (\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\tMessage Sent Successfully\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\tThank you for reaching out. We'll get back to you within\n+\t\t\t\t\t\t\t\t\t\t\t24 hours.\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t) : (\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t\tFull Name *\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t\tEmail Address *\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\tSubject *\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t{subjects.map((subject, index) => (\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\t{subject}\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\tMessage *\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\tSend Message\n+\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t)}\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\n+\t\t\t{/* FAQ Section */}\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tFrequently Asked Questions\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tQuick answers to common questions about our products and services\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tWhat is your return policy?\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tWe offer a 30-day return policy for unworn items in original\n+\t\t\t\t\t\t\t\tpackaging. Returns are free and easy through our online portal.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tDo you offer international shipping?\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tYes, we ship worldwide! International shipping rates and\n+\t\t\t\t\t\t\t\tdelivery times vary by location and are calculated at checkout.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tHow do I find my size?\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tEach product page includes a detailed size guide. We also offer\n+\t\t\t\t\t\t\t\tvirtual fitting consultations to help you find the perfect fit.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tAre your shoes authentic?\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tAbsolutely! We work directly with authorized retailers and\n+\t\t\t\t\t\t\t\tbrands to ensure 100% authenticity of all products we sell.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\t\t

\n+\t)\n }\ndiff --git a/app/routes/_landing.products.$productId.tsx b/app/routes/_landing.products.$productId.tsx\nindex e295ac7..7d81326 100644\n--- a/app/routes/_landing.products.$productId.tsx\n+++ b/app/routes/_landing.products.$productId.tsx\n@@ -1,7 +1,403 @@\n-export default function ProductDetailPage() {\n+import {\n+\tArrowLeft,\n+\tStar,\n+\tHeart,\n+\tTruck,\n+\tShield,\n+\tRefreshCw,\n+\tPlus,\n+\tMinus,\n+} from 'lucide-react'\n+import { useState } from 'react'\n+import { Link, useSearchParams } from 'react-router'\n+import { ProductCard } from '#app/components/product-card.js'\n+import {\n+\tgetProductById,\n+\tgetRelatedProducts,\n+} from '#app/domain/products.server.js'\n+import {\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+\tconstructPrefixedTitle,\n+} from '#app/utils/metadata.js'\n+import { type Route } from './+types/_landing.products.$productId'\n+\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\tconst rootMeta = getMetaFromMatches(matches, 'root')\n+\tconst prefix = getMetaTitle(rootMeta)\n+\n+\treturn [\n+\t\t{\n+\t\t\ttitle: constructPrefixedTitle('Product overview', prefix),\n+\t\t},\n+\t]\n+}\n+\n+export const loader = async ({ params, request }: Route.LoaderArgs) => {\n+\tconst { productId } = params\n+\tconst product = await getProductById(productId)\n+\tconst relatedProducts = await getRelatedProducts(\n+\t\tproductId,\n+\t\tproduct?.category.id,\n+\t\tproduct?.brand.id,\n+\t)\n+\tconst uniqueSizes = Array.from(\n+\t\tnew Set(product?.variations.map((v) => v.size) || []),\n+\t)\n+\tconst uniqueColors = Array.from(\n+\t\tnew Set(product?.variations.map((v) => v.color) || []),\n+\t)\n+\n+\tconst url = new URL(request.url)\n+\tconst searchParams = url.searchParams\n+\t// Get the selected size and color from the search params\n+\tconst selectedSize = searchParams.get('size') || ''\n+\tconst selectedColor = searchParams.get('color') || ''\n+\t// Determine available sizes for the currently selected color\n+\tconst availableSizes = selectedColor\n+\t\t? product?.variations\n+\t\t\t\t.filter((v) => v.color === selectedColor && v.quantity > 0)\n+\t\t\t\t.map((v) => v.size) || []\n+\t\t: uniqueSizes\n+\t// Determine available colors for the currently selected size\n+\tconst availableColors = selectedSize\n+\t\t? product?.variations\n+\t\t\t\t.filter((v) => v.size === selectedSize && v.quantity > 0)\n+\t\t\t\t.map((v) => v.color) || []\n+\t\t: uniqueColors\n+\n+\tconst selectedVariation = product?.variations.find(\n+\t\t(v) => v.size === selectedSize && v.color === selectedColor,\n+\t)\n+\n+\treturn {\n+\t\tproduct,\n+\t\tuniqueSizes,\n+\t\tuniqueColors,\n+\t\tavailableSizes,\n+\t\tavailableColors,\n+\t\tselectedVariation,\n+\t\trelatedProducts,\n+\t}\n+}\n+\n+export default function ProductDetailPage({\n+\tloaderData,\n+}: Route.ComponentProps) {\n+\tconst {\n+\t\tproduct,\n+\t\tselectedVariation,\n+\t\tuniqueColors,\n+\t\tuniqueSizes,\n+\t\tavailableColors,\n+\t\tavailableSizes,\n+\t\trelatedProducts,\n+\t} = loaderData\n+\tconst [searchParams, setSearchParams] = useSearchParams()\n+\tconst [quantity, setQuantity] = useState(1)\n+\tconst [activeImage, setActiveImage] = useState(0)\n+\tconst selectedSize = searchParams.get('size') || ''\n+\tconst selectedColor = searchParams.get('color') || ''\n+\tif (!product) {\n+\t\treturn (\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tProduct not found\n+\t\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\tBack to products\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t

\n+\t\t)\n+\t}\n+\n+\tconst handleAddToCart = () => {\n+\t\tif (!selectedSize || !selectedColor) {\n+\t\t\talert('Please select size and color')\n+\t\t\treturn\n+\t\t}\n+\n+\t\talert('Added to cart!')\n+\t}\n+\n+\tconst handleSizeChange = (size: string) => () => {\n+\t\tsetSearchParams((prev) => {\n+\t\t\tconst newParams = new URLSearchParams(prev)\n+\t\t\tif (size === selectedSize) {\n+\t\t\t\tnewParams.delete('size')\n+\t\t\t} else {\n+\t\t\t\tnewParams.set('size', size)\n+\t\t\t}\n+\t\t\tconst color = newParams.get('color')\n+\t\t\t// If the selected color is not available for the new size, remove it\n+\t\t\tconst noQuantityForColor =\n+\t\t\t\tcolor &&\n+\t\t\t\tproduct.variations.some(\n+\t\t\t\t\t(v) => v.size === size && v.color === color && v.quantity === 0,\n+\t\t\t\t)\n+\n+\t\t\tif (noQuantityForColor) {\n+\t\t\t\tnewParams.delete('color')\n+\t\t\t}\n+\t\t\treturn newParams\n+\t\t})\n+\t\tsetQuantity(1)\n+\t}\n+\n+\tconst handleColorChange = (color: string) => () => {\n+\t\tsetSearchParams((prev) => {\n+\t\t\tconst newParams = new URLSearchParams(prev)\n+\t\t\tif (color === selectedColor) {\n+\t\t\t\tnewParams.delete('color')\n+\t\t\t} else {\n+\t\t\t\tnewParams.set('color', color)\n+\t\t\t}\n+\t\t\tconst size = newParams.get('size')\n+\t\t\t// If the selected size is not available for the new color, remove it\n+\t\t\tconst noQuantityForSize =\n+\t\t\t\tsize &&\n+\t\t\t\tproduct.variations.some(\n+\t\t\t\t\t(v) => v.color === color && v.size === size && v.quantity === 0,\n+\t\t\t\t)\n+\t\t\tif (noQuantityForSize) {\n+\t\t\t\tnewParams.delete('size')\n+\t\t\t}\n+\t\t\treturn newParams\n+\t\t})\n+\t\tsetQuantity(1)\n+\t}\n+\n+\t// Mock additional images for gallery\n+\tconst productImages = [\n+\t\tproduct.imageUrl,\n+\t\tproduct.imageUrl,\n+\t\tproduct.imageUrl,\n+\t\tproduct.imageUrl,\n+\t]\n+\n \treturn (\n \t\t

\n-\t\t\tProduct Detail Page\n+\t\t\t

\n+\t\t\t\t{/* Breadcrumb */}\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\tBack to Products\n+\t\t\t\t\t\n+\t\t\t\t

\n+\n+\t\t\t\t

\n+\t\t\t\t\t{/* Product Images */}\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t{productImages.map((image, index) => (\n+\t\t\t\t\t\t\t\t setActiveImage(index)}\n+\t\t\t\t\t\t\t\t\tclassName={`aspect-w-1 aspect-h-1 overflow-hidden rounded-lg border-2 bg-white transition-colors duration-200 dark:bg-gray-800 ${\n+\t\t\t\t\t\t\t\t\t\tactiveImage === index\n+\t\t\t\t\t\t\t\t\t\t\t? 'border-amber-500'\n+\t\t\t\t\t\t\t\t\t\t\t: 'border-transparent hover:border-gray-300 dark:hover:border-gray-600'\n+\t\t\t\t\t\t\t\t\t}`}\n+\t\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\n+\t\t\t\t\t{/* Product Info */}\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{product.brand.name}\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{product.name}\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t{[...Array(5)].map((_, i) => (\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t{product.reviewScore}\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t({product.reviews.length} reviews)\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t${product.price}\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{product.description}\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t{/* Size Selection */}\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tSize\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{uniqueSizes.map((size) => (\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t{size}\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t{/* Color Selection */}\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tColor\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{uniqueColors.map((color) => (\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t{color}\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t{/* Quantity */}\n+\t\t\t\t\t\t{selectedVariation ? (\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\tQuantity\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t setQuantity(Math.max(1, quantity - 1))}\n+\t\t\t\t\t\t\t\t\t\t\tdisabled={quantity === 1}\n+\t\t\t\t\t\t\t\t\t\t\tclassName=\"p-2 transition-colors duration-200 hover:bg-gray-100 disabled:opacity-20 disabled:hover:bg-transparent dark:hover:bg-gray-700\"\n+\t\t\t\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t{quantity}\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t setQuantity(quantity + 1)}\n+\t\t\t\t\t\t\t\t\t\t\tdisabled={quantity === selectedVariation.quantity}\n+\t\t\t\t\t\t\t\t\t\t\tclassName=\"p-2 transition-colors duration-200 hover:bg-gray-100 disabled:opacity-20 disabled:hover:bg-transparent dark:hover:bg-gray-700\"\n+\t\t\t\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t) : null}\n+\n+\t\t\t\t\t\t{/* Add to Cart */}\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\tAdd to Cart\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t{/* Features */}\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\tFree Shipping\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t30-Day Returns\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t2-Year Warranty\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\n+\t\t\t\t{/* Related Products */}\n+\t\t\t\t{relatedProducts.length > 0 && (\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tYou Might Also Like\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t{relatedProducts.map((relatedProduct) => (\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t)}\n+\t\t\t

\n \t\t

\n \t)\n }\ndiff --git a/app/routes/_landing.products._index/product-filters.tsx b/app/routes/_landing.products._index/product-filters.tsx\nnew file mode 100644\nindex 0000000..7fe5299\n--- /dev/null\n+++ b/app/routes/_landing.products._index/product-filters.tsx\n@@ -0,0 +1,109 @@\n+import { Form, useLoaderData, useSearchParams } from 'react-router'\n+import { type Route } from './+types/route'\n+\n+interface ProductFiltersProps {\n+\tisPageLoading: boolean\n+}\n+\n+export function ProductFilters({ isPageLoading }: ProductFiltersProps) {\n+\tconst loaderData = useLoaderData()\n+\tconst [searchParams] = useSearchParams()\n+\tconst priceMin = searchParams.get('priceMin') || ''\n+\tconst priceMax = searchParams.get('priceMax') || ''\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tCategory\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t{loaderData.categories.map((category) => (\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t{category.name}\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t))}\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tBrand\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t{loaderData.brands.map((brand) => (\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t{brand.name}\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t))}\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tPrice Range\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\n+\t\t\t\t\n+\t\t\t\t\tApply Filters\n+\t\t\t\t\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/_landing.products._index/route.tsx b/app/routes/_landing.products._index/route.tsx\nnew file mode 100644\nindex 0000000..f9bed39\n--- /dev/null\n+++ b/app/routes/_landing.products._index/route.tsx\n@@ -0,0 +1,211 @@\n+import { Filter, Grid, List } from 'lucide-react'\n+import { useState, useRef } from 'react'\n+import { useSearchParams, useNavigation } from 'react-router'\n+import { ProductCard } from '#app/components/product-card.js'\n+import { getAllBrands } from '#app/domain/brand.server.js'\n+import { getAllCategories } from '#app/domain/category.server.js'\n+import {\n+\textractProductFiltersFromSearchParams,\n+\tgetProducts,\n+} from '#app/domain/products.server.js'\n+import { useIntersectionObserver } from '#app/hooks/use-intersection-observer.js'\n+import {\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+\tconstructPrefixedTitle,\n+} from '#app/utils/metadata.js'\n+import { type Route } from './+types/route'\n+import { ProductFilters } from './product-filters'\n+import { useInfiniteProductFetcher } from './use-infinite-product-fetcher'\n+\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\tconst rootMeta = getMetaFromMatches(matches, 'root')\n+\tconst prefix = getMetaTitle(rootMeta)\n+\treturn [\n+\t\t{\n+\t\t\ttitle: constructPrefixedTitle('All Products', prefix),\n+\t\t},\n+\t]\n+}\n+\n+export const loader = async ({ request }: Route.LoaderArgs) => {\n+\tconst url = new URL(request.url)\n+\tconst searchParams = url.searchParams\n+\tconst filters = extractProductFiltersFromSearchParams(searchParams)\n+\n+\tconst [{ products, pagination }, { categories }, { brands }] =\n+\t\tawait Promise.all([\n+\t\t\tgetProducts(filters),\n+\t\t\tgetAllCategories(),\n+\t\t\tgetAllBrands(),\n+\t\t])\n+\n+\treturn {\n+\t\tproducts,\n+\t\tpagination,\n+\t\tcategories,\n+\t\tbrands,\n+\t}\n+}\n+\n+export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n+\tconst [searchParams, setSearchParams] = useSearchParams()\n+\tconst navigation = useNavigation()\n+\tconst { loadMoreProducts, allProducts, hasMore, isLoadingMore } =\n+\t\tuseInfiniteProductFetcher(loaderData)\n+\tconst isPageLoading = navigation.state !== 'idle'\n+\tconst [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')\n+\tconst [showFilters, setShowFilters] = useState(false)\n+\tconst observerRef = useRef(null)\n+\tuseIntersectionObserver(observerRef, loadMoreProducts)\n+\n+\treturn (\n+\t\t

\n+\t\t\t{/* Header */}\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tAll Products\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{loaderData.pagination.totalCount} products total (\n+\t\t\t\t\t\t\t\t{allProducts.length} shown)\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t setShowFilters(!showFilters)}\n+\t\t\t\t\t\t\t\tclassName=\"flex items-center space-x-2 rounded-lg border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50 md:hidden dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800\"\n+\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\tFilters\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\tsetSearchParams((prev) => {\n+\t\t\t\t\t\t\t\t\t\tconst newParams = new URLSearchParams(prev)\n+\t\t\t\t\t\t\t\t\t\tnewParams.set('perPage', e.target.value)\n+\t\t\t\t\t\t\t\t\t\tnewParams.delete('page') // Reset page when changing limit\n+\t\t\t\t\t\t\t\t\t\treturn newParams\n+\t\t\t\t\t\t\t\t\t})\n+\t\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\t\tdefaultValue={searchParams.get('perPage') || '9'}\n+\t\t\t\t\t\t\t\tclassName=\"rounded-lg border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:ring-2 focus:ring-amber-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white\"\n+\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\tsetSearchParams((prev) => {\n+\t\t\t\t\t\t\t\t\t\tconst newParams = new URLSearchParams(prev)\n+\t\t\t\t\t\t\t\t\t\tnewParams.set('sortBy', e.target.value)\n+\t\t\t\t\t\t\t\t\t\tnewParams.delete('page') // Reset page when changing sort\n+\t\t\t\t\t\t\t\t\t\treturn newParams\n+\t\t\t\t\t\t\t\t\t})\n+\t\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\t\tdefaultValue={searchParams.get('sortBy') || 'name'}\n+\t\t\t\t\t\t\t\tclassName=\"rounded-lg border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:ring-2 focus:ring-amber-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white\"\n+\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t setViewMode('grid')}\n+\t\t\t\t\t\t\t\t\tclassName={`p-2 ${viewMode === 'grid' ? 'bg-amber-600 text-white' : 'bg-white text-gray-700 dark:bg-gray-800 dark:text-gray-300'}`}\n+\t\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t setViewMode('list')}\n+\t\t\t\t\t\t\t\t\tclassName={`p-2 ${viewMode === 'list' ? 'bg-amber-600 text-white' : 'bg-white text-gray-700 dark:bg-gray-800 dark:text-gray-300'}`}\n+\t\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t{/* Filters Sidebar */}\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\n+\t\t\t\t\t{/* Products Grid/List */}\n+\t\t\t\t\t

\n+\t\t\t\t\t\t{isPageLoading ? (\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tLoading...\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t) : (\n+\t\t\t\t\t\t\t<>\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t{allProducts.map((product) => (\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t\t\t{/* Intersection observer target */}\n+\t\t\t\t\t\t\t\t{hasMore && (\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t{isLoadingMore ? (\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t

Loading more products...

\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t) : (\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t)}\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t)}\n+\n+\t\t\t\t\t\t\t\t{/* End of results message */}\n+\t\t\t\t\t\t\t\t{!hasMore && allProducts.length > 0 && (\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

You've reached the end of the product list!

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t)}\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t)}\n+\n+\t\t\t\t\t\t{allProducts.length === 0 && (\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\tNo products found\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\tTry adjusting your filters to see more results.\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t)}\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\n+\t\t\n+\t)\n+}\ndiff --git a/app/routes/_landing.products._index/use-infinite-product-fetcher.ts b/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\nnew file mode 100644\nindex 0000000..29c7d8b\n--- /dev/null\n+++ b/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\n@@ -0,0 +1,50 @@\n+import { useState, useEffect, useCallback } from 'react'\n+import { useFetcher, useSearchParams, href } from 'react-router'\n+import { type Route } from './+types/route'\n+\n+export function useInfiniteProductFetcher(\n+\tloaderData: Route.ComponentProps['loaderData'],\n+) {\n+\tconst fetcher = useFetcher({\n+\t\tkey: 'infinite-product-fetcher',\n+\t})\n+\tconst { products, pagination } = loaderData\n+\tconst [allProducts, setAllProducts] = useState(products)\n+\tconst [currentPage, setCurrentPage] = useState(pagination.page)\n+\tconst [hasMore, setHasMore] = useState(pagination.hasMore)\n+\tconst [isLoadingMore, setIsLoadingMore] = useState(false)\n+\tconst [searchParams] = useSearchParams()\n+\tuseEffect(\n+\t\tfunction resetStateOnLoaderRefire() {\n+\t\t\tsetAllProducts(products)\n+\t\t\tsetCurrentPage(pagination.page)\n+\t\t\tsetHasMore(pagination.hasMore)\n+\t\t},\n+\t\t[pagination.hasMore, pagination.page, products],\n+\t)\n+\n+\tuseEffect(\n+\t\tfunction setNewlyLoadedProducts() {\n+\t\t\tif (fetcher.data && fetcher.state === 'idle' && isLoadingMore) {\n+\t\t\t\tsetAllProducts((prev) => [...prev, ...(fetcher.data?.products ?? [])])\n+\t\t\t\tsetCurrentPage(fetcher.data.pagination.page)\n+\t\t\t\tsetHasMore(fetcher.data.pagination.hasMore)\n+\t\t\t\tsetIsLoadingMore(false)\n+\t\t\t}\n+\t\t},\n+\t\t[fetcher.data, fetcher.state, isLoadingMore],\n+\t)\n+\n+\tconst loadMoreProducts = useCallback(() => {\n+\t\tsetIsLoadingMore(true)\n+\t\tconst nextPage = currentPage + 1\n+\n+\t\t// Create URL params for the fetch\n+\t\tconst params = new URLSearchParams(searchParams)\n+\t\tparams.set('page', nextPage.toString())\n+\n+\t\tvoid fetcher.load(href('/products') + '?' + params.toString())\n+\t}, [currentPage, fetcher, searchParams])\n+\n+\treturn { fetcher, loadMoreProducts, allProducts, hasMore, isLoadingMore }\n+}\ndiff --git a/app/routes/_landing.products._index.tsx b/app/routes/_landing.products._index.tsx\ndeleted file mode 100644\nindex 992cbfe..0000000\n--- a/app/routes/_landing.products._index.tsx\n+++ /dev/null\n@@ -1,7 +0,0 @@\n-export default function ProductsPage() {\n-\treturn (\n-\t\t

\n-\t\t\tProducts page!\n-\t\t

\n-\t)\n-}\ndiff --git a/app/routes/_landing.products.tsx b/app/routes/_landing.products.tsx\ndeleted file mode 100644\nindex b3f90d3..0000000\n--- a/app/routes/_landing.products.tsx\n+++ /dev/null\n@@ -1,9 +0,0 @@\n-import { Outlet } from 'react-router'\n-\n-export default function ProductsLandingPage() {\n-\treturn (\n-\t\t<>\n-\t\t\t\n-\t\t\n-\t)\n-}\ndiff --git a/app/routes/_landing.terms-of-service.tsx b/app/routes/_landing.terms-of-service.tsx\nindex fde92c5..e57c81b 100644\n--- a/app/routes/_landing.terms-of-service.tsx\n+++ b/app/routes/_landing.terms-of-service.tsx\n@@ -1,5 +1,192 @@\n+import { Shield, Mail } from 'lucide-react'\n+import {\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+\tconstructPrefixedTitle,\n+} from '#app/utils/metadata.js'\n+import { type Route } from './+types/_landing.terms-of-service'\n+\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\tconst rootMeta = getMetaFromMatches(matches, 'root')\n+\tconst prefix = getMetaTitle(rootMeta)\n+\treturn [\n+\t\t{\n+\t\t\ttitle: constructPrefixedTitle('Terms of Service', prefix),\n+\t\t},\n+\t]\n+}\n+\n export default function TOSPage() {\n \treturn (\n-\t\t

\n+\t\t

\n+\t\t\t{/* Hero Section */}\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tTerms of Service\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tLast updated: January 1, 2025\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\n+\t\t\t{/* Content Section */}\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t1. Acceptance of Terms\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tBy accessing and using EpicStore's services, you accept and\n+\t\t\t\t\t\t\t\tagree to be bound by the terms and provision of this agreement.\n+\t\t\t\t\t\t\t\tIf you do not agree to abide by the above, please do not use\n+\t\t\t\t\t\t\t\tthis service.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t2. Use License\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tPermission is granted to temporarily download one copy of the\n+\t\t\t\t\t\t\t\tmaterials on EpicStore's website for personal, non-commercial\n+\t\t\t\t\t\t\t\ttransitory viewing only. This is the grant of a license, not a\n+\t\t\t\t\t\t\t\ttransfer of title, and under this license you may not:\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

modify or copy the materials
\n+\t\t\t\t\t\t\t\t\tuse the materials for any commercial purpose or for any public\n+\t\t\t\t\t\t\t\t\tdisplay\n+\t\t\t\t\t\t\t\t
\n+\t\t\t\t\t\t\t\t\tattempt to reverse engineer any software contained on\n+\t\t\t\t\t\t\t\t\tEpicStore's website\n+\t\t\t\t\t\t\t\t
\n+\t\t\t\t\t\t\t\t\tremove any copyright or other proprietary notations from the\n+\t\t\t\t\t\t\t\t\tmaterials\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t3. Service Availability\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tEpicStore strives to provide continuous service availability.\n+\t\t\t\t\t\t\t\tHowever, we do not guarantee that our services will be available\n+\t\t\t\t\t\t\t\tat all times. We may suspend or discontinue services for\n+\t\t\t\t\t\t\t\tmaintenance, upgrades, or other operational reasons.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t4. User Accounts\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tWhen you create an account with us, you must provide information\n+\t\t\t\t\t\t\t\tthat is accurate, complete, and current at all times. You are\n+\t\t\t\t\t\t\t\tresponsible for safeguarding the password and for all activities\n+\t\t\t\t\t\t\t\tthat occur under your account.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t5. Payment Terms\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tPayment for our services is due according to the billing cycle\n+\t\t\t\t\t\t\t\tselected at the time of subscription. Failure to pay may result\n+\t\t\t\t\t\t\t\tin suspension or termination of service.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t6. Data Protection\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tWe are committed to protecting your data. We implement\n+\t\t\t\t\t\t\t\tappropriate technical and organizational measures to ensure a\n+\t\t\t\t\t\t\t\tlevel of security appropriate to the risk.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t7. Limitation of Liability\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tIn no event shall EpicStore or its suppliers be liable for any\n+\t\t\t\t\t\t\t\tdamages (including, without limitation, damages for loss of data\n+\t\t\t\t\t\t\t\tor profit, or due to business interruption) arising out of the\n+\t\t\t\t\t\t\t\tuse or inability to use the materials on EpicStore's website.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t8. Termination\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tWe may terminate or suspend your account and bar access to the\n+\t\t\t\t\t\t\t\tservice immediately, without prior notice or liability, under\n+\t\t\t\t\t\t\t\tour sole discretion, for any reason whatsoever including but not\n+\t\t\t\t\t\t\t\tlimited to a breach of the Terms.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t9. Changes to Terms\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tEpicStore may revise these terms of service at any time without\n+\t\t\t\t\t\t\t\tnotice. By using this website, you are agreeing to be bound by\n+\t\t\t\t\t\t\t\tthe then current version of these terms of service.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t10. Contact Information\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tIf you have any questions about these Terms of Service, please\n+\t\t\t\t\t\t\t\tcontact us at:\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\tEmail:{' '}\n+\t\t\t\t\t\t\t\t\t\t\tlegal@epic-store.com\n+\t\t\t\t\t\t\t\t\t\t\t
\n+\t\t\t\t\t\t\t\t\t\t\tPhone: +1 (555)\n+\t\t\t\t\t\t\t\t\t\t\t123-4567\n+\t\t\t\t\t\t\t\t\t\t\t
\n+\t\t\t\t\t\t\t\t\t\t\tAddress: 123\n+\t\t\t\t\t\t\t\t\t\t\tDesign District, San Francisco, CA 94105\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\t\t

\n \t)\n }\ndiff --git a/app/routes/_landing.terms-of-use.tsx b/app/routes/_landing.terms-of-use.tsx\nindex e80519b..b6faf8e 100644\n--- a/app/routes/_landing.terms-of-use.tsx\n+++ b/app/routes/_landing.terms-of-use.tsx\n@@ -1,3 +1,203 @@\n+import { FileText, Mail } from 'lucide-react'\n+import {\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+\tconstructPrefixedTitle,\n+} from '#app/utils/metadata.js'\n+import { type Route } from './+types/_landing.terms-of-use'\n+\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\tconst rootMeta = getMetaFromMatches(matches, 'root')\n+\tconst prefix = getMetaTitle(rootMeta)\n+\treturn [\n+\t\t{\n+\t\t\ttitle: constructPrefixedTitle('Terms of Use', prefix),\n+\t\t},\n+\t]\n+}\n+\n export default function TOUPage() {\n-\treturn

\n+\treturn (\n+\t\t

\n+\t\t\t{/* Hero Section */}\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tTerms of Use\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tLast updated: January 1, 2025\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\n+\t\t\t{/* Content Section */}\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t1. Acceptance and Agreement\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tThese Terms of Use (\"Terms\") govern your use of EpicStore's\n+\t\t\t\t\t\t\t\twebsite, products, and services (collectively, the \"Service\").\n+\t\t\t\t\t\t\t\tBy accessing or using our Service, you agree to be bound by\n+\t\t\t\t\t\t\t\tthese Terms.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t2. Acceptable Use\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tYou agree to use our Service only for lawful purposes and in\n+\t\t\t\t\t\t\t\taccordance with these Terms. You agree not to use the Service:\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\tIn any way that violates applicable federal, state, local, or\n+\t\t\t\t\t\t\t\t\tinternational law\n+\t\t\t\t\t\t\t\t
\n+\t\t\t\t\t\t\t\t\tTo engage in any conduct that restricts or inhibits anyone's\n+\t\t\t\t\t\t\t\t\tuse or enjoyment of the Service\n+\t\t\t\t\t\t\t\t
\n+\t\t\t\t\t\t\t\t\tTo impersonate or attempt to impersonate EpicStore or any\n+\t\t\t\t\t\t\t\t\temployee, agent, or affiliate\n+\t\t\t\t\t\t\t\t
\n+\t\t\t\t\t\t\t\t\tTo engage in any automated use of the system without our\n+\t\t\t\t\t\t\t\t\texpress written permission\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t3. User Content\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tOur Service may allow you to post, link, store, share and\n+\t\t\t\t\t\t\t\totherwise make available certain information, text, graphics,\n+\t\t\t\t\t\t\t\tvideos, or other material (\"Content\"). You are responsible for\n+\t\t\t\t\t\t\t\tthe Content that you post to the Service.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tBy posting Content to the Service, you grant us the right and\n+\t\t\t\t\t\t\t\tlicense to use, modify, publicly perform, publicly display,\n+\t\t\t\t\t\t\t\treproduce, and distribute such Content on and through the\n+\t\t\t\t\t\t\t\tService.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t4. Privacy Policy\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tYour privacy is important to us. Our Privacy Policy explains how\n+\t\t\t\t\t\t\t\twe collect, use, and protect information when you use our\n+\t\t\t\t\t\t\t\tService. By using our Service, you agree to the collection and\n+\t\t\t\t\t\t\t\tuse of information in accordance with our Privacy Policy.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t5. Intellectual Property Rights\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tThe Service and its original content, features, and\n+\t\t\t\t\t\t\t\tfunctionality are and will remain the exclusive property of\n+\t\t\t\t\t\t\t\tEpicStore and its licensors. The Service is protected by\n+\t\t\t\t\t\t\t\tcopyright, trademark, and other laws.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t6. Prohibited Uses\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tYou may not use our Service for any unlawful purpose or to\n+\t\t\t\t\t\t\t\tsolicit others to perform unlawful acts. You may not violate any\n+\t\t\t\t\t\t\t\tlaws in your jurisdiction including but not limited to copyright\n+\t\t\t\t\t\t\t\tlaws.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t7. Service Modifications\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tWe reserve the right to modify or discontinue, temporarily or\n+\t\t\t\t\t\t\t\tpermanently, the Service (or any part thereof) with or without\n+\t\t\t\t\t\t\t\tnotice. We shall not be liable to you or any third party for any\n+\t\t\t\t\t\t\t\tmodification, suspension, or discontinuance of the Service.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t8. Disclaimer\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tThe information on this website is provided on an \"as is\" basis.\n+\t\t\t\t\t\t\t\tTo the fullest extent permitted by law, EpicStore excludes all\n+\t\t\t\t\t\t\t\trepresentations, warranties, conditions, and other terms which\n+\t\t\t\t\t\t\t\tmight otherwise be implied by statute, common law, or the law of\n+\t\t\t\t\t\t\t\tequity.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t9. Governing Law\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tThese Terms shall be interpreted and governed by the laws of the\n+\t\t\t\t\t\t\t\tState of California, without regard to its conflict of law\n+\t\t\t\t\t\t\t\tprovisions. Our failure to enforce any right or provision of\n+\t\t\t\t\t\t\t\tthese Terms will not be considered a waiver of those rights.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t10. Contact Us\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tIf you have any questions about these Terms of Use, please\n+\t\t\t\t\t\t\t\tcontact us:\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\t\t

\n+\t)\n }\ndiff --git a/app/routes/_landing.tsx b/app/routes/_landing.tsx\nindex 58b33c2..80bd6ab 100644\n--- a/app/routes/_landing.tsx\n+++ b/app/routes/_landing.tsx\n@@ -1,11 +1,15 @@\n import { Outlet } from 'react-router'\n+import { Footer } from '#app/components/footer'\n+import { Header } from '#app/components/header'\n \n export default function LayoutPage() {\n \treturn (\n \t\t

\n+\t\t\t

\n \t\t\t

\n \t\t\t\t\n \t\t\t

\n+\t\t\t

\n \t)\n }\ndiff --git a/app/routes.ts b/app/routes.ts\nindex 1380c51..83c333f 100644\n--- a/app/routes.ts\n+++ b/app/routes.ts\n@@ -1,32 +1,4 @@\n-import {\n-\ttype RouteConfig,\n-\t// 💰 Use these imports already prepared for you below!\n-\troute,\n-\tindex,\n-\tlayout,\n-} from '@react-router/dev/routes'\n+import { type RouteConfig } from '@react-router/dev/routes'\n+import { flatRoutes } from '@react-router/fs-routes'\n \n-// 🐨 Create your route configuration here.\n-// 💰 This file is used to define the structure of your application routes.\n-//\n-// 🐨 You need to add the following routes:\n-// - `Landing page layout` that wraps all the other routes (`./routes/_landing.tsx`).\n-// - `/` - The index route that renders the landing page (`./routes/_landing._index/route.tsx`).\n-// - `/about` - The about route that renders the `About` page (`./routes/_landing.about.tsx`).\n-// - `/products` - The products route that renders the `Products` page (`./routes/_landing.products._index.tsx`).\n-// - `/products/:productId` - The product details route that renders the `ProductDetails` page (`./routes/_landing.products.$productId.tsx`).\n-// - `/contact` - The contact route that renders the `Contact` page (`./routes/_landing.contact.tsx`).\n-// - `/cart` - The cart route that renders the `Cart` page (`./routes/_landing.cart.tsx`).\n-// - `/terms-of-use` - The terms of use route that renders the `TermsOfUse` page (`./routes/_landing.terms-of-use.tsx`).\n-// - `/terms-of-service` - The terms of service route that renders the `TermsOfService` page (`./routes/_landing.terms-of-service.tsx`).\n-\n-// 💰 Create a products route with children here!\n-// - Products page (\"/products\")\n-// - Product details page (\"/products/:productId\")\n-//\n-// 💰 The files are already ready for you in the `app/routes` directory!\n-//\n-// 💯 Bonus points: Create a utility to define landing page routes\n-// and use it to create the routes for the landing page.\n-\n-export default [] satisfies RouteConfig\n+export default flatRoutes() satisfies RouteConfig\ndiff --git a/app/utils/metadata.ts b/app/utils/metadata.ts\nnew file mode 100644\nindex 0000000..145df9b\n--- /dev/null\n+++ b/app/utils/metadata.ts\n@@ -0,0 +1,40 @@\n+import { type MetaDescriptor } from 'react-router'\n+\n+/**\n+ * Get the meta title from an array of meta descriptors.\n+ * @param metaDescriptors - An array of meta descriptors from route matches\n+ * @returns The meta title or null if not found\n+ */\n+export function getMetaTitle(metaDescriptors?: MetaDescriptor[]) {\n+\tif (!metaDescriptors) return null\n+\n+\tfor (const item of metaDescriptors) {\n+\t\tif ('title' in item && item.title && typeof item.title === 'string')\n+\t\t\treturn item.title\n+\t}\n+\treturn null\n+}\n+/**\n+ * Helper to get the meta array from route matches by route id.\n+ * @param matches - An array of route matches\n+ * @param id - The id of the route to find\n+ * @returns An array of meta descriptors for the matching route\n+ */\n+export function getMetaFromMatches<\n+\tT extends { id?: string; meta?: MetaDescriptor[] },\n+>(matches: (T | undefined)[], id: string) {\n+\tfor (const match of matches) {\n+\t\tif (match?.id === id && match?.meta) return match.meta\n+\t}\n+\treturn []\n+}\n+\n+/**\n+ * Helper to construct a prefixed title. If no prefix is provided, returns the original title.\n+ * @param title - The original title\n+ * @param prefix - The prefix to add\n+ * @returns The constructed title\n+ */\n+export function constructPrefixedTitle(title: string, prefix?: string | null) {\n+\treturn prefix ? `${prefix} | ${title}` : title\n+}\ndiff --git a/package.json b/package.json\nindex 4587bd3..03af7b2 100644\n--- a/package.json\n+++ b/package.json\n@@ -1,18 +1,28 @@\n {\n- \"name\": \"exercises_01.routing_01.problem.routing\",\n+ \"name\": \"exercises_03.data-fetching_04.solution.infinite-fetching-with-fetchers\",\n \"private\": true,\n \"type\": \"module\",\n \"imports\": {\n- \"#app/*\": \"./app/*\"\n+ \"#app/*\": \"./app/*\",\n+ \"#/prisma-generated/*\": \"./app/generated/prisma/*\"\n },\n \"scripts\": {\n \"build\": \"react-router build\",\n \"dev\": \"react-router dev\",\n \"start\": \"react-router-serve ./build/server/index.js\",\n \"typecheck\": \"react-router typegen && tsc\",\n- \"test\": \"playwright test\"\n+ \"test\": \"playwright test\",\n+ \"db:gen\": \"prisma generate\",\n+ \"db:studio\": \"prisma studio\",\n+ \"db:migrate\": \"DATABASE_URL=file:./data.db prisma migrate dev\",\n+ \"db:push\": \"prisma db push\",\n+ \"db:reset\": \"prisma migrate reset\",\n+ \"db:seed\": \"DATABASE_URL=file:./prisma/data.db tsx prisma/seed.ts\"\n },\n \"dependencies\": {\n+ \"@dotenvx/dotenvx\": \"^1.51.0\",\n+ \"@prisma/adapter-better-sqlite3\": \"^6.16.2\",\n+ \"@prisma/client\": \"^6.16.2\",\n \"@react-router/node\": \"^7.9.5\",\n \"@react-router/serve\": \"^7.9.5\",\n \"isbot\": \"^5.1.27\",\n@@ -22,14 +32,19 @@\n \"react-router\": \"^7.9.5\"\n },\n \"devDependencies\": {\n+ \"@faker-js/faker\": \"^10.0.0\",\n \"@playwright/test\": \"^1.39.0\",\n \"@react-router/dev\": \"^7.9.5\",\n+ \"@react-router/fs-routes\": \"^7.9.5\",\n \"@tailwindcss/vite\": \"^4.1.4\",\n \"@types/node\": \"^20\",\n \"@types/react\": \"^19.1.2\",\n \"@types/react-dom\": \"^19.1.2\",\n \"dotenv\": \"^16.3.1\",\n+ \"prisma\": \"^6.16.2\",\n+ \"react-router-devtools\": \"^5.1.3\",\n \"tailwindcss\": \"^4.1.4\",\n+ \"tsx\": \"^4.20.5\",\n \"typescript\": \"^5.8.3\",\n \"vite\": \"^6.3.3\",\n \"vite-plugin-devtools-json\": \"^1.0.0\"\ndiff --git a/prisma/migrations/20251002111449_init_project/migration.sql b/prisma/migrations/20251002111449_init_project/migration.sql\nnew file mode 100644\nindex 0000000..7938b7f\n--- /dev/null\n+++ b/prisma/migrations/20251002111449_init_project/migration.sql\n@@ -0,0 +1,67 @@\n+-- CreateTable\n+CREATE TABLE \"Product\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"name\" TEXT NOT NULL,\n+ \"description\" TEXT NOT NULL,\n+ \"imageUrl\" TEXT NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL,\n+ \"price\" REAL NOT NULL,\n+ \"reviewScore\" REAL NOT NULL DEFAULT 0,\n+ \"categoryId\" TEXT NOT NULL,\n+ \"brandId\" TEXT NOT NULL,\n+ CONSTRAINT \"Product_categoryId_fkey\" FOREIGN KEY (\"categoryId\") REFERENCES \"Category\" (\"id\") ON DELETE RESTRICT ON UPDATE CASCADE,\n+ CONSTRAINT \"Product_brandId_fkey\" FOREIGN KEY (\"brandId\") REFERENCES \"Brand\" (\"id\") ON DELETE RESTRICT ON UPDATE CASCADE\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"Category\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"name\" TEXT NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"Brand\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"name\" TEXT NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"Variation\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"color\" TEXT NOT NULL,\n+ \"size\" TEXT NOT NULL,\n+ \"quantity\" INTEGER NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL,\n+ \"productId\" TEXT NOT NULL,\n+ CONSTRAINT \"Variation_productId_fkey\" FOREIGN KEY (\"productId\") REFERENCES \"Product\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"ProductReview\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"rating\" REAL NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL,\n+ \"variationId\" TEXT,\n+ \"productId\" TEXT NOT NULL,\n+ CONSTRAINT \"ProductReview_variationId_fkey\" FOREIGN KEY (\"variationId\") REFERENCES \"Variation\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE,\n+ CONSTRAINT \"ProductReview_productId_fkey\" FOREIGN KEY (\"productId\") REFERENCES \"Product\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE\n+);\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"Category_name_key\" ON \"Category\"(\"name\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"Brand_name_key\" ON \"Brand\"(\"name\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"Variation_productId_color_size_key\" ON \"Variation\"(\"productId\", \"color\", \"size\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"ProductReview_productId_variationId_key\" ON \"ProductReview\"(\"productId\", \"variationId\");\ndiff --git a/prisma/migrations/20251003085813_add_comments_to_product_review/migration.sql b/prisma/migrations/20251003085813_add_comments_to_product_review/migration.sql\nnew file mode 100644\nindex 0000000..0a09a82\n--- /dev/null\n+++ b/prisma/migrations/20251003085813_add_comments_to_product_review/migration.sql\n@@ -0,0 +1,2 @@\n+-- AlterTable\n+ALTER TABLE \"ProductReview\" ADD COLUMN \"comment\" TEXT;\ndiff --git a/prisma/migrations/20251004101747_add_category_images_to_categories/migration.sql b/prisma/migrations/20251004101747_add_category_images_to_categories/migration.sql\nnew file mode 100644\nindex 0000000..a4d4988\n--- /dev/null\n+++ b/prisma/migrations/20251004101747_add_category_images_to_categories/migration.sql\n@@ -0,0 +1,22 @@\n+/*\n+ Warnings:\n+\n+ - Added the required column `imageUrl` to the `Category` table without a default value. This is not possible if the table is not empty.\n+\n+*/\n+-- RedefineTables\n+PRAGMA defer_foreign_keys=ON;\n+PRAGMA foreign_keys=OFF;\n+CREATE TABLE \"new_Category\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"name\" TEXT NOT NULL,\n+ \"imageUrl\" TEXT NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL\n+);\n+INSERT INTO \"new_Category\" (\"createdAt\", \"id\", \"name\", \"updatedAt\") SELECT \"createdAt\", \"id\", \"name\", \"updatedAt\" FROM \"Category\";\n+DROP TABLE \"Category\";\n+ALTER TABLE \"new_Category\" RENAME TO \"Category\";\n+CREATE UNIQUE INDEX \"Category_name_key\" ON \"Category\"(\"name\");\n+PRAGMA foreign_keys=ON;\n+PRAGMA defer_foreign_keys=OFF;\ndiff --git a/prisma/migrations/migration_lock.toml b/prisma/migrations/migration_lock.toml\nnew file mode 100644\nindex 0000000..2a5a444\n--- /dev/null\n+++ b/prisma/migrations/migration_lock.toml\n@@ -0,0 +1,3 @@\n+# Please do not edit this file manually\n+# It should be added in your version-control system (e.g., Git)\n+provider = \"sqlite\"\ndiff --git a/prisma/schema.prisma b/prisma/schema.prisma\nnew file mode 100644\nindex 0000000..f1a8dcd\n--- /dev/null\n+++ b/prisma/schema.prisma\n@@ -0,0 +1,86 @@\n+// This is your Prisma schema file,\n+// learn more about it in the docs: https://pris.ly/d/prisma-schema\n+\n+// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?\n+// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init\n+\n+generator client {\n+ provider = \"prisma-client\"\n+ moduleFormat = \"esm\"\n+ engineType = \"client\"\n+ output = \"../app/generated/prisma\"\n+}\n+\n+datasource db {\n+ provider = \"sqlite\"\n+ url = env(\"DATABASE_URL\")\n+}\n+\n+model Product {\n+ id String @id @default(cuid())\n+ name String\n+ description String\n+ imageUrl String\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+ price Float\n+ reviewScore Float @default(0)\n+ category Category @relation(fields: [categoryId], references: [id])\n+ categoryId String\n+\n+ brand Brand @relation(fields: [brandId], references: [id])\n+ brandId String\n+\n+ variations Variation[]\n+ reviews ProductReview[]\n+}\n+\n+model Category {\n+ id String @id @default(cuid())\n+ name String @unique\n+ imageUrl String\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ products Product[]\n+}\n+\n+model Brand {\n+ id String @id @default(cuid())\n+ name String @unique\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ products Product[]\n+}\n+\n+model Variation {\n+ id String @id @default(cuid())\n+ color String\n+ size String\n+ quantity Int\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ product Product @relation(fields: [productId], references: [id], onDelete: Cascade)\n+ productId String\n+\n+ productReviews ProductReview[]\n+\n+ @@unique([productId, color, size])\n+}\n+\n+model ProductReview {\n+ id String @id @default(cuid())\n+ rating Float\n+ comment String?\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ variation Variation? @relation(fields: [variationId], references: [id], onDelete: Cascade)\n+ variationId String?\n+ product Product @relation(fields: [productId], references: [id], onDelete: Cascade)\n+ productId String\n+\n+ @@unique([productId, variationId])\n+}\ndiff --git a/prisma/seed.ts b/prisma/seed.ts\nnew file mode 100644\nindex 0000000..3262c03\n--- /dev/null\n+++ b/prisma/seed.ts\n@@ -0,0 +1,156 @@\n+import { faker } from '@faker-js/faker'\n+import { db } from '#app/db.server.js'\n+import { type ProductUncheckedCreateInput } from '#app/generated/prisma/models.js'\n+\n+const categories = [\n+\t'Running',\n+\t'Casual',\n+\t'Athletic',\n+\t'Lifestyle',\n+\t'Hiking',\n+\t'Comfort',\n+\t'Formal',\n+]\n+\n+const brands = [\n+\t'SkyStep',\n+\t'StreetWalk',\n+\t'ProAthlete',\n+\t'TimelessStep',\n+\t'OutdoorPro',\n+\t'VelocityRun',\n+\t'SoftStep',\n+\t'ExecutiveWear',\n+]\n+\n+const sneakerImages = [\n+\t'https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t'https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t'https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t'https://images.pexels.com/photos/1456706/pexels-photo-1456706.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t'https://images.pexels.com/photos/1598508/pexels-photo-1598508.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t'https://images.pexels.com/photos/2529157/pexels-photo-2529157.jpeg?auto=compress&cs=tinysrgb&w=600',\n+\t'https://images.pexels.com/photos/1456705/pexels-photo-1456705.jpeg?auto=compress&cs=tinysrgb&w=600',\n+]\n+const productNames = [\n+\t'Air Zoom Pegasus 38',\n+\t'Ultraboost 21',\n+\t'Gel-Kayano 27',\n+\t'React Infinity Run Flyknit',\n+\t'Fresh Foam 1080v11',\n+\t'Speedcross 5',\n+\t'Cloudswift',\n+\t'Chuck Taylor All Star',\n+\t'Samba OG',\n+\t'Sneaker X Pro',\n+\t'Runner Max',\n+\t'Street Style',\n+\t'Urban Walk',\n+\t'Trail Blazer',\n+\t'Comfy Step',\n+\t'Flex Runner',\n+\t'Power Boost',\n+\t'Elite Trainer',\n+\t'Comfort Cloud',\n+\t'Business Elite',\n+]\n+\n+function buildProductCatalog(\n+\ttargetCount: number,\n+\tcategoryMap: Map,\n+\tbrandMap: Map,\n+): ProductUncheckedCreateInput[] {\n+\tconst products: ProductUncheckedCreateInput[] = []\n+\tfor (let i = 0; i < targetCount; i++) {\n+\t\tproducts.push({\n+\t\t\tname:\n+\t\t\t\tfaker.helpers.arrayElement(productNames) +\n+\t\t\t\t' ' +\n+\t\t\t\tfaker.commerce.productAdjective(),\n+\t\t\tdescription: faker.lorem.paragraphs(),\n+\t\t\timageUrl: faker.helpers.arrayElement(sneakerImages),\n+\t\t\tprice: parseFloat(faker.commerce.price({ min: 20, max: 500, dec: 2 })),\n+\t\t\treviewScore: faker.number.int({ min: 1, max: 5 }),\n+\t\t\tcategoryId: categoryMap.get(faker.helpers.arrayElement(categories))!,\n+\t\t\tbrandId: brandMap.get(faker.helpers.arrayElement(brands))!,\n+\t\t})\n+\t}\n+\n+\treturn products\n+}\n+\n+async function seed() {\n+\tconsole.log('Seeding database...')\n+\tconsole.time('Database seeded')\n+\n+\tawait db.variation.deleteMany()\n+\tawait db.productReview.deleteMany()\n+\tawait db.product.deleteMany()\n+\tawait db.category.deleteMany()\n+\tawait db.brand.deleteMany()\n+\n+\tconst categoryNames = categories.filter((name) => name !== 'All')\n+\tconst brandNames = brands.filter((name) => name !== 'All')\n+\n+\tconst categoryMap = new Map()\n+\tfor (const name of categoryNames) {\n+\t\tconst category = await db.category.create({\n+\t\t\tdata: { name, imageUrl: faker.helpers.arrayElement(sneakerImages) },\n+\t\t})\n+\t\tcategoryMap.set(name, category.id)\n+\t}\n+\n+\tconst brandMap = new Map()\n+\tfor (const name of brandNames) {\n+\t\tconst brand = await db.brand.create({ data: { name } })\n+\t\tbrandMap.set(name, brand.id)\n+\t}\n+\n+\tconst catalog = buildProductCatalog(100, categoryMap, brandMap)\n+\n+\tfor (const product of catalog) {\n+\t\tconst createdProduct = await db.product.create({\n+\t\t\tdata: product,\n+\t\t})\n+\n+\t\tconst colors = ['Red', 'Blue', 'Black', 'White']\n+\t\tconst sizes = ['9', '10', '11', '12']\n+\t\tconst variations = []\n+\n+\t\tfor (const color of colors) {\n+\t\t\tfor (const size of sizes) {\n+\t\t\t\tvariations.push({\n+\t\t\t\t\tproductId: createdProduct.id,\n+\t\t\t\t\tcolor,\n+\t\t\t\t\tsize,\n+\t\t\t\t\tquantity: faker.number.int({ min: 0, max: 2 }),\n+\t\t\t\t})\n+\t\t\t}\n+\t\t}\n+\n+\t\tawait db.variation.createMany({ data: variations })\n+\t\tconst createdVariations = await db.variation.findMany({\n+\t\t\twhere: { productId: createdProduct.id },\n+\t\t})\n+\t\tfor (const v of createdVariations) {\n+\t\t\tawait db.productReview.create({\n+\t\t\t\tdata: {\n+\t\t\t\t\tproductId: createdProduct.id,\n+\t\t\t\t\trating: faker.number.int({ min: 1, max: 5 }),\n+\t\t\t\t\tvariationId: v.id,\n+\t\t\t\t},\n+\t\t\t})\n+\t\t}\n+\t}\n+\n+\tconsole.timeEnd('Database seeded')\n+}\n+\n+seed()\n+\t.catch((e) => {\n+\t\tconsole.error(e)\n+\t\tprocess.exit(1)\n+\t})\n+\t.finally(async () => {\n+\t\tawait db.$disconnect()\n+\t})\ndiff --git a/prisma.config.ts b/prisma.config.ts\nnew file mode 100644\nindex 0000000..b2c681c\n--- /dev/null\n+++ b/prisma.config.ts\n@@ -0,0 +1,13 @@\n+import path from 'node:path'\n+import { type PrismaConfig } from 'prisma'\n+\n+// Import environment variables\n+import 'dotenv/config'\n+\n+export default {\n+\tschema: path.join('prisma', 'schema.prisma'),\n+\tmigrations: {\n+\t\tpath: path.join('prisma', 'migrations'),\n+\t\tseed: 'npm run db:seed',\n+\t},\n+} satisfies PrismaConfig\ndiff --git a/tests/e2e/metadata.test.ts b/tests/e2e/metadata.test.ts\nnew file mode 100644\nindex 0000000..eb73e64\n--- /dev/null\n+++ b/tests/e2e/metadata.test.ts\n@@ -0,0 +1,34 @@\n+import test, { expect } from '@playwright/test'\n+\n+test.describe('Routing E2E Tests', () => {\n+\ttest('should navigate to home page and render correct content', async ({\n+\t\tpage,\n+\t}) => {\n+\t\tawait page.goto('/')\n+\t\tawait expect(page).toHaveTitle('Epic Shop')\n+\n+\t\t// Check for duplicate elements\n+\t\tconst titleElements = page.locator('head > title')\n+\t\tawait expect(titleElements).toHaveCount(1)\n+\t})\n+\n+\ttest('should navigate to products page and render correct content', async ({\n+\t\tpage,\n+\t}) => {\n+\t\tawait page.goto('/products')\n+\t\tawait expect(page).toHaveTitle('Epic Shop | All Products')\n+\t\t// Check for duplicate <title> elements\n+\t\tconst titleElements = page.locator('head > title')\n+\t\tawait expect(titleElements).toHaveCount(1)\n+\t})\n+\n+\ttest('should navigate to specific product page and render correct content', async ({\n+\t\tpage,\n+\t}) => {\n+\t\tawait page.goto('/products/1')\n+\t\tawait expect(page).toHaveTitle('Epic Shop | Product overview')\n+\t\t// Check for duplicate <title> elements\n+\t\tconst titleElements = page.locator('head > title')\n+\t\tawait expect(titleElements).toHaveCount(1)\n+\t})\n+})\ndiff --git a/tests/e2e/routing.test.ts b/tests/e2e/routing.test.ts\nindex f2055e7..a1bc1bb 100644\n--- a/tests/e2e/routing.test.ts\n+++ b/tests/e2e/routing.test.ts\n@@ -5,48 +5,49 @@ test.describe('Routing E2E Tests', () => {\n \t\tpage,\n \t}) => {\n \t\tawait page.goto('/')\n-\t\tawait expect(page.getByText('Landing page!')).toBeVisible()\n+\t\tawait expect(page.getByRole('heading', { name: 'Step Into' })).toBeVisible()\n \t})\n \n \ttest('should navigate to about page and render correct content', async ({\n \t\tpage,\n \t}) => {\n \t\tawait page.goto('/about')\n-\t\tawait expect(page.getByText('About page!')).toBeVisible()\n+\t\tawait expect(page.getByRole('heading', { name: 'Our Story' })).toBeVisible()\n \t})\n \n \ttest('should navigate to contact page and render correct content', async ({\n \t\tpage,\n \t}) => {\n \t\tawait page.goto('/contact')\n-\t\tawait expect(page.getByText('Contact page!')).toBeVisible()\n+\t\tawait expect(\n+\t\t\tpage.getByRole('heading', { name: 'Get in Touch' }),\n+\t\t).toBeVisible()\n \t})\n \n \ttest('should navigate to products page and render correct content', async ({\n \t\tpage,\n \t}) => {\n \t\tawait page.goto('/products')\n-\t\tawait expect(page.getByText('Products page!')).toBeVisible()\n+\t\tawait expect(\n+\t\t\tpage.getByRole('heading', { name: 'All Products' }),\n+\t\t).toBeVisible()\n \t})\n \n \ttest('should navigate to terms-of-service page and render correct content', async ({\n \t\tpage,\n \t}) => {\n \t\tawait page.goto('/terms-of-service')\n-\t\tawait expect(page.getByText('Terms of Service page!')).toBeVisible()\n+\t\tawait expect(\n+\t\t\tpage.getByRole('heading', { name: 'Terms of Service' }),\n+\t\t).toBeVisible()\n \t})\n \n \ttest('should navigate to terms-of-use page and render correct content', async ({\n \t\tpage,\n \t}) => {\n \t\tawait page.goto('/terms-of-use')\n-\t\tawait expect(page.getByText('Terms of Use page!')).toBeVisible()\n-\t})\n-\n-\ttest('should navigate to specific product page and render correct content', async ({\n-\t\tpage,\n-\t}) => {\n-\t\tawait page.goto('/products/1')\n-\t\tawait expect(page.getByText('Product Detail Page')).toBeVisible()\n+\t\tawait expect(\n+\t\t\tpage.getByRole('heading', { name: 'Terms of Use' }),\n+\t\t).toBeVisible()\n \t})\n })\ndiff --git a/tests/e2e/styling.test.ts b/tests/e2e/styling.test.ts\nnew file mode 100644\nindex 0000000..7172de8\n--- /dev/null\n+++ b/tests/e2e/styling.test.ts\n@@ -0,0 +1,24 @@\n+import test, { expect } from '@playwright/test'\n+\n+test.describe('Routing E2E Tests', () => {\n+\ttest('should navigate to home page and render correct content', async ({\n+\t\tpage,\n+\t}) => {\n+\t\tawait page.goto('/')\n+\t\tconst stylesheets = await page.locator('link[rel=\"stylesheet\"]').all()\n+\t\texpect(stylesheets.length).toBeGreaterThan(0)\n+\t\tconst stylesheetValues = await Promise.all(\n+\t\t\tstylesheets.map(async (link) => {\n+\t\t\t\tconst href = await link.getAttribute('href')\n+\t\t\t\treturn href\n+\t\t\t}),\n+\t\t)\n+\t\tconst requiredStylesheets = [\n+\t\t\t'/app/app.css',\n+\t\t\t'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',\n+\t\t]\n+\t\trequiredStylesheets.forEach((requiredStylesheet) => {\n+\t\t\texpect(stylesheetValues).toContain(requiredStylesheet)\n+\t\t})\n+\t})\n+})\ndiff --git a/vite.config.ts b/vite.config.ts\nindex 7d1a025..2ea2968 100644\n--- a/vite.config.ts\n+++ b/vite.config.ts\n@@ -1,10 +1,16 @@\n import { reactRouter } from '@react-router/dev/vite'\n import tailwindcss from '@tailwindcss/vite'\n+import { reactRouterDevTools } from 'react-router-devtools'\n import { defineConfig } from 'vite'\n import devtoolsJson from 'vite-plugin-devtools-json'\n \n export default defineConfig({\n-\tplugins: [tailwindcss(), reactRouter(), devtoolsJson()],\n+\tplugins: [\n+\t\treactRouterDevTools(),\n+\t\ttailwindcss(),\n+\t\treactRouter(),\n+\t\tdevtoolsJson(),\n+\t],\n \tserver: {\n \t\tport: process.env.PORT ? parseInt(process.env.PORT) : 3000,\n \t},"] </article></body></html>

.env-0+11App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

.env.example-0+1App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/app.css-0+16App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/footer.tsx-0+109App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/header.tsx-0+133App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/product-card.tsx-0+54App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/db.server.ts-0+9App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/domain/brand.server.ts-0+9App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/domain/category.server.ts-0+16App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/domain/products.server.ts-0+207App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/hooks/use-intersection-observer.ts-0+28App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/root.tsx-6+30App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/categories-section.tsx-0+45App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/featured-products.section.tsx-0+43App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/features-section.tsx-0+51App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/hero-section.tsx-0+61App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/newsletter-section.tsx-0+25App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/route.tsx-3+36App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.about.tsx-3+217App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.cart.tsx-7+263App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.contact.tsx-3+321App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products.$productId.tsx-7+403App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index/product-filters.tsx-0+109App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index/route.tsx-0+211App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index/use-infinite-product-fetcher.ts-0+50App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index.tsx-7+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products.tsx-9+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.terms-of-service.tsx-5+192App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.terms-of-use.tsx-3+203App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.tsx-11+15App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes.ts-32+4App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/utils/metadata.ts-0+40App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

package.json-32+47App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/20251002111449_init_project/migration.sql-0+67App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/20251003085813_add_comments_to_product_review/migration.sql-0+2App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/20251004101747_add_category_images_to_categories/migration.sql-0+22App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/migration_lock.toml-0+3App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/schema.prisma-0+86App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/seed.ts-0+156App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma.config.ts-0+13App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tests/e2e/metadata.test.ts-0+34App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tests/e2e/routing.test.ts-48+49App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tests/e2e/styling.test.ts-0+24App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

vite.config.ts-10+16App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

.env-0+11App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

.env.example-0+1App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/app.css-0+16App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/footer.tsx-0+109App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/header.tsx-0+133App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/product-card.tsx-0+54App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/db.server.ts-0+9App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/domain/brand.server.ts-0+9App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/domain/category.server.ts-0+16App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/domain/products.server.ts-0+207App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/hooks/use-intersection-observer.ts-0+28App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/root.tsx-6+30App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/categories-section.tsx-0+45App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/featured-products.section.tsx-0+43App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/features-section.tsx-0+51App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/hero-section.tsx-0+61App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/newsletter-section.tsx-0+25App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/route.tsx-3+36App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.about.tsx-3+217App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.cart.tsx-7+263App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.contact.tsx-3+321App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products.$productId.tsx-7+403App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index/product-filters.tsx-0+109App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index/route.tsx-0+211App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index/use-infinite-product-fetcher.ts-0+50App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index.tsx-7+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products.tsx-9+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.terms-of-service.tsx-5+192App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.terms-of-use.tsx-3+203App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.tsx-11+15App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes.ts-32+4App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/utils/metadata.ts-0+40App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

package.json-32+47App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/20251002111449_init_project/migration.sql-0+67App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/20251003085813_add_comments_to_product_review/migration.sql-0+2App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/migrations/20251004101747_add_category_images_to_categories/migration.sql-0+22App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2