Skip to content

Commit ab39a83

Browse files
SaddockAimeSaddockAime
authored
ft-services-page (#79)
* ft-services-page * some changes * requested changes
1 parent 38cda3b commit ab39a83

File tree

4 files changed

+210
-1
lines changed

4 files changed

+210
-1
lines changed

Diff for: ‎src/App.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,6 @@
4343
@import "./assets/styles/liveChat.scss";
4444
@import "./assets//styles/UserProfile.scss";
4545
@import "./assets/styles/SellerSideProduct.scss";
46-
@import "./assets/styles/SellerDeleteItem.scss"
46+
@import "./assets/styles/SellerDeleteItem.scss";
47+
@import "./assets/styles/ServicesPage.scss"
48+

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

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.services-container {
2+
.image-container {
3+
width: 100vw;
4+
height: 33rem;
5+
color: $white;
6+
background-image: url(https://res.cloudinary.com/djrmfg6k9/image/upload/v1723647815/Rectangle_168_ztbooe.png);
7+
background-size: cover;
8+
background-repeat: no-repeat;
9+
.service-header {
10+
color: $primary-color;
11+
font-size: 4rem;
12+
padding: 5rem;
13+
}
14+
p {
15+
font-size: 2.5rem;
16+
padding: 1rem 5rem;
17+
}
18+
}
19+
.services-cards {
20+
display: grid;
21+
justify-items: center;
22+
grid-template-columns: repeat(auto-fill, minmax(35rem, 1fr));
23+
gap: 3rem;
24+
padding: 2rem;
25+
.cards {
26+
display: block;
27+
width: 30rem;
28+
text-align: left !important;
29+
padding: 4rem;
30+
margin: 3rem;
31+
border-radius: 2rem;
32+
border: 3px solid $third-color;
33+
transition: all 0.3s ease;
34+
35+
&:hover {
36+
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
37+
border-color: $primary-color;
38+
transform: translateY(-10px);
39+
}
40+
.icon {
41+
display: flex;
42+
justify-content: center;
43+
align-items: center;
44+
background-color: $primary-color;
45+
width: 9rem;
46+
height: 9rem;
47+
border-radius: 50%;
48+
color: $black;
49+
img {
50+
z-index: 100;
51+
}
52+
}
53+
.card-header {
54+
font-size: 2.5rem;
55+
margin: 2rem 0;
56+
color: $black;
57+
}
58+
p {
59+
font-size: 1.9rem;
60+
color: $secondary-color;
61+
}
62+
}
63+
}
64+
}

Diff for: ‎src/pages/ServicesPage.tsx

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
/* eslint-disable */
2+
import React from "react";
3+
import { Meta } from "../components/Meta";
4+
5+
const ServicesPage: React.FC = () => {
6+
return (
7+
<>
8+
<Meta title="Services - E-Commerce Ninjas" />
9+
<div className="services-container">
10+
<div className="image-container">
11+
<p className="service-header">
12+
Welcome to e-Commerce Ninjas <br />
13+
Customer Services
14+
</p>
15+
<p>
16+
What would you like help with today? <br /> You can quickly take
17+
care of most things here, <br /> or connect with us when needed.
18+
</p>
19+
</div>
20+
<div className="services-cards">
21+
<div className="cards">
22+
<div className="icon">
23+
<img
24+
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834911/Process_1_uqwerq.png"
25+
alt=""
26+
/>
27+
</div>
28+
<p className="card-header">Simplified process</p>
29+
<p>
30+
e-Commerce-Ninjas.com reviews your claim directly, saving you time
31+
spent negotiating with suppliers*.
32+
</p>
33+
</div>
34+
<div className="cards">
35+
<div className="icon">
36+
<img
37+
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834911/Hangar_1_tzoydr.png"
38+
alt=""
39+
/>
40+
</div>
41+
<p className="card-header">Inventory management</p>
42+
<p>
43+
Better plan out and manage inventory knowing orders will be
44+
delivered on time.
45+
</p>
46+
</div>
47+
<div className="cards">
48+
<div className="icon">
49+
<img
50+
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834911/Transaction_1_mkwskd.png"
51+
alt=""
52+
/>
53+
</div>
54+
<p className="card-header">Compensation for delays</p>
55+
<p>
56+
If late delivery occurs, receive a coupon which can be used for
57+
future purchases.
58+
</p>
59+
</div>
60+
<div className="cards">
61+
<div className="icon">
62+
<img
63+
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Coin_in_Hand_1_gno7gh.png"
64+
alt=""
65+
/>
66+
</div>
67+
<p className="card-header">Transparent rates</p>
68+
<p>Get competitive pricing and check rates in real-time.</p>
69+
</div>
70+
<div className="cards">
71+
<div className="icon">
72+
<img
73+
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Earth_Planet_1_uzxsfr.png"
74+
alt=""
75+
/>
76+
</div>
77+
<p className="card-header">Worldwide coverage</p>
78+
<p>
79+
Enjoy tracked delivery to most countries and regions around the
80+
world.
81+
</p>
82+
</div>
83+
<div className="cards">
84+
<div className="icon">
85+
<img
86+
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Financial_Success_1_qb4kuu.png"
87+
alt=""
88+
/>
89+
</div>
90+
<p className="card-header">Tailored solutions</p>
91+
<p>
92+
Choose from door-to-door and port- to-port services according to
93+
your needs and budget.
94+
</p>
95+
</div>
96+
<div className="cards">
97+
<div className="icon">
98+
<img
99+
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Security_Shield_1_gxwapg.png"
100+
alt=""
101+
/>
102+
</div>
103+
<p className="card-header">Security & Privacy</p>
104+
<p>
105+
e-Commerce-Ninjas.com reviews your claim directly, saving you time
106+
spent negotiating with suppliers*.
107+
</p>
108+
</div>
109+
<div className="cards">
110+
<div className="icon">
111+
<img
112+
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Web_Accessibility_1_n8fof9.png"
113+
alt=""
114+
/>
115+
</div>
116+
<p className="card-header">Accessibility</p>
117+
<p>
118+
Better plan out and manage inventory knowing orders will be
119+
delivered on time.
120+
</p>
121+
</div>
122+
<div className="cards">
123+
<div className="icon">
124+
<img
125+
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Customer_Support_1_gott5j.png"
126+
alt=""
127+
/>
128+
</div>
129+
<p className="card-header">Resolution support</p>
130+
<p>
131+
If there's a problem with your refund, we will help mediate to get
132+
your money back.
133+
</p>
134+
</div>
135+
</div>
136+
</div>
137+
</>
138+
);
139+
};
140+
141+
export default ServicesPage;

Diff for: ‎src/router.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import UserProfile from './pages/UserEditProfile';
2828
import ProductsPage from './pages/Products';
2929
import TrackOrder from './pages/trackOrder';
3030
import UserVIewOrders from './pages/UserViewOrders';
31+
import ServicesPage from './pages/ServicesPage';
3132
const AppRouter: React.FC = () => {
3233
return (
3334
<div>
@@ -36,6 +37,7 @@ const AppRouter: React.FC = () => {
3637
<Route index element={<LandingPage />} />
3738
<Route path="/home" element={<LandingPage />} />
3839
<Route path="/products" element={<ProductsPage />} />
40+
<Route path="/services" element={<ServicesPage />} />
3941
<Route path="signup" element={<SignUp />} />
4042
<Route path="login" element={<Login />} />
4143
<Route path="verify-email" element={<EmailVerifying />} />

0 commit comments

Comments
 (0)