Adding ticker and hero

components/ui/Container/Container.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply mx-auto px-2;
+  @apply mx-auto max-w-screen-xl mx-auto px-6 sm:px-4 lg:px-10;
   display: inherit;
   max-width: 1440px;
 }

components/ui/Hero/Hero.module.css

@@ -0,0 +1,3 @@
+.root {
+  @apply bg-black py-12;
+}

components/ui/Hero/Hero.tsx

@@ -0,0 +1,27 @@
+import cn from 'classnames'
+import React, { FC } from 'react'
+import s from './Hero.module.css'
+import { Container } from '@components/ui'
+interface Props {
+  className?: string
+  headline: string
+  description: string
+}
+
+const Hero: FC<Props> = ({ headline, description, className }) => {
+  const rootClassName = cn(s.root, className)
+  return (
+    <div className={rootClassName}>
+      <Container>
+        <div className="max-w-xl">
+          <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
+            {headline}
+          </h2>
+          <p className="mt-5 text-xl leading-7 text-gray-400">{description}</p>
+        </div>
+      </Container>
+    </div>
+  )
+}
+
+export default Hero

components/ui/Hero/index.ts

@@ -0,0 +1 @@
+export { default } from './Hero'

components/ui/Marquee/Marquee.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply bg-white py-10 flex flex-row w-full;
+  @apply bg-white py-10 w-full relative flex flex-row;
 }
 
 .primary {

components/ui/Marquee/Marquee.tsx

@@ -1,6 +1,7 @@
 import cn from 'classnames'
 import s from './Marquee.module.css'
 import { FC } from 'react'
+import Ticker from 'react-ticker'
 
 interface Props {
   className?: string
@@ -12,7 +13,7 @@ interface Props {
 
 const DefaultWrapper: FC<Props> = ({ children }) => <div>{children}</div> // DEFAULT PRODUCT WRAPPER
 
-const Marquee: FC<Props> = ({
+const M: FC<Props> = ({
   className = '',
   items,
   wrapper: Component = DefaultWrapper,
@@ -26,13 +27,22 @@ const Marquee: FC<Props> = ({
     },
     className
   )
+
+  const flickityOptions = {
+    initialIndex: 2,
+  }
+
   return (
-    <div className={rootClassName}>
-      {items.map((p: any) => (
-        <Component {...p} />
-      ))}
-    </div>
+    <Ticker>
+      {({ index }) => (
+        <div className={rootClassName}>
+          {items.map((p: any) => (
+            <Component {...p} key={index} />
+          ))}
+        </div>
+      )}
+    </Ticker>
   )
 }
 
-export default Marquee
+export default M

components/ui/index.ts

@@ -4,3 +4,4 @@ export { default as Sidebar } from './Sidebar'
 export { default as Logo } from './Logo'
 export { default as Grid } from './Grid'
 export { default as Marquee } from './Marquee'
+export { default as Hero } from './Hero'