diff --git a/app/components/hero.tsx b/app/components/hero.tsx new file mode 100644 index 0000000..a2b230b --- /dev/null +++ b/app/components/hero.tsx @@ -0,0 +1,25 @@ +import heroHref from '~/images/remix-vendure.webp'; + +export function Hero() { + return ( +
+
+
+ +
+
+
+

Open-source headless commerce

+

Built with Remix & Vendure

+ github.com/vendure-ecommerce/remix-ecommerce +
+
+
+
+ ) +} diff --git a/app/images/remix-vendure.webp b/app/images/remix-vendure.webp new file mode 100644 index 0000000..40ed961 Binary files /dev/null and b/app/images/remix-vendure.webp differ diff --git a/app/route-containers/home/home.component.tsx b/app/route-containers/home/home.component.tsx index 99f6d14..d10e53e 100644 --- a/app/route-containers/home/home.component.tsx +++ b/app/route-containers/home/home.component.tsx @@ -6,60 +6,62 @@ import { ThreeProductGrid } from "~/components/three-product-grid"; import { ScrollingProductList } from "~/components/scrolling-product-list"; import type { LoaderData } from "./home.server"; +import { Hero } from '~/components/hero'; function chunkProducts(start: number, goal: number, products: T[]) { - let slice = products.slice(start, start + 3); + let slice = products.slice(start, start + 3); - if (products.length < goal) return slice; - for (let i = start + 3; slice.length < goal; i++) { - slice.push(products[i % products.length]); - } + if (products.length < goal) return slice; + for (let i = start + 3; slice.length < goal; i++) { + slice.push(products[i % products.length]); + } - return slice; + return slice; } export default function IndexPage() { - let { featuredProducts, translations } = useLoaderData(); + let {featuredProducts, translations} = useLoaderData(); - return ( -
- chunkProducts(0, 3, featuredProducts), - [featuredProducts] - )} - translations={translations} - /> - chunkProducts(3, 3, featuredProducts), - [featuredProducts] - )} - /> - - chunkProducts(6, 3, featuredProducts), - [featuredProducts] - )} - translations={translations} - /> - chunkProducts(9, 3, featuredProducts), - [featuredProducts] - )} - /> -
- ); + return ( +
+ + chunkProducts(0, 3, featuredProducts), + [featuredProducts] + )} + translations={translations} + /> + chunkProducts(3, 3, featuredProducts), + [featuredProducts] + )} + /> + + chunkProducts(6, 3, featuredProducts), + [featuredProducts] + )} + translations={translations} + /> + chunkProducts(9, 3, featuredProducts), + [featuredProducts] + )} + /> +
+ ); }