feat: Basic Homepage design

ameeshagireesh · Oct 19, 2022 · 31afe4e · 31afe4e
1 parent e00311c
commit 31afe4e
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 5 deletions.
diff --git a/chota-vyapar/components/Cart.jsx b/chota-vyapar/components/Cart.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Cart = () => {
+    return (
+        <div> Cart</div>
+    )
+}
+
+export default Cart
diff --git a/chota-vyapar/components/Footer.jsx b/chota-vyapar/components/Footer.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Footer = () => {
+    return (
+        <div> Footer</div>
+    )
+}
+
+export default Footer
diff --git a/chota-vyapar/components/FooterBanner.jsx b/chota-vyapar/components/FooterBanner.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const FooterBanner = () => {
+    return (
+        <div> FooterBanner</div>
+    )
+}
+
+export default FooterBanner
diff --git a/chota-vyapar/components/HeroBanner.jsx b/chota-vyapar/components/HeroBanner.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import Link from 'next/link'
+
+const HeroBanner = () => {
+    return (
+        <div className='hero-banner-container'> 
+            <div>
+                <p className="beats-solo"> SMALL TEXT</p>
+                <h3> MID TEXT</h3>
+                <img src="" alt ="blouse" className="hero-banner-image"></img>
+
+                <div>
+                    <Link href="/product/ID">
+                        <button type="button">BUTTON TEXT</button>
+                    </Link>
+                </div>
+
+                <div className='desc'>
+                    <h5> Description</h5>
+                    <p>DESCRIPTION</p>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default HeroBanner
diff --git a/chota-vyapar/components/Layout.jsx b/chota-vyapar/components/Layout.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Layout = () => {
+    return (
+        <div> Layout</div>
+    )
+}
+
+export default Layout
diff --git a/chota-vyapar/components/Navbar.jsx b/chota-vyapar/components/Navbar.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Navbar = () => {
+    return (
+        <div> Navbar</div>
+    )
+}
+
+export default Navbar
diff --git a/chota-vyapar/components/Product.jsx b/chota-vyapar/components/Product.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Product = () => {
+    return (
+        <div> Product</div>
+    )
+}
+
+export default Product
diff --git a/chota-vyapar/components/index.js b/chota-vyapar/components/index.js
@@ -0,0 +1,7 @@
+export {default as Footer} from './Footer'
+export {default as Cart} from './Cart'
+export {default as FooterBanner} from './FooterBanner'
+export {default as Layout} from './Layout'
+export {default as Navbar} from './Navbar'
+export {default as Product} from './Product'
+export {default as HeroBanner} from './HeroBanner'
diff --git a/chota-vyapar/pages/index.js b/chota-vyapar/pages/index.js
@@ -1,19 +1,19 @@
 import React from 'react'
-
+import {Product, FooterBanner, HeroBanner} from '../components'
 const Home = () => {
   return (
       <>
-        HeroBanner
-        <div>
+        <HeroBanner />
+        <div className='products-heading'>
           <h2>Best Selling Products</h2>
           <p> Variety of clothes across all the aesthetics </p>
         </div>
 
-        <div>
+        <div className='products-container'>
           {['Product 1', 'Product 2'].map((product) => product )}
         </div>
 
-        Footer
+        <FooterBanner />
       </>
   )
 }