mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-11 00:24:12 +02:00
Tweak homepage
This commit is contained in:
Phuoc Nguyen
@@ -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>
|
||||
|
||||
80
client/Explore.tsx
Normal file
80
client/Explore.tsx
Normal file
@@ -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;
|
||||
@@ -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>
|
||||
<Heading title="Layouts" />
|
||||
|
||||
<div className="flex flex-wrap items-start pa4">
|
||||
<section style={{ 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
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user