From 337ac44f9e9794322f17583d7b4db17959bbf9ca Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Tue, 26 Nov 2019 15:52:48 +0700
Subject: [PATCH] Animate the cards

---
 client/Home.tsx                 | 19 ++++++++++++++++++-
 client/components/CoverCard.tsx | 21 +++++++++++++++++++--
 client/components/Heading.tsx   | 20 ++++++++++++++++++--
 client/home.css                 | 12 ++++++++++++
 4 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 client/home.css

diff --git a/client/Home.tsx b/client/Home.tsx
index a01f304..30a83d1 100644
--- a/client/Home.tsx
+++ b/client/Home.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import './home.css';
+
 import CoverCard from './components/CoverCard';
 import Pattern from './constants/Pattern';
 import useDocumentTitle from './hooks/useDocumentTitle';
@@ -117,7 +119,7 @@ const Home = () => {
                     </div>
                 </div>
 
-                <section style={{ position: 'relative' }}>
+                <section style={{ height: '800px', overflow: 'hidden', paddingBottom: '32px', position: 'relative' }}>
                     <div
                         style={{
                             alignItems: 'center',
@@ -156,6 +158,7 @@ const Home = () => {
                         </Link>
                     </div>
                     <div
+                        className="home-cards"
                         style={{
                             display: 'flex',
                             flexWrap: 'wrap',
@@ -188,6 +191,20 @@ const Home = () => {
                         <CoverCard pattern={Pattern.PropertyList} />
                         <CoverCard pattern={Pattern.ProgressBar} />
                         <CoverCard pattern={Pattern.QuestionsAndAnswers} />
+                        <CoverCard pattern={Pattern.RadioSwitch} />
+                        <CoverCard pattern={Pattern.Rating} />
+                        <CoverCard pattern={Pattern.SameHeightColumns} />
+                        <CoverCard pattern={Pattern.SearchBox} />
+                        <CoverCard pattern={Pattern.Separator} />
+                        <CoverCard pattern={Pattern.SimpleGrid} />
+                        <CoverCard pattern={Pattern.Slider} />
+                        <CoverCard pattern={Pattern.SpinButton} />
+                        <CoverCard pattern={Pattern.SplitNavigation} />
+                        <CoverCard pattern={Pattern.StepperInput} />
+                        <CoverCard pattern={Pattern.Switch} />
+                        <CoverCard pattern={Pattern.Tab} />
+                        <CoverCard pattern={Pattern.TogglePasswordVisibility} />
+                        <CoverCard pattern={Pattern.Wizard} />
                     </div>
                 </section>
             </div>
diff --git a/client/components/CoverCard.tsx b/client/components/CoverCard.tsx
index d862514..c6bef92 100644
--- a/client/components/CoverCard.tsx
+++ b/client/components/CoverCard.tsx
@@ -14,10 +14,27 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
         <div className="pa1 w-20">
             <Link
                 to={`/${slug(pattern)}`}
-                className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3"
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    padding: '16px',
+                    textDecoration: 'none',
+                }}
             >
                 <CoverLoader pattern={pattern} />
-                <h4 className="f5 mv0 pt3 fw6">{pattern}</h4>
+                <h4
+                    style={{
+                        color: 'rgba(0, 0, 0, 0.3)',
+                        fontSize: '16px',
+                        fontWeight: 500,
+                        margin: 0,
+                        paddingTop: '12px',
+                    }}
+                >
+                    {pattern}
+                </h4>
             </Link>
         </div>
     );
diff --git a/client/components/Heading.tsx b/client/components/Heading.tsx
index 0c6de4a..e728459 100644
--- a/client/components/Heading.tsx
+++ b/client/components/Heading.tsx
@@ -6,8 +6,24 @@ interface HeadingProps {
 
 const Heading: React.FC<HeadingProps> = ({ title }) => {
     return (
-        <div className="bt b--black-20 relative">
-            <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>{title}</h3>
+        <div style={{ borderTop: '1px solid rgba(0, 0, 0, .2)', position: 'relative' }}>
+            <h3
+                style={{
+                    backgroundColor: '#FFF',
+                    fontSize: '20px',
+                    fontWeight: 700,
+                    left: '32px',
+                    lineHeight: 1.5,
+                    margin: 0,
+                    padding: '0 8px',
+                    position: 'absolute',
+                    textTransform: 'uppercase',
+                    top: 0,
+                    transform: 'translate(0, -50%)',
+                }}
+            >
+                {title}
+            </h3>
         </div>
     );
 };
diff --git a/client/home.css b/client/home.css
new file mode 100644
index 0000000..9f0f776
--- /dev/null
+++ b/client/home.css
@@ -0,0 +1,12 @@
+.home-cards {
+    animation: slide 60s linear infinite;
+}
+
+@keyframes slide{
+    0% {
+        transform: translate3d(0, 0, 0);
+    }
+    100% {
+        transform: translate3d(0, -600px, 0);
+    }
+}