Adding ticker and hero

components/ui/Marquee/Marquee.module.css

@@ -1,5 +1,15 @@
 .root {
-  @apply bg-white py-10 w-full relative flex flex-row;
+  @apply w-full relative;
+  min-width: 100%;
+}
+
+.container {
+  @apply flex flex-row;
+
+  & > * {
+    @apply flex-1;
+    min-width: 500px;
+  }
 }
 
 .primary {
@@ -7,5 +17,5 @@
 }
 
 .secondary {
-  @apply bg-violet;
+  @apply bg-black;
 }

components/ui/Marquee/Marquee.tsx

@@ -17,7 +17,8 @@ const M: FC<Props> = ({
   className = '',
   items,
   wrapper: Component = DefaultWrapper,
-  variant = 'white',
+  variant = 'primary',
+  min = 'none',
 }) => {
   const rootClassName = cn(
     s.root,
@@ -28,18 +29,26 @@ const M: FC<Props> = ({
     className
   )
 
-  const flickityOptions = {
+  // return (
-    initialIndex: 2,
+  //   <div className={rootClassName}>
-  }
+  //     <div className={s.container}>
+  //       {items.map((p: any) => (
+  //         <Component {...p} />
+  //       ))}
+  //     </div>
+  //   </div>
+  // )
 
   return (
     <Ticker>
       {({ index }) => (
         <div className={rootClassName}>
+          <div className={s.container}>
             {items.map((p: any) => (
               <Component {...p} key={index} />
             ))}
           </div>
+        </div>
       )}
     </Ticker>
   )

package.json

@@ -24,7 +24,6 @@
     "cookie": "^0.4.1",
     "lodash": "^4.17.20",
     "next": "^9.5.4-canary.23",
-    "postcss-nested": "^5.0.1",
     "postcss-nesting": "^7.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

pages/index.tsx

@@ -17,34 +17,6 @@ export default function Home({
   return (
     <>
       <Grid items={products.slice(0, 3)} wrapper={ProductCard} />
-      <Marquee
-        items={[...products.slice(0, 3)]}
-        wrapper={(p: any) => (
-          <div className="p-3 flex flex-row">
-            <div className="h-24 w-full bg-yellow-300 overflow-hidden">
-              <img
-                className="w-full"
-                src={p.node.images.edges[0].node.urlSmall}
-              />
-            </div>
-            <span className="flex-0 bg-black text-white inline-block p-3 font-bold text-xl break-words">
-              {p.node.name}
-            </span>
-          </div>
-        )}
-      />
-      <Grid items={products.slice(3, 6)} layout="B" wrapper={ProductCard} />
-      <Marquee
-        variant="secondary"
-        items={products.slice(0, 3)}
-        wrapper={() => (
-          <div className="flex flex-1">
-            <h3 className="bg-black text-white inline p-3 font-bold text-2xl">
-              This is a very short title
-            </h3>
-          </div>
-        )}
-      />
       <Hero
         headline="Release Details: The Yeezy BOOST 350 V2 ‘Natural'"
         description="
@@ -55,6 +27,35 @@ export default function Home({
         Hebrew. It’s now undergone a name change, and will be referred to as
         ‘Natural’."
       />
+      <Marquee
+        items={[...products.slice(0, 3)]}
+        wrapper={(p: any) => (
+          <div className="relative overflow-hidden p-6 box-border">
+            <img
+              className="object-scale-down h-24"
+              src={p.node.images.edges[0].node.urlSmall}
+            />
+            <div className="absolute inset-0 flex items-center justify-end mr-8">
+              <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
+                {p.node.name}
+              </span>
+            </div>
+          </div>
+        )}
+      />
+      <Grid items={products.slice(3, 6)} layout="B" wrapper={ProductCard} />
+      <Marquee
+        variant="secondary"
+        items={products.slice(0, 3)}
+        wrapper={() => (
+          <div className="flex">
+            <h3 className="bg-black text-white inline p-2 px-3 font-bold text-2xl">
+              This is a very short title
+            </h3>
+          </div>
+        )}
+      />
+
       <div className="py-12 max-h-80">
         <div className="break-word w-24">
           ALL CATEGORIES ACCESSORIES BAGS CLOTHING SHOES ALL DESIGNERS 032c 1017