Skip to content

Commit 16208cb

Browse files
Soliman3Soliman3
committed
Design Category Hot products component
- Desgin category hot product component jsx - add styling by styled components - import comoponents in home page
1 parent 7154dae commit 16208cb

File tree

2 files changed

+165
-0
lines changed

2 files changed

+165
-0
lines changed

‎client/src/components/CategoryHotProduct.jsx‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import Mobile from '../images/mobiles.jpg'
4+
5+
// Styling...
6+
const Container = styled.div`
7+
display: flex;
8+
flex-direction: column;
9+
background-color: skyblue;
10+
width: 100%;
11+
height: auto;
12+
`
13+
const Wrapper = styled.div`
14+
display: flex;
15+
flex-direction: column;
16+
`
17+
const TopContainer = styled.div`
18+
display: flex;
19+
align-items: center;
20+
justify-content: space-between;
21+
padding: 25px;
22+
`
23+
const TopContainerTitle = styled.div`
24+
font-weight: 900;
25+
font-size: 40px;
26+
`
27+
const TopContainerButton = styled.button`
28+
background-color: black;
29+
color: white;
30+
padding: 10px 20px;
31+
font-size: 35px;
32+
font-weight: bold;
33+
`
34+
const BottomContainer = styled.div`
35+
display: flex;
36+
margin:0px 20px;
37+
border: none;
38+
justify-content: space-between;
39+
`
40+
const BottomContainerItem = styled.div`
41+
display: flex;
42+
flex-direction: column;
43+
width: 12%;
44+
height: 300px;
45+
border: 5px solid white;
46+
margin:10px;
47+
background-color: white;
48+
margin-bottom: 20px;
49+
50+
51+
`
52+
const BottomItemImageContainer = styled.div`
53+
flex: 3;
54+
position: relative;
55+
border: none;
56+
`
57+
const BottomItemImage = styled.img`
58+
width: 100%;
59+
height: 100%;
60+
bottom: 0;
61+
top: 0;
62+
right: 0;
63+
left: 0;
64+
position: absolute;
65+
object-fit: cover;
66+
border: none;
67+
`
68+
const BottomItemTextContainer = styled.div`
69+
flex: 1.15;
70+
background-color: white;
71+
display: flex;
72+
flex-direction: column;
73+
align-items: center;
74+
padding-top: 20px;
75+
`
76+
const BottomItemText = styled.span`
77+
font-weight: 900;
78+
font-size: 20px;
79+
`
80+
const BottomItemTextSale = styled.span`
81+
font-weight: bold;
82+
font-size: 18px;
83+
color: #d11636;
84+
`
85+
86+
87+
export default function CategoryHotProduct() {
88+
return (
89+
<Container>
90+
<Wrapper>
91+
<TopContainer>
92+
<TopContainerTitle>ELECTRONICS</TopContainerTitle>
93+
<TopContainerButton>Shop Now</TopContainerButton>
94+
</TopContainer>
95+
<BottomContainer>
96+
<BottomContainerItem>
97+
<BottomItemImageContainer>
98+
<BottomItemImage src={Mobile} />
99+
</BottomItemImageContainer>
100+
<BottomItemTextContainer>
101+
<BottomItemText>Video Game</BottomItemText>
102+
<BottomItemTextSale>UP TO 50% OFF</BottomItemTextSale>
103+
</BottomItemTextContainer>
104+
</BottomContainerItem>
105+
<BottomContainerItem>
106+
<BottomItemImageContainer>
107+
<BottomItemImage src={Mobile} />
108+
</BottomItemImageContainer>
109+
<BottomItemTextContainer>
110+
<BottomItemText>Video Game</BottomItemText>
111+
<BottomItemTextSale>UP TO 50% OFF</BottomItemTextSale>
112+
</BottomItemTextContainer>
113+
</BottomContainerItem>
114+
<BottomContainerItem>
115+
<BottomItemImageContainer>
116+
<BottomItemImage src={Mobile} />
117+
</BottomItemImageContainer>
118+
<BottomItemTextContainer>
119+
<BottomItemText>Video Game</BottomItemText>
120+
<BottomItemTextSale>UP TO 50% OFF</BottomItemTextSale>
121+
</BottomItemTextContainer>
122+
</BottomContainerItem>
123+
<BottomContainerItem>
124+
<BottomItemImageContainer>
125+
<BottomItemImage src={Mobile} />
126+
</BottomItemImageContainer>
127+
<BottomItemTextContainer>
128+
<BottomItemText>Video Game</BottomItemText>
129+
<BottomItemTextSale>UP TO 50% OFF</BottomItemTextSale>
130+
</BottomItemTextContainer>
131+
</BottomContainerItem>
132+
<BottomContainerItem>
133+
<BottomItemImageContainer>
134+
<BottomItemImage src={Mobile} />
135+
</BottomItemImageContainer>
136+
<BottomItemTextContainer>
137+
<BottomItemText>Video Game</BottomItemText>
138+
<BottomItemTextSale>UP TO 50% OFF</BottomItemTextSale>
139+
</BottomItemTextContainer>
140+
</BottomContainerItem>
141+
<BottomContainerItem>
142+
<BottomItemImageContainer>
143+
<BottomItemImage src={Mobile} />
144+
</BottomItemImageContainer>
145+
<BottomItemTextContainer>
146+
<BottomItemText>Video Game</BottomItemText>
147+
<BottomItemTextSale>UP TO 50% OFF</BottomItemTextSale>
148+
</BottomItemTextContainer>
149+
</BottomContainerItem>
150+
<BottomContainerItem>
151+
<BottomItemImageContainer>
152+
<BottomItemImage src={Mobile} />
153+
</BottomItemImageContainer>
154+
<BottomItemTextContainer>
155+
<BottomItemText>Video Game</BottomItemText>
156+
<BottomItemTextSale>UP TO 50% OFF</BottomItemTextSale>
157+
</BottomItemTextContainer>
158+
</BottomContainerItem>
159+
</BottomContainer>
160+
</Wrapper>
161+
</Container>
162+
)
163+
}

‎client/src/pages/Home.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Products from '../components/Products'
1313
import Newsletter from '../components/Newsletter'
1414
import Footer from '../components/Footer'
1515
import CategoryBar from '../components/CategoryBar'
16+
import CategoryHotProduct from '../components/CategoryHotProduct'
1617

1718

1819

@@ -30,6 +31,7 @@ export default function Home({ type }) {
3031
<CategoryBar/>
3132
<Slider />
3233
<Categories />
34+
<CategoryHotProduct/>
3335
<Products />
3436
<Newsletter />
3537
<Footer/>

0 commit comments

Comments
 (0)