Add product hunt badge

README.md

@@ -1,3 +1,5 @@
+[![Vote for me on ProductHunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=176424&theme=light)](https://www.producthunt.com/posts/css-layout?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-css-layout)
+
 # CSS Layout
 
 A collection of popular layouts and patterns made with CSS:

client/layouts/DetailsLayout.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import useDocumentTitle from '../hooks/useDocumentTitle';
-import Layout from './Layout';
+import Footer from './Footer';
+import ProductHuntBadge from './ProductHuntBadge';
 
 interface DetailsLayoutProps {
     title: string;
@@ -12,7 +13,10 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
     useDocumentTitle(`CSS Layout ∙ ${title}`);
 
     return (
-        <Layout>
+        <div style={{ margin: '0 auto 64px auto', maxWidth: '1024px', position: 'relative' }}>
+            <div style={{ position: 'absolute', right: 0, top: '24px' }}>
+                <ProductHuntBadge />
+            </div>
             <div
                 style={{
                     alignItems: 'center',
@@ -70,7 +74,8 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
                 </h1>
                 {children}
             </div>
-        </Layout>
+            <Footer />
+        </div>
     );
 };
 

client/layouts/ProductHuntBadge.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const ProductHuntBadge: React.FC<{}> = () => {
+    return (
+        <a
+            href="https://www.producthunt.com/posts/css-layout?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-css-layout"
+            target="_blank"
+        >
+            <img
+                src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=176424&theme=light"
+                alt="CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed"
+                style={{
+                    height: '54px',
+                    width: '250px',
+                }}
+            />
+        </a>
+    );
+};
+
+export default ProductHuntBadge;

client/pages/ExplorePage.tsx

@@ -6,6 +6,7 @@ import Heading from '../components/Heading';
 import Pattern from '../constants/Pattern';
 import useDocumentTitle from '../hooks/useDocumentTitle';
 import Layout from '../layouts/Layout';
+import ProductHuntBadge from '../layouts/ProductHuntBadge';
 
 const ExplorePage = () => {
     useDocumentTitle('CSS Layout ∙ Explore');
@@ -67,6 +68,10 @@ const ExplorePage = () => {
                     All covers you see in this page are made with CSS only. Inspect them! 🎉
                 </div>
 
+                <div style={{ margin: '24px 0', textAlign: 'center' }}>
+                    <ProductHuntBadge />
+                </div>
+
                 <section>
                     <Heading title="Layouts" />
 

client/pages/HomePage.tsx

@@ -7,6 +7,7 @@ import CoverCard from '../components/CoverCard';
 import Pattern from '../constants/Pattern';
 import useDocumentTitle from '../hooks/useDocumentTitle';
 import Layout from '../layouts/Layout';
+import ProductHuntBadge from '../layouts/ProductHuntBadge';
 import MadeOf from './MadeOf';
 
 const HomePage = () => {
@@ -76,6 +77,10 @@ const HomePage = () => {
                         </div>
                     </div>
 
+                    <div style={{ margin: '24px 0', textAlign: 'center' }}>
+                        <ProductHuntBadge />
+                    </div>
+
                     <div
                         className="hljs"
                         style={{