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,17 +29,25 @@ const M: FC<Props> = ({
     className
   )
 
-  const flickityOptions = {
-    initialIndex: 2,
-  }
+  // return (
+  //   <div className={rootClassName}>
+  //     <div className={s.container}>
+  //       {items.map((p: any) => (
+  //         <Component {...p} />
+  //       ))}
+  //     </div>
+  //   </div>
+  // )
 
   return (
     <Ticker>
       {({ index }) => (
         <div className={rootClassName}>
-          {items.map((p: any) => (
-            <Component {...p} key={index} />
-          ))}
+          <div className={s.container}>
+            {items.map((p: any) => (
+              <Component {...p} key={index} />
+            ))}
+          </div>
         </div>
       )}
     </Ticker>