Tweak homepage

client/App.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-rou
 import './index.css';
 
 import Pattern from './constants/Pattern';
+import Explore from './Explore';
 import Home from './Home';
 import DetailsLoader from './loaders/DetailsLoader';
 
@@ -12,6 +13,7 @@ const App = () => {
         <Router>
             <RouteSwitch>
                 <Route exact={true} path='/'><Home /></Route>
+                <Route exact={true} path='/explore'><Explore /></Route>
                 <Route exact={true} path='/badge'><DetailsLoader pattern={Pattern.Badge} /></Route>
                 <Route exact={true} path='/breadcrumb'><DetailsLoader pattern={Pattern.Breadcrumb} /></Route>
                 <Route exact={true} path='/button-with-icon'><DetailsLoader pattern={Pattern.ButtonWithIcon} /></Route>

client/Explore.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import CoverCard from './components/CoverCard';
+import Heading from './components/Heading';
+import Pattern from './constants/Pattern';
+import useDocumentTitle from './hooks/useDocumentTitle';
+import Layout from './layouts/Layout';
+
+const Home = () => {
+    useDocumentTitle('CSS Layout ∙ Explore');
+
+    return (
+        <Layout>
+            <div className="mv4">
+                <Link to="/" className="bg-dark-blue black br-pill link pa1 ph3 pv2 white">CSS Layout</Link>
+            </div>
+            <div className="bt br bl b--black-20 relative br4 br--top">
+                <h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>Explore</h1>
+
+                <h2 className="fw3 f3 tc lh-copy ma0 pa4">Here is the collection of patterns</h2>
+
+                <section>
+                    <Heading title="Layouts" />
+
+                    <div className="flex flex-wrap items-start pa4">
+                        <CoverCard pattern={Pattern.HolyGrail} />
+                        <CoverCard pattern={Pattern.Sidebar} />
+                        <CoverCard pattern={Pattern.SplitScreen} />
+                        <CoverCard pattern={Pattern.StickyFooter} />
+                        <CoverCard pattern={Pattern.StickyHeader} />
+                    </div>
+                </section>
+
+                <section>
+                    <Heading title="Patterns" />
+
+                    <div className="flex flex-wrap items-start pa4">
+                        <CoverCard pattern={Pattern.Badge} />
+                        <CoverCard pattern={Pattern.Breadcrumb} />
+                        <CoverCard pattern={Pattern.ButtonWithIcon} />
+                        <CoverCard pattern={Pattern.Card} />
+                        <CoverCard pattern={Pattern.Centering} />
+                        <CoverCard pattern={Pattern.DockedAtCorner} />
+                        <CoverCard pattern={Pattern.DotNavigation} />
+                        <CoverCard pattern={Pattern.FeatureList} />
+                        <CoverCard pattern={Pattern.FixedAtCorner} />
+                        <CoverCard pattern={Pattern.InputAddOn} />
+                        <CoverCard pattern={Pattern.MediaObject} />
+                        <CoverCard pattern={Pattern.Menu} />
+                        <CoverCard pattern={Pattern.Modal} />
+                        <CoverCard pattern={Pattern.Notification} />
+                        <CoverCard pattern={Pattern.Pagination} />
+                        <CoverCard pattern={Pattern.PreviousNextButtons} />
+                        <CoverCard pattern={Pattern.PricingTable} />
+                        <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>
+        </Layout>
+    );
+};
+
+export default Home;

client/Home.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import CoverCard from './components/CoverCard';
-import Heading from './components/Heading';
 import Pattern from './constants/Pattern';
 import useDocumentTitle from './hooks/useDocumentTitle';
 import Layout from './layouts/Layout';
@@ -20,7 +20,16 @@ const Home = () => {
                         CSS Layout
                     </h1>
 
-                    <h2 className="fw3 f3 tc lh-copy ma0 pa4">
+                    <h2
+                        style={{
+                            fontSize: '24px',
+                            fontWeight: 300,
+                            lineHeight: 1.5,
+                            margin: 0,
+                            padding: '64px 0px 32px 0',
+                            textAlign: 'center',
+                        }}
+                    >
                         a collection of popular layouts and patterns made with CSS
                     </h2>
 
@@ -54,22 +63,57 @@ const Home = () => {
                     </div>
                 </div>
 
-                <section>
+                <section style={{ position: 'relative' }}>
-                    <Heading title="Layouts" />
+                    <div
-
+                        style={{
-                    <div className="flex flex-wrap items-start pa4">
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
+                            width: '100%',
+                            zIndex: 9999,
+                        }}
+                    >
+                        <div
+                            style={{
+                                fontSize: '64px',
+                                fontWeight: 600,
+                                marginBottom: '16px',
+                            }}
+                        >
+                            50+ patterns
+                        </div>
+                        <Link
+                            to="/explore"
+                            style={{
+                                backgroundColor: '#00449e',
+                                borderRadius: '4px',
+                                color: '#FFF',
+                                fontSize: '24px',
+                                padding: '12px 16px',
+                                textDecoration: 'none',
+                            }}
+                        >
+                                Explore the collection
+                        </Link>
+                    </div>
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            opacity: '0.4',
+                            padding: '32px 16px',
+                        }}
+                    >
                         <CoverCard pattern={Pattern.HolyGrail} />
                         <CoverCard pattern={Pattern.Sidebar} />
                         <CoverCard pattern={Pattern.SplitScreen} />
                         <CoverCard pattern={Pattern.StickyFooter} />
                         <CoverCard pattern={Pattern.StickyHeader} />
-                    </div>
-                </section>
-
-                <section>
-                    <Heading title="Patterns" />
-
-                    <div className="flex flex-wrap items-start pa4">
                         <CoverCard pattern={Pattern.Badge} />
                         <CoverCard pattern={Pattern.Breadcrumb} />
                         <CoverCard pattern={Pattern.ButtonWithIcon} />
@@ -90,20 +134,6 @@ 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>