Add hero to home page

johnsonthedev · Jan 19, 2022 · c94acbf · c94acbf
1 parent 8ff025d
commit c94acbf
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 48 deletions.
diff --git a/app/components/hero.tsx b/app/components/hero.tsx
@@ -0,0 +1,25 @@
+import heroHref from '~/images/remix-vendure.webp';
+
+export function Hero() {
+    return (
+        <div style={{backgroundColor: '#212121'}}>
+            <div className="max-w-6xl mx-auto flex flex-col lg:flex-row">
+                <div className='flex justify-center'>
+                    <img
+                        src={heroHref}
+                        alt=""
+                    />
+                </div>
+                <div className='flex justify-center items-center'>
+                    <div className='lg:pl-6 mb-6'>
+                        <h2 className="text-lg lg:text-4xl font-light lg:mt-12">Open-source headless commerce</h2>
+                        <p className='lg:text-xl my-2'>Built with <a href='https://remix.run/'
+                                                                     className='text-blue-300 hover:text-blue-500'>Remix</a> & <a
+                            href='https://www.vendure.io/' className='text-blue-300 hover:text-blue-500'>Vendure</a></p>
+                        <a href='https://github.com/vendure-ecommerce/remix-ecommerce' className='text-blue-300 hover:text-blue-500'>github.com/vendure-ecommerce/remix-ecommerce</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/app/images/remix-vendure.webp b/app/images/remix-vendure.webp
diff --git 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<T>(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<LoaderData>();
+    let {featuredProducts, translations} = useLoaderData<LoaderData>();
 
-  return (
-    <main>
-      <ThreeProductGrid
-        variant="primary"
-        products={useMemo(
-          () => chunkProducts(0, 3, featuredProducts),
-          [featuredProducts]
-        )}
-        translations={translations}
-      />
-      <ScrollingProductList
-        variant="secondary"
-        products={useMemo(
-          () => chunkProducts(3, 3, featuredProducts),
-          [featuredProducts]
-        )}
-      />
-      <CtaBanner
-        headline={translations.MockCTAHeadline}
-        description={translations.MockCTADescription}
-        ctaText={translations.MockCTALink}
-        ctaTo="/"
-        variant="secondary"
-      />
-      <ThreeProductGrid
-        variant="secondary"
-        products={useMemo(
-          () => chunkProducts(6, 3, featuredProducts),
-          [featuredProducts]
-        )}
-        translations={translations}
-      />
-      <ScrollingProductList
-        variant="primary"
-        products={useMemo(
-          () => chunkProducts(9, 3, featuredProducts),
-          [featuredProducts]
-        )}
-      />
-    </main>
-  );
+    return (
+        <main>
+            <Hero></Hero>
+            <ThreeProductGrid
+                variant="primary"
+                products={useMemo(
+                    () => chunkProducts(0, 3, featuredProducts),
+                    [featuredProducts]
+                )}
+                translations={translations}
+            />
+            <ScrollingProductList
+                variant="secondary"
+                products={useMemo(
+                    () => chunkProducts(3, 3, featuredProducts),
+                    [featuredProducts]
+                )}
+            />
+            <CtaBanner
+                headline={translations.MockCTAHeadline}
+                description={translations.MockCTADescription}
+                ctaText={translations.MockCTALink}
+                ctaTo="/"
+                variant="secondary"
+            />
+            <ThreeProductGrid
+                variant="secondary"
+                products={useMemo(
+                    () => chunkProducts(6, 3, featuredProducts),
+                    [featuredProducts]
+                )}
+                translations={translations}
+            />
+            <ScrollingProductList
+                variant="primary"
+                products={useMemo(
+                    () => chunkProducts(9, 3, featuredProducts),
+                    [featuredProducts]
+                )}
+            />
+        </main>
+    );
 }