From 438be85a109709162c4edbe9ac725c58880fb88e Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 29 Mar 2021 13:17:58 +0700
Subject: [PATCH] Tweak cover card

---
 client/components/CoverCard.tsx |  22 +----
 client/components/coverCard.css |  37 +++++++
 client/pages/HomePage.tsx       | 164 +++++---------------------------
 client/pages/home.css           |  66 ++++++++++++-
 4 files changed, 127 insertions(+), 162 deletions(-)
 create mode 100644 client/components/coverCard.css

diff --git a/client/components/CoverCard.tsx b/client/components/CoverCard.tsx
index 70b319b..8ff1bbd 100644
--- a/client/components/CoverCard.tsx
+++ b/client/components/CoverCard.tsx
@@ -3,12 +3,13 @@
  * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
  */
 
-import React from 'react';
+import * as React from 'react';
 import { Link } from 'react-router-dom';
 
 import Pattern from '../constants/Pattern';
 import slug from '../helpers/slug';
 import CoverLoader from '../loaders/CoverLoader';
+import './coverCard.css';
 
 interface CoverCardProps {
     pattern: Pattern;
@@ -18,25 +19,10 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
     return (
         <Link
             to={`/patterns/${slug(pattern)}`}
-            className='w-1/2 sm:w-1/4 md:w-1/5 lg:w-1/6'
-            style={{
-                alignItems: 'center',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'flex-start',
-                padding: '16px',
-                textDecoration: 'none',
-            }}
+            className="cover"
         >
             <CoverLoader pattern={pattern} />
-            <h4
-                className='font-normal'
-                style={{
-                    margin: 0,
-                    paddingTop: '12px',
-                    textAlign: 'center',
-                }}
-            >
+            <h4 className="cover__name">
                 {pattern}
             </h4>
         </Link>
diff --git a/client/components/coverCard.css b/client/components/coverCard.css
new file mode 100644
index 0000000..bdf6c0f
--- /dev/null
+++ b/client/components/coverCard.css
@@ -0,0 +1,37 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.cover {
+    align-items: center;
+    color: var(--text-color);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: 1rem;
+    text-decoration: none;
+    width: 50%;
+}
+.cover__name {
+    font-weight: normal;
+    margin: 0;
+    padding-top: 0.5rem;
+    text-align: center;
+}
+
+@media (min-width: 640px) {
+    .cover {
+        width: 25%;
+    }
+}
+@media (min-width: 768px) {
+    .cover {
+        width: 20%;
+    }
+}
+@media (min-width: 1024px) {
+    .cover {
+        width: 16.666666666666668%;
+    }
+}
\ No newline at end of file
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 1ccccb5..0ab9c1f 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -32,152 +32,34 @@ const HomePage = () => {
                 </div>
             </div>
 
-            <div
-                className='xl:border-t xl:border-l xl:border-r xl:border-gray-400'
-                style={{
-                    marginTop: '64px',
-                }}
-            >
-                <div style={{ position: 'relative' }}>
-                    <div className='md:flex' style={{ lineHeight: 1.5 }}>
-                        <div style={{ flex: 1 }} className="drop-cap p-5">
-                            <div style={{ marginBottom: '16px' }}>
-                                Components, patterns and layouts are things you have to deal with everyday.
-                            </div>
-                            <div>There are a lot of CSS frameworks that provide rich set of layouts and patterns,
-                            but I usually don't want to include all of them in my project.</div>
-                        </div>
-                        <div style={{ flex: 1 }} className="drop-cap p-5">
-                            <div style={{ marginBottom: '16px' }}>
-                                So that I collect most popular layouts and patterns that can be built with pure CSS.
-                            </div>
-                            <div>They are powered by modern CSS features such as flexbox and CSS grid.</div>
-                        </div>
-                        <div style={{ flex: 1 }} className="drop-cap p-5">
-                            <div style={{ marginBottom: '16px' }}>
-                                Starting with the most basic part, you can customize easily for each specific need.
-                            </div>
-                            <div>By composing them, you can have any possible layout that exists in the real life.</div>
-                        </div>
+            <div className="container">
+                <div className="home__features">
+                    <div className="home__features-feature">
+                        <div className="home__features-title">Zero Dependencies</div>
                     </div>
-
-                    <Ad />
-
-                    <div
-                        className="hljs"
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            fontSize: '16px',
-                            justifyContent: 'center',
-                            lineHeight: 1.5,
-                        }}
-                    >
-                        <ul style={{ listStyleType: 'none', margin: 0, padding: 0, width: '300px' }}>
-                            <li><span className="hljs-selector-class">.awesome</span> &#123;</li>
-                            <ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
-                                <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
-                                    <div className="hljs-attribute">zero-dependencies:</div>
-                                    <div>🎉;</div>
-                                </li>
-                                <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
-                                    <div className="hljs-attribute">no-frameworks:</div>
-                                    <div>🎉;</div>
-                                </li>
-                                <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
-                                    <div className="hljs-attribute">no-css-hacks:</div>
-                                    <div>🎉;</div>
-                                </li>
-                                <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
-                                    <div className="hljs-attribute">real-use-cases:</div>
-                                    <div>🎉;</div>
-                                </li>
-                                <li style={{ alignItems: 'center', display: 'flex' }}>
-                                    <div className="hljs-attribute">good-practices:</div>
-                                    <div
-                                        style={{
-                                            backgroundColor: '#00449E',
-                                            borderRadius: '9999px',
-                                            color: '#FFF',
-                                            fontSize: '14px',
-                                            marginLeft: 'auto',
-                                            padding: '0 8px',
-                                        }}
-                                    >
-                                        soon
-                                    </div>
-                                    ;
-                                </li>
-                                <li style={{ alignItems: 'center', display: 'flex' }}>
-                                    <div className="hljs-attribute">accessibility:</div>
-                                    <div
-                                        style={{
-                                            backgroundColor: '#00449E',
-                                            borderRadius: '9999px',
-                                            color: '#FFF',
-                                            fontSize: '14px',
-                                            marginLeft: 'auto',
-                                            padding: '0 8px',
-                                        }}
-                                    >
-                                        soon
-                                    </div>
-                                    ;
-                                </li>
-                            </ul>
-                            <li>&#125;</li>
-                        </ul>
+                    <div className="home__features-feature">
+                        <div className="home__features-title">No Frameworks</div>
+                    </div>
+                    <div className="home__features-feature">
+                        <div className="home__features-title">No CSS Hacks</div>
+                    </div>
+                    <div className="home__features-feature">
+                        <div className="home__features-title">Real Use Cases</div>
+                    </div>
+                    <div className="home__features-feature">
+                        <div className="home__features-title">Good Practices</div>
+                    </div>
+                    <div className="home__features-feature">
+                        <div className="home__features-title">Accessibility</div>
                     </div>
                 </div>
 
-                <section style={{ height: '1000px', overflow: 'hidden', position: 'relative' }}>
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            left: 0,
-                            position: 'absolute',
-                            top: 0,
-                            width: '100%',
-                            zIndex: 9999,
-                        }}
-                    >
-                        <div
-                            className='text-5xl lg:text-6xl'
-                            style={{
-                                fontWeight: 600,
-                                marginBottom: '16px',
-                            }}
-                        >
-                            {numPatterns} patterns
-                        </div>
-                        <Link
-                            to="/patterns"
-                            className='text-2xl'
-                            style={{
-                                backgroundColor: '#00449e',
-                                borderRadius: '4px',
-                                color: '#FFF',
-                                padding: '12px 16px',
-                                textDecoration: 'none',
-                            }}
-                        >
-                                Explore the collection
-                        </Link>
+                <section className="home__patterns">
+                    <div className="home__patterns-overlay">
+                        <div className="home__patterns-heading">{numPatterns} patterns</div>
+                        <Link to="/patterns" className="home__patterns-explore">Explore the collection</Link>
                     </div>
-                    <div
-                        className="home-cards"
-                        style={{
-                            display: 'flex',
-                            flexWrap: 'wrap',
-                            justifyContent: 'center',
-                            opacity: '0.4',
-                            padding: '32px 16px',
-                        }}
-                    >
+                    <div className="home__patterns-content">
                         <CoverCard pattern={Pattern.HolyGrail} />
                         <CoverCard pattern={Pattern.Sidebar} />
                         <CoverCard pattern={Pattern.SplitScreen} />
diff --git a/client/pages/home.css b/client/pages/home.css
index c3668a6..fa23924 100644
--- a/client/pages/home.css
+++ b/client/pages/home.css
@@ -25,15 +25,75 @@
     text-transform: capitalize;
 }
 
-.home-cards {
+.home__features {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 2.5rem auto;
+    max-width: 48rem;
+}
+.home__features-feature {
+    padding: 2rem;
+    text-align: center;
+    width: 33.333%;
+}
+.home__features-feature:not(:nth-child(3n)) {
+    border-right: 1px solid var(--text-color);
+}
+.home__features-feature:nth-child(-n+3) {
+    border-bottom: 1px solid var(--text-color);
+}
+.home__features-title {
+    font-size: 2rem;
+    font-weight: 500;
+}
+
+.home__patterns {
+    height: 80rem;
+    overflow: hidden;
+    position: relative;
+}
+.home__patterns-overlay {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+}
+.home__patterns-heading {
+    font-size: 4rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+}
+.home__patterns-explore {
+    background-color: var(--background-color);
+    border-radius: 0.4rem;
+    color: var(--text-color);
+    font-size: 2rem;
+    padding: 1rem 2rem;
+}
+
+.home__patterns-content {
     animation: slide 40s linear infinite;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    opacity: 0.4;
+    padding: 2rem 1rem;
 }
 
 @keyframes slide{
     0% {
-        transform: translate3d(0, 0, 0);
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-40rem);
     }
     100% {
-        transform: translate3d(0, -500px, 0);
+        transform: translateY(0);
     }
 }