Here you can write the post for social. It's not printed in the article # The BoilerPlate This is roughly the structure of our page: URL: [http://localhost:3000/](http://localhost:3000/) ```jsx /app/page.tsx|["react", "next"]||notShowLineNumbers|true export default function Home() { return (

Hero

Stats

Latest Products

Contact Form

); } ``` # Divider: reusable component Create a Divider reusable component using DaisyUI that will be useful to clearly separate the various components between them: ```jsx /components/utilities/divider.tsx|["react", "next"]||notShowLineNumbers|true export default function Divider () { return (

) } ``` ## Add to Page We can then use the component in our page: ```jsx /app/page.tsx|["react", "next"]|{1,7,9,11}|notShowLineNumbers|true import Divider from '@/components/utilities/divider'; export default function Home() { return (

Hero

Stats

Latest Products

Contact Form

); } ``` ![Preview|left|65|622|415|false|true](/courses/next/workshop/30-build-the-home-page/images/1.home-initial-preview-witj-dividers.png) # Static Layout with DaisyUI What we have done so far was just the introduction to creating the real home page. I realize that following snippet is a lot of template to copy-paste and that it would be nice to create it from scratch but: What we will focus on is the creation of components and the use of different features of Next in each of them: ```jsx /app/page.tsx|["react", "next"]||notShowLineNumbers|false import Divider from '@/components/utilities/divider'; export default function Home() { return (

{/*HERO*/}

Geek Gadgets

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

{/*Stats*/}

Orders

31K

Jan 1st - Feb 1st

Clients

4,200

↗︎ 400 (22%)

Products

1,200

{/*

↘︎ 90 (14%)

*/}

{/*LATEST PRODUCTS*/}

LATEST PRODUCTS

Product Name!

Here we can add the product description

Product Name!

Here we can add the product description

Product Name!

Here we can add the product description

Product Name!

Here we can add the product description

{/*FOOTER: CONTACT FORM*/}

Keep in Touch

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

); } ``` ## Result This a static HTML page: ![Preview|left|65|100%|800|false|true](/courses/next/workshop/30-build-the-home-page/images/2.static-daisy-layout.png) ![OpenGraph Test|left|65|100%|400|false|true](/courses/next/workshop/30-build-the-home-page/5-build-the-landing-page/opengraph-image.png)

Next JS Workshop

Send your feedback

Next JS Workshop

Send your feedback