P14:[{"_334":68,"_335":65,"_336":337},"app1","app2","diffPatch","diff --git a/app/routes/_landing._index/categories-section.tsx b/app/routes/_landing._index/categories-section.tsx\nindex 7e355f9..7eac87c 100644\n--- a/app/routes/_landing._index/categories-section.tsx\n+++ b/app/routes/_landing._index/categories-section.tsx\n@@ -1,32 +1,11 @@\n import { Link } from 'react-router'\n import { type Category } from '#app/domain/category.server.ts'\n \n-// 💣 We don't need these categories anymore! Let's remove them!\n-const categories = [\n-\t{\n-\t\tname: 'Running',\n-\t\timageUrl:\n-\t\t\t'https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=400',\n-\t},\n-\t{\n-\t\tname: 'Casual',\n-\t\timageUrl:\n-\t\t\t'https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&w=400',\n-\t},\n-\t{\n-\t\tname: 'Athletic',\n-\t\timageUrl:\n-\t\t\t'https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&w=400',\n-\t},\n-\t{\n-\t\tname: 'Formal',\n-\t\timageUrl:\n-\t\t\t'https://images.pexels.com/photos/1598507/pexels-photo-1598507.jpeg?auto=compress&cs=tinysrgb&w=400',\n-\t},\n-]\n-\n-// 🐨 Use the categories provided to the component instead of the hardcoded ones\n-export const CategoriesSection = ({}: { categories: Category[] }) => {\n+export const CategoriesSection = ({\n+\tcategories,\n+}: {\n+\tcategories: Category[]\n+}) => {\n \treturn (\n \t\t

\n \t\t\t

\ndiff --git a/app/routes/_landing._index/featured-products.section.tsx b/app/routes/_landing._index/featured-products.section.tsx\nindex 50e9256..b86dd99 100644\n--- a/app/routes/_landing._index/featured-products.section.tsx\n+++ b/app/routes/_landing._index/featured-products.section.tsx\n@@ -1,21 +1,15 @@\n-import { ArrowRight, Star } from 'lucide-react'\n+import { ArrowRight } from 'lucide-react'\n import { Link } from 'react-router'\n-// 🐨 You should use the ProductCard component to render each product instead of the JSX\n-// that is currently in place\n import { ProductCard } from '#app/components/product-card.js'\n import { type ProductCardInfo } from '#app/domain/products.server.js'\n-// 💣 We Want to remove this file completely and use dynamic info from the DB\n-import { products as hardcodedProducts } from '../../../data/products'\n \n interface FeaturedProductsSectionProps {\n \tproducts: ProductCardInfo[]\n }\n \n-// 🐨 Access the dynamic products here and use them instead of the hardcoded ones\n-export const FeaturedProductsSection = ({}: FeaturedProductsSectionProps) => {\n-\t// 💰 You get 4 products from the server at this point!\n-\tconst products = hardcodedProducts.slice(0, 4)\n-\n+export const FeaturedProductsSection = ({\n+\tproducts,\n+}: FeaturedProductsSectionProps) => {\n \treturn (\n \t\t

\n \t\t\t

\n@@ -31,43 +25,7 @@ export const FeaturedProductsSection = ({}: FeaturedProductsSectionProps) => {\n \t\t\t\t

\n \t\t\t\t\t{products.map((product) => (\n \t\t\t\t\t\t// 🐨 Replace this with the ProductCard component that 🧝‍♀️ prepared!\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\t\n-\t\t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t\t\t{product.reviewScore}\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\t\t

\n-\t\t\t\t\t\t\t\t\t{product.brand.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{product.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\n-\t\t\t\t\t\t\t\t\t\t${product.price}\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.reviews.length} reviews\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\t\n \t\t\t\t\t))}\n \t\t\t\t

\n \ndiff --git a/app/routes/_landing._index/route.tsx b/app/routes/_landing._index/route.tsx\nindex 9130c54..f1ad37d 100644\n--- a/app/routes/_landing._index/route.tsx\n+++ b/app/routes/_landing._index/route.tsx\n@@ -15,30 +15,24 @@ export const meta: Route.MetaFunction = ({ matches }) => {\n }\n \n export const loader = async () => {\n-\t// 🐨 You should fetch the data directly from the DB here!\n-\t// 💰 Bonus points: Optimize the retrieval of products and categories by fetching them in parallel\n-\t// 💰 You can use the function 🧝‍♀️ prepared for us above called `getProducts`\n-\t// 💰 take 3 products only via `perPage`\n+\tconst [{ products }, { categories }] = await Promise.all([\n+\t\tgetProducts({ perPage: 3 }),\n+\t\tgetAllCategories({ perPage: 4 }),\n+\t])\n \n-\t// 💰 You can use the function 🧝‍♀️ prepared for us above called `getAllCategories`\n-\t// 💰 take 4 categories only\n-\n-\t// 💰 These return just empty arrays, these should return actual data from the DB\n-\treturn { products: [], categories: [] }\n+\treturn { products, categories }\n }\n \n // 🐨 Let's access the data we have sent from the server and use it in the components\n // 💰 You can access the data directly from the loader as a prop of the component\n // 💰 Try using `loaderData` to access the data\n-export default function HomePage({}: Route.ComponentProps) {\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{/** 💰 Let's pass in the actual categories here! */}\n-\t\t\t\n-\t\t\t{/** 💰 Let's pass in the actual products here! */}\n-\t\t\t\n+\t\t\t\n+\t\t\t\n \t\t\t\n \t\t

\n \t)\ndiff --git a/app/routes/_landing.products.$productId.tsx b/app/routes/_landing.products.$productId.tsx\nindex b595dd6..74dc280 100644\n--- a/app/routes/_landing.products.$productId.tsx\n+++ b/app/routes/_landing.products.$productId.tsx\n@@ -9,9 +9,7 @@ import {\n \tMinus,\n } from 'lucide-react'\n import { useState } from 'react'\n-import { useParams, Link } from 'react-router'\n-// 🐨 You should use the ProductCard component to render each product instead of the JSX\n-// that is currently in place\n+import { Link } from 'react-router'\n import { ProductCard } from '#app/components/product-card.js'\n import {\n \tgetProductById,\n@@ -22,8 +20,6 @@ import {\n \tgetMetaTitle,\n \tconstructPrefixedTitle,\n } from '#app/utils/metadata.js'\n-// 💣 We will remove this completely by the end\n-import { products } from '../../data/products'\n import { type Route } from './+types/_landing.products.$productId'\n \n export const meta: Route.MetaFunction = ({ matches }) => {\n@@ -36,33 +32,29 @@ export const meta: Route.MetaFunction = ({ matches }) => {\n \t]\n }\n \n-// 🐨 You should fetch the product by its ID in the loader, then fetch related products!\n-// 🐨 Let's actually use the current route params to fetch the product and related products\n export const loader = async ({ params }: Route.LoaderArgs) => {\n-\t// 💰 You can use the function 🧝‍♀️ prepared for us above called `getProductById`\n-\t// 💰 Don't forget that you have access to the current routes params from above!\n-\n-\t// 💰 You can use the function 🧝‍♀️ prepared for us above called `getRelatedProducts`\n-\t// 💰 Don't forget, you have the product's category and brand from fetching it above\n+\tconst { productId } = params\n+\tconst product = await getProductById(productId)\n+\tconst relatedProducts = await getRelatedProducts(\n+\t\tproduct?.id,\n+\t\tproduct?.category.id,\n+\t\tproduct?.brand.id,\n+\t)\n \n-\t// 💰 These return just empty objects/arrays, these should return actual data from the DB\n \treturn {\n-\t\tproduct: {},\n-\t\trelatedProducts: [],\n+\t\tproduct,\n+\t\trelatedProducts,\n \t}\n }\n \n-// 🐨 Let's use the loaderData and swap our hardcoded values with real ones!\n export default function ProductDetailPage({\n \tloaderData,\n }: Route.ComponentProps) {\n-\tconst { productId } = useParams()\n+\tconst { product, relatedProducts } = loaderData\n \tconst [selectedSize] = useState('')\n \tconst [selectedColor] = useState('')\n \tconst [quantity, setQuantity] = useState(1)\n \tconst [activeImage, setActiveImage] = useState(0)\n-\t// 🐨 Let's replace this with the actual product data from the loader\n-\tconst product = products.find((p) => p.id === productId)\n \n \tif (!product) {\n \t\treturn (\n@@ -98,14 +90,6 @@ export default function ProductDetailPage({\n \t\tproduct.imageUrl,\n \t\tproduct.imageUrl,\n \t]\n-\t// 🐨 Let's access the loaderData and swap this out with actual data!\n-\t// 💰 We are using the hardcoded products data to simulate related products\n-\t// 💣 Feel free to completely delete this and use the loaderData\n-\tconst relatedProducts = products\n-\t\t.filter(\n-\t\t\t(p) => p.category.name === product.category.name && p.id !== product.id,\n-\t\t)\n-\t\t.slice(0, 4)\n \n \treturn (\n \t\t

\n@@ -306,44 +290,7 @@ export default function ProductDetailPage({\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// 🐨 Let's replace with the ProductCard component\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

\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\n-\t\t\t\t\t\t\t\t\t\t\t\t\t{relatedProduct.reviewScore}\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\t\t

\n-\t\t\t\t\t\t\t\t\t\t\t{relatedProduct.brand.name}\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{relatedProduct.name}\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${relatedProduct.price}\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{relatedProduct.reviews.length} reviews\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\t\n \t\t\t\t\t\t\t))}\n \t\t\t\t\t\t

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

\ndiff --git a/app/routes/_landing.products._index/route.tsx b/app/routes/_landing.products._index/route.tsx\nindex c688bcc..b520d01 100644\n--- a/app/routes/_landing.products._index/route.tsx\n+++ b/app/routes/_landing.products._index/route.tsx\n@@ -1,8 +1,5 @@\n-import { Filter, Grid, List, Star, Heart } from 'lucide-react'\n-import { useState, useMemo } from 'react'\n-import { Link } from 'react-router'\n-// 🐨 You should use the ProductCard component to render each product instead of the JSX\n-// that is currently in place\n+import { Filter, Grid, List } from 'lucide-react'\n+import { useState } from 'react'\n import { ProductCard } from '#app/components/product-card.js'\n import { getAllBrands } from '#app/domain/brand.server.ts'\n import { getAllCategories } from '#app/domain/category.server.ts'\n@@ -13,8 +9,6 @@ import {\n \tgetMetaTitle,\n \tconstructPrefixedTitle,\n } from '#app/utils/metadata.js'\n-// 💣 we want to completely remove this after we're done\n-import { products, categories, brands } from '../../../data/products'\n import { type Route } from './+types/route'\n \n export const meta: Route.MetaFunction = ({ matches }) => {\n@@ -27,22 +21,22 @@ export const meta: Route.MetaFunction = ({ matches }) => {\n \t]\n }\n \n-// 🐨 You should fetch the data directly from the DB here, we need products, brands and categories!\n export const loader = async ({}: Route.LoaderArgs) => {\n-\t// 💰 You can use the functions 🧝‍♀️ prepared for us above called `getProducts`,\n-\t// 💰 `getAllCategories`, and `getAllBrands` to fetch the data.\n-\n-\t// 💰 Bonus points if you fetch them in parallel!\n+\tconst [{ products }, { categories }, { brands }] = await Promise.all([\n+\t\tgetProducts({}),\n+\t\tgetAllCategories(),\n+\t\tgetAllBrands(),\n+\t])\n \n-\t// 💰 Return them here and replace the empty arrays!\n \treturn {\n-\t\tproducts: [],\n-\t\tcategories: [],\n-\t\tbrands: [],\n+\t\tproducts,\n+\t\tcategories,\n+\t\tbrands,\n \t}\n }\n \n export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n+\tconst { products, categories, brands } = loaderData\n \tconst [selectedCategory, setSelectedCategory] = useState('All')\n \tconst [selectedBrand, setBrand] = useState('All')\n \tconst [priceRange, setPriceRange] = useState([0, 300])\n@@ -50,38 +44,7 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n \tconst [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')\n \tconst [showFilters, setShowFilters] = useState(false)\n \n-\t// 🐨 Let's replace these with the actual products for now, we will do filtering later!\n-\t// 💣 You can completely remove this useMemo and hardcode it to be the products for now\n-\t// 💰 You can just do loaderData.products, this will be completely removed later!\n-\tconst filteredProducts = useMemo(() => {\n-\t\tlet filtered = products.filter((product) => {\n-\t\t\tconst categoryMatch =\n-\t\t\t\tselectedCategory === 'All' || product.category.name === selectedCategory\n-\t\t\tconst brandMatch =\n-\t\t\t\tselectedBrand === 'All' || product.brand.name === selectedBrand\n-\t\t\tconst priceMatch =\n-\t\t\t\tproduct.price >= priceRange[0] && product.price <= priceRange[1]\n-\n-\t\t\treturn categoryMatch && brandMatch && priceMatch\n-\t\t})\n-\n-\t\t// Sort products\n-\t\tfiltered.sort((a, b) => {\n-\t\t\tswitch (sortBy) {\n-\t\t\t\tcase 'price-low':\n-\t\t\t\t\treturn a.price - b.price\n-\t\t\t\tcase 'price-high':\n-\t\t\t\t\treturn b.price - a.price\n-\t\t\t\tcase 'rating':\n-\t\t\t\t\treturn b.reviewScore - a.reviewScore\n-\t\t\t\tcase 'name':\n-\t\t\t\tdefault:\n-\t\t\t\t\treturn a.name.localeCompare(b.name)\n-\t\t\t}\n-\t\t})\n-\n-\t\treturn filtered\n-\t}, [selectedCategory, selectedBrand, priceRange, sortBy])\n+\tconst filteredProducts = products\n \n \treturn (\n \t\t

\n@@ -147,20 +110,16 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\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{categories.map((category) => (\n-\t\t\t\t\t\t\t\t\t\t// 🐨 Let's replace these with the actual category from the backend\n-\t\t\t\t\t\t\t\t\t\t// 💰 You can just use category.id and category.name here!\n \t\t\t\t\t\t\t\t\t\t setSelectedCategory(category)}\n+\t\t\t\t\t\t\t\t\t\t\tkey={category.id}\n+\t\t\t\t\t\t\t\t\t\t\tonClick={() => setSelectedCategory(category.name)}\n \t\t\t\t\t\t\t\t\t\t\tclassName={`block w-full rounded-lg px-3 py-2 text-left transition-colors duration-200 ${\n-\t\t\t\t\t\t\t\t\t\t\t\t// 💰 Match with category.name\n-\t\t\t\t\t\t\t\t\t\t\t\tselectedCategory === category\n+\t\t\t\t\t\t\t\t\t\t\t\tselectedCategory === category.name\n \t\t\t\t\t\t\t\t\t\t\t\t\t? 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200'\n \t\t\t\t\t\t\t\t\t\t\t\t\t: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'\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{category}\n+\t\t\t\t\t\t\t\t\t\t\t{category.name}\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@@ -172,20 +131,16 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\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{brands.map((brand) => (\n-\t\t\t\t\t\t\t\t\t\t// 🐨 Let's replace these with the actual new brands from the backend\n-\t\t\t\t\t\t\t\t\t\t// 💰 You can just use brand.id and brand.name here!\n \t\t\t\t\t\t\t\t\t\t setBrand(brand)}\n+\t\t\t\t\t\t\t\t\t\t\tkey={brand.id}\n+\t\t\t\t\t\t\t\t\t\t\tonClick={() => setBrand(brand.name)}\n \t\t\t\t\t\t\t\t\t\t\tclassName={`block w-full rounded-lg px-3 py-2 text-left transition-colors duration-200 ${\n-\t\t\t\t\t\t\t\t\t\t\t\t// 💰 Use brand.name\n-\t\t\t\t\t\t\t\t\t\t\t\tselectedBrand === brand\n+\t\t\t\t\t\t\t\t\t\t\t\tselectedBrand === brand.name\n \t\t\t\t\t\t\t\t\t\t\t\t\t? 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200'\n \t\t\t\t\t\t\t\t\t\t\t\t\t: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'\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{brand}\n+\t\t\t\t\t\t\t\t\t\t\t{brand.name}\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@@ -220,111 +175,13 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n \t\t\t\t\t\t{viewMode === 'grid' ? (\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t{filteredProducts.map((product) => (\n-\t\t\t\t\t\t\t\t\t// 🐨 Let's replace these with the ProductCard again!\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\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\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{product.reviewScore}\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\t

\n-\t\t\t\t\t\t\t\t\t\t\t\t{product.brand.name}\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{product.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\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{product.description}\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${product.price}\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{product.reviews.length} reviews\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\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\t\t

\n \t\t\t\t\t\t\t\t{filteredProducts.map((product) => (\n-\t\t\t\t\t\t\t\t\t// 🐨 Let's replace these with the ProductCard again!\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\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

\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\t\t{product.brand.name}\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\t\n-\t\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\t\t\t{product.name}\n-\t\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\t\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\t\t{product.description}\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\t

\n-\t\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\t\t\t\n-\t\t\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\t\t\t\t{product.reviewScore}\n-\t\t\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\t\t\t\n-\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t({product.reviews.length} reviews)\n-\t\t\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\t\t

\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\t\t

\n-\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t${product.price}\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\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

\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

\n \t\t\t\t\t\t)}"]

app/routes/_landing._index/categories-section.tsx-32+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

app/routes/_landing._index/featured-products.section.tsx-64+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/routes/_landing._index/route.tsx-30+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

app/routes/_landing.products.$productId.tsx-108+55App 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-227+85App 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-32+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

app/routes/_landing._index/featured-products.section.tsx-64+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/routes/_landing._index/route.tsx-30+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

app/routes/_landing.products.$productId.tsx-108+55App 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-227+85App 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