Skip to content

Commit 92e372d

Browse files
Aime-PatrickAime-Patrick
committed
Merge branch 'develop' of github.com:atlp-rwanda/e-commerce-ninjas-fe into ft-become-seller
2 parents 79f0a23 + 94d23fd commit 92e372d

22 files changed

+1430
-198
lines changed

Diff for: ‎package-lock.json

+612-42
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+4
Original file line numberDiff line numberDiff line change
@@ -28,19 +28,23 @@
2828
"html-webpack-plugin": "^5.6.0",
2929
"jwt-decode": "^4.0.0",
3030
"mini-css-extract-plugin": "^2.9.0",
31+
"pdfjs-dist": "^4.5.136",
3132
"react": "^18.3.1",
3233
"react-dom": "^18.3.1",
34+
"react-fast-marquee": "^1.6.5",
3335
"react-helmet": "^6.1.0",
3436
"react-icons": "^5.2.1",
3537
"react-input-emoji": "^5.9.0",
3638
"react-loader-spinner": "^6.1.6",
39+
"react-pdf": "^9.1.0",
3740
"react-redux": "^9.1.2",
3841
"react-router-dom": "^6.24.0",
3942
"react-spinners": "^0.14.1",
4043
"react-toastify": "^10.0.5",
4144
"recharts": "^2.12.7",
4245
"save-dev": "0.0.1-security",
4346
"socket.io-client": "^4.7.5",
47+
"ts-loader": "^9.5.1",
4448
"yup": "^1.4.0"
4549
},
4650
"devDependencies": {

Diff for: ‎src/App.scss

+2
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,5 @@
4646
@import "./assets/styles/SellerDeleteItem.scss";
4747
@import "./assets/styles/verticalStepper.scss";
4848
@import "./assets/styles/requests.scss";
49+
@import "./assets/styles/AboutUs.scss";
50+
@import "./assets/styles/UserDetails.scss";

Diff for: ‎src/assets/styles/AboutUs.scss

+187
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
.about {
2+
background-color: $container-color;
3+
display: flex;
4+
flex-direction: column;
5+
align-items: center;
6+
justify-content: center;
7+
8+
&__container {
9+
background-color: $white-color;
10+
width: 80%;
11+
padding: 4rem 0;
12+
13+
h1 {
14+
color: $text-color;
15+
font-family: $text-family;
16+
font-size: 4rem;
17+
text-align: center;
18+
padding-bottom: 1.5rem;
19+
}
20+
21+
.welcome {
22+
display: flex;
23+
flex-direction: column;
24+
align-items: center;
25+
26+
h2 {
27+
color: $text2-color;
28+
font-family: $text-family;
29+
font-size: 2.4rem;
30+
text-align: center;
31+
}
32+
33+
.paragraph {
34+
color: $text2-color;
35+
font-family: $text-family;
36+
font-size: 1.8rem;
37+
text-align: center;
38+
margin-top: 2rem;
39+
line-height: 1.5;
40+
margin-bottom: 4rem;
41+
width: 50%;
42+
}
43+
}
44+
45+
.mission {
46+
display: flex;
47+
flex-direction: column;
48+
align-items: center;
49+
50+
h2 {
51+
color: $text2-color;
52+
font-family: $text-family;
53+
font-size: 2.4rem;
54+
text-align: center;
55+
margin-bottom: 1rem;
56+
}
57+
58+
.paragraph {
59+
color: $text2-color;
60+
font-family: $text-family;
61+
font-size: 1.8rem;
62+
text-align: center;
63+
margin-top: 2rem;
64+
line-height: 1.5;
65+
margin-bottom: 4rem;
66+
width: 50%;
67+
}
68+
}
69+
70+
.team {
71+
display: flex;
72+
flex-direction: column;
73+
align-items: center;
74+
75+
h2 {
76+
color: $text2-color;
77+
font-family: $text-family;
78+
font-size: 2.4rem;
79+
text-align: center;
80+
margin-bottom: 1rem;
81+
}
82+
83+
.team__members {
84+
display: flex;
85+
flex-wrap: wrap;
86+
justify-content: center;
87+
margin-top: 2rem;
88+
overflow: hidden;
89+
gap: 2rem;
90+
// position: absolute;
91+
92+
.team__member {
93+
position: relative;
94+
overflow: hidden;
95+
img {
96+
width: 25rem;
97+
height: 25rem;
98+
object-fit: cover;
99+
display: block;
100+
}
101+
102+
&__desc {
103+
position: absolute;
104+
bottom: -100%;
105+
left: 0;
106+
width: 100%;
107+
background-color: rgba(0, 0, 0, 0.7);
108+
padding: 10px;
109+
box-sizing: border-box;
110+
transition: bottom 0.3s ease-in-out;
111+
112+
h3 {
113+
color: $white-color;
114+
font-family: $text-family;
115+
font-size: 1.8rem;
116+
text-align: center;
117+
margin-bottom: 0.5rem;
118+
}
119+
120+
p {
121+
color: $white-color;
122+
font-family: $text-family;
123+
font-size: 1.6rem;
124+
text-align: center;
125+
margin-top: 1rem;
126+
}
127+
128+
&__icon {
129+
font-size: 3rem;
130+
display: flex;
131+
justify-content: center;
132+
gap: 1rem;
133+
134+
a {
135+
color: $primary-color;
136+
137+
&:hover {
138+
transition: all 0.5s ease-in-out;
139+
animation: bounce 1s backwards;
140+
}
141+
}
142+
143+
@keyframes bounce {
144+
145+
0%,
146+
100% {
147+
transform: translateY(0);
148+
}
149+
150+
50% {
151+
transform: translateY(-10px);
152+
}
153+
}
154+
}
155+
}
156+
157+
}
158+
.team__member:hover .team__member__desc{
159+
bottom: 0;
160+
}
161+
}
162+
}
163+
164+
.get-in-touch {
165+
display: flex;
166+
flex-direction: column;
167+
align-items: center;
168+
margin-top: 4rem;
169+
170+
button {
171+
padding: 2rem;
172+
background-color: $primary-color;
173+
color: $white-color;
174+
border: none;
175+
border-radius: 1rem;
176+
font-size: 2rem;
177+
cursor: pointer;
178+
transition: all 0.3s ease-in-out;
179+
180+
&:hover {
181+
background-color: $primary-color-dark;
182+
}
183+
}
184+
}
185+
}
186+
187+
}

Diff for: ‎src/assets/styles/UserDetails.scss

+162
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
.user-details {
2+
height: 50rem;
3+
width: 76vw;
4+
display: flex;
5+
gap: 4rem;
6+
padding: 2rem;
7+
border-radius: 10px;
8+
9+
.user-image {
10+
width: 40%;
11+
img {
12+
width: 100%;
13+
border-radius: 10px;
14+
object-fit: cover;
15+
margin-bottom: 4rem;
16+
}
17+
.payment-info {
18+
display: flex;
19+
align-items: center;
20+
justify-content: space-between;
21+
background-color: #efefef;
22+
padding: 2rem;
23+
border-radius: 10px;
24+
25+
h4 {
26+
font-size: 16px;
27+
color: #333;
28+
margin-bottom: 8px;
29+
}
30+
31+
p {
32+
margin-bottom: 8px;
33+
font-size: 14px;
34+
color: #555;
35+
strong {
36+
color: #333;
37+
}
38+
}
39+
p:nth-of-type(1) {
40+
strong {
41+
margin-right: 15rem;
42+
}
43+
}
44+
p:nth-of-type(2) {
45+
strong {
46+
margin-right: 5rem;
47+
}
48+
}
49+
p:nth-of-type(3) {
50+
strong {
51+
margin-right: 11.5rem;
52+
}
53+
}
54+
55+
.pdf-icon {
56+
display: flex;
57+
flex-direction: column;
58+
font-size: 16px;
59+
color: #333;
60+
margin-top: -1.5rem;
61+
align-items: center;
62+
.pdf{
63+
margin-top: 1rem;
64+
font-size: 50px;
65+
margin-left: -1rem;
66+
}
67+
}
68+
69+
.pdf-view {
70+
position: fixed;
71+
top: 0;
72+
left: 0;
73+
width: 100vw;
74+
height: 100vh;
75+
background: #fff;
76+
z-index: 9999;
77+
}
78+
79+
.pdf-view .react-pdf__Page {
80+
width: 100%;
81+
height: 100%;
82+
object-fit: contain;
83+
}
84+
}
85+
}
86+
87+
.user-info {
88+
width: 50%;
89+
background-color: #efefef;
90+
padding: 3rem;
91+
border-radius: 10px;
92+
93+
h2 {
94+
font-size: 24px;
95+
color: #e87c1b;
96+
margin-bottom: 10px;
97+
}
98+
99+
h3 {
100+
font-size: 16px;
101+
color: #333;
102+
font-style: italic;
103+
margin-bottom: 2rem;
104+
}
105+
106+
p {
107+
font-size: 14px;
108+
color: #555;
109+
margin-bottom: 2.5rem;
110+
padding-right: 4rem;
111+
}
112+
113+
.contact-info {
114+
margin-bottom: 2.5rem;
115+
116+
h4 {
117+
font-size: 16px;
118+
color: #333;
119+
margin-bottom: 8px;
120+
}
121+
122+
p {
123+
margin-bottom: 8px;
124+
strong {
125+
color: #333;
126+
margin-right: 12rem;
127+
}
128+
}
129+
p:nth-of-type(2) {
130+
strong {
131+
margin-right: 11rem;
132+
}
133+
}
134+
}
135+
.basic-info{
136+
h4 {
137+
font-size: 16px;
138+
color: #333;
139+
margin-bottom: 8px;
140+
}
141+
142+
p {
143+
margin-bottom: 8px;
144+
strong {
145+
color: #333;
146+
margin-right: 10rem;
147+
}
148+
}
149+
p:nth-of-type(2) {
150+
strong {
151+
margin-right: 11rem;
152+
}
153+
}
154+
p:nth-of-type(3) {
155+
strong {
156+
margin-right: 9.5rem;
157+
}
158+
}
159+
}
160+
}
161+
}
162+

0 commit comments

Comments
 (0)