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 (
+
+
+
+
+
+
+
+
+ )
+}
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]
+ )}
+ />
+
+ );
}