/** * A collection of popular layouts and patterns made with CSS (https://csslayout.io) * (c) 2019 - 2021 Nguyen Huu Phuoc */ import * as React from 'react'; import { Helmet } from 'react-helmet'; import { Link } from 'react-router-dom'; import './homePage.css'; import CoverCard from '../components/CoverCard'; import Pattern from '../constants/Pattern'; import chunk from '../helpers/chunk'; import useDocumentTitle from '../hooks/useDocumentTitle'; import Layout from '../layouts/Layout'; const NUM_SLIDES = 3; const HomePage = () => { useDocumentTitle('CSS Layout'); const numPatterns = Object.keys(Pattern).length; const numPatternsPerSlide = Math.floor(numPatterns / NUM_SLIDES); const groups = chunk(Object.entries(Pattern).map(([_, v]) => v).slice(0, NUM_SLIDES * numPatternsPerSlide), numPatternsPerSlide); return (

Popular Layouts & patterns made with CSS

Zero Dependencies

No Frameworks

No CSS Hacks

Real Use Cases

Good Practices

soon

Accessibility Support

soon

{numPatterns} patterns

Explore the collection

{ groups.map((patterns, index) => (

{ patterns.map(pattern => ) }

)) }

); }; export default HomePage;