Skip to content

Commit 03dd33d

Browse files
author
WebDeveloperGuide
committed
Front Panel > Home Page, Products Page, Product Detail Page, design added.
- Slider added in home page
1 parent 2d872c4 commit 03dd33d

33 files changed

+16217
-10672
lines changed

‎web_panel/package-lock.json

Lines changed: 14813 additions & 10571 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web_panel/package.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,17 @@
44
"private": true,
55
"dependencies": {
66
"@testing-library/jest-dom": "^5.16.2",
7-
"@testing-library/react": "^12.1.3",
7+
"@testing-library/react": "^12.1.4",
88
"@testing-library/user-event": "^13.5.0",
9+
"i": "^0.3.7",
10+
"npm": "^8.5.4",
911
"react": "^17.0.2",
1012
"react-dom": "^17.0.2",
13+
"react-router-dom": "^5.3.0",
1114
"react-scripts": "5.0.0",
15+
"react-slick": "^0.28.1",
16+
"slick-carousel": "^1.8.1",
17+
"styled-components": "^5.3.3",
1218
"web-vitals": "^2.1.4"
1319
},
1420
"scripts": {

‎web_panel/public/index.html

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,12 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>Shopping Site</title>
27+
<!-- font awesome -->
28+
<link
29+
rel="stylesheet"
30+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
31+
/>
32+
<title>React App</title>
2833
</head>
2934
<body>
3035
<noscript>You need to enable JavaScript to run this app.</noscript>
@@ -38,6 +43,6 @@
3843
3944
To begin the development, run `npm start` or `yarn start`.
4045
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
46+
-->
4247
</body>
4348
</html>

‎web_panel/src/App.css

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎web_panel/src/App.js

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,10 @@
1-
import logo from './logo.svg';
2-
import './App.css';
1+
import Home from './pages/Home';
32

43
function App() {
54
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
5+
<>
6+
<Home/>
7+
</>
228
);
239
}
2410

‎web_panel/src/App.test.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎web_panel/src/components/Cart.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
3+
const Cart = () => {
4+
return(
5+
<>
6+
<div className="cart-overlay">
7+
<aside className="cart">
8+
<button className="cart-close">
9+
<i className="fas fa-times" />
10+
</button>
11+
<header>
12+
<h3 className="text-slanted">your bag</h3>
13+
</header>
14+
{/* cart items */}
15+
<div className="cart-items">
16+
{/* single cart item */}
17+
<article className="cart-item">
18+
<img src="https://dl.airtable.com/.attachments/14ac9e946e1a02eb9ce7d632c83f742f/4fd98e64/product-1.jpeg" className="cart-item-img" alt="product" />
19+
<div className="cart-item-info">
20+
<h5 className="cart-item-name">high-back bench</h5>
21+
<span className="cart-item-price">$19.99</span>
22+
<button className="cart-item-remove-btn">remove</button>
23+
</div>
24+
<div>
25+
<button className="cart-item-increase-btn">
26+
<i className="fas fa-chevron-up" />
27+
</button>
28+
<span className="cart-item-amount">1</span>
29+
<button className="cart-item-decrease-btn">
30+
<i className="fas fa-chevron-down" />
31+
</button>
32+
</div>
33+
</article>
34+
{/* end of single cart item */}
35+
{/* single cart item */}
36+
<article className="cart-item">
37+
<img src="https://dl.airtable.com/.attachments/da5e17fd71f50578d525dd5f596e407e/d5e88ac8/product-2.jpg" className="cart-item-img" alt="product" />
38+
<div className="cart-item-info">
39+
<h5 className="cart-item-name">product</h5>
40+
<span className="cart-item-price">$19.99</span>
41+
<button className="cart-item-remove-btn">remove</button>
42+
</div>
43+
<div>
44+
<button className="cart-item-increase-btn">
45+
<i className="fas fa-chevron-up" />
46+
</button>
47+
<span className="cart-item-amount">1</span>
48+
<button className="cart-item-decrease-btn">
49+
<i className="fas fa-chevron-down" />
50+
</button>
51+
</div>
52+
</article>
53+
{/* end of single cart item */}
54+
</div>
55+
{/* footer */}
56+
<footer>
57+
<h3 className="cart-total text-slanted">total : $12.99</h3>
58+
<button className="cart-checkout btn">checkout</button>
59+
</footer>
60+
</aside>
61+
</div>
62+
</>
63+
)
64+
}
65+
66+
export default Cart;

‎web_panel/src/components/FeaturedProducts.js

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
3+
const FeaturedProducts = () => {
4+
return(
5+
<>
6+
<section className="section featured">
7+
<div className="title">
8+
<span />
9+
<h2>Featured Products</h2>
10+
<span />
11+
</div>
12+
<div className="section-center featured-center">
13+
<article className="product">
14+
<div className="product-container">
15+
<img src="https://dl.airtable.com/.attachments/14ac9e946e1a02eb9ce7d632c83f742f/4fd98e64/product-1.jpeg" className="product-img img" alt="" />
16+
<div className="product-icons">
17+
<a href="single-product.html" className="product-icon">
18+
<i className="fas fa-search" />
19+
</a>
20+
<button className="product-cart-btn product-icon" data-id={1}>
21+
<i className="fas fa-shopping-cart" />
22+
</button>
23+
</div>
24+
</div>
25+
<footer>
26+
<h5 className="product-name">high-back bench</h5>
27+
<span className="product-price">$9.99</span>
28+
</footer>
29+
</article>
30+
<article className="product">
31+
<div className="product-container">
32+
<img src="https://dl.airtable.com/.attachments/3245c726ee77d73702ba8c3310639727/f000842b/product-5.jpg" className="product-img img" alt="" />
33+
<div className="product-icons">
34+
<a href="single-product.html" className="product-icon">
35+
<i className="fas fa-search" />
36+
</a>
37+
<button className="product-cart-btn product-icon" data-id={1}>
38+
<i className="fas fa-shopping-cart" />
39+
</button>
40+
</div>
41+
</div>
42+
<footer>
43+
<h5 className="product-name">leather sofa</h5>
44+
<span className="product-price">$9.99</span>
45+
</footer>
46+
</article>
47+
<article className="product">
48+
<div className="product-container">
49+
<img src="https://dl.airtable.com/.attachments/da5e17fd71f50578d525dd5f596e407e/d5e88ac8/product-2.jpg" className="product-img img" alt="" />
50+
<div className="product-icons">
51+
<a href="single-product.html" className="product-icon">
52+
<i className="fas fa-search" />
53+
</a>
54+
<button className="product-cart-btn product-icon">
55+
<i className="fas fa-shopping-cart" />
56+
</button>
57+
</div>
58+
</div>
59+
<footer>
60+
<h5 className="product-name">entertainment center</h5>
61+
<span className="product-price">$9.99</span>
62+
</footer>
63+
</article>
64+
</div>
65+
<a href="products.html" className="btn"> all products </a>
66+
</section>
67+
</>
68+
)
69+
}
70+
71+
export default FeaturedProducts;

‎web_panel/src/components/Filters.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
3+
const Filters = () => {
4+
return(
5+
<>
6+
<div className="filters">
7+
<div className="filters-container">
8+
{/* search */}
9+
<form className="input-form">
10+
<input type="text" className="search-input" placeholder="search..." />
11+
</form>
12+
{/* categories */}
13+
<h5>Company</h5>
14+
<article className="companies">
15+
<button className="company-btn">all</button>
16+
<button className="company-btn">ikea</button>
17+
<button className="company-btn">marcos</button>
18+
</article>
19+
{/* price */}
20+
<h5>Price</h5>
21+
<form className="price-form">
22+
<input type="range" className="price-filter" min={0} defaultValue={50} max={100} />
23+
</form>
24+
<span className="price-value">Value : $80</span>
25+
</div>
26+
</div>
27+
</>
28+
)
29+
}
30+
31+
export default Filters;

‎web_panel/src/components/Navbar.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React, {useEffect,useState} from 'react';
2+
import logo from '../images/logo.svg';
3+
4+
const NavBar = () => {
5+
6+
const [isCartOpen,setIsCartOpen] = useState(false);
7+
const toggleCart = () => {
8+
setIsCartOpen(true);
9+
}
10+
11+
useEffect(() => {
12+
13+
14+
}, []);
15+
16+
return(
17+
<>
18+
<nav className="navbar">
19+
<div className="nav-center">
20+
<div>
21+
<button className="toggle-nav">
22+
<i className="fas fa-bars" />
23+
</button>
24+
<ul className="nav-links">
25+
<li>
26+
<a href="index.html" className="nav-link"> home </a>
27+
</li>
28+
<li>
29+
<a href="products.html" className="nav-link"> products </a>
30+
</li>
31+
<li>
32+
<a href="about.html" className="nav-link"> about </a>
33+
</li>
34+
</ul>
35+
</div>
36+
<img src={logo} className="nav-logo" alt="logo" />
37+
<div className="toggle-container">
38+
<button className="toggle-cart" onClick={toggleCart}>
39+
<i className="fas fa-shopping-cart" />
40+
</button>
41+
<span className="cart-item-count">2</span>
42+
</div>
43+
</div>
44+
</nav>
45+
</>
46+
)
47+
}
48+
49+
export default NavBar;

0 commit comments

Comments
 (0)