Skip to content

Commit

Permalink
Merge branch 'develop' of github.com:atlp-rwanda/e-commerce-ninjas-fe…
Browse files Browse the repository at this point in the history 
… into ft-admin-set-password-exp
  • Loading branch information
@Aime-Patrick
Aime-Patrick committed Aug 20, 2024
2 parents 10ad106 + ab39a83 commit 79312db
Show file tree
Hide file tree
Showing 4 changed files with 208 additions and 0 deletions.
1 change: 1 addition & 0 deletions src/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,4 +44,5 @@
@import "./assets//styles/UserProfile.scss";
@import "./assets/styles/SellerSideProduct.scss";
@import "./assets/styles/SellerDeleteItem.scss";
@import "./assets/styles/ServicesPage.scss";
@import "./assets/styles/Settings.scss";
64 changes: 64 additions & 0 deletions src/assets/styles/ServicesPage.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
.services-container {
.image-container {
width: 100vw;
height: 33rem;
color: $white;
background-image: url(https://res.cloudinary.com/djrmfg6k9/image/upload/v1723647815/Rectangle_168_ztbooe.png);
background-size: cover;
background-repeat: no-repeat;
.service-header {
color: $primary-color;
font-size: 4rem;
padding: 5rem;
}
p {
font-size: 2.5rem;
padding: 1rem 5rem;
}
}
.services-cards {
display: grid;
justify-items: center;
grid-template-columns: repeat(auto-fill, minmax(35rem, 1fr));
gap: 3rem;
padding: 2rem;
.cards {
display: block;
width: 30rem;
text-align: left !important;
padding: 4rem;
margin: 3rem;
border-radius: 2rem;
border: 3px solid $third-color;
transition: all 0.3s ease;

&:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-color: $primary-color;
transform: translateY(-10px);
}
.icon {
display: flex;
justify-content: center;
align-items: center;
background-color: $primary-color;
width: 9rem;
height: 9rem;
border-radius: 50%;
color: $black;
img {
z-index: 100;
}
}
.card-header {
font-size: 2.5rem;
margin: 2rem 0;
color: $black;
}
p {
font-size: 1.9rem;
color: $secondary-color;
}
}
}
}
141 changes: 141 additions & 0 deletions src/pages/ServicesPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
/* eslint-disable */
import React from "react";
import { Meta } from "../components/Meta";

const ServicesPage: React.FC = () => {
return (
<>
<Meta title="Services - E-Commerce Ninjas" />
<div className="services-container">
<div className="image-container">
<p className="service-header">
Welcome to e-Commerce Ninjas <br />
Customer Services
</p>
<p>
What would you like help with today? <br /> You can quickly take
care of most things here, <br /> or connect with us when needed.
</p>
</div>
<div className="services-cards">
<div className="cards">
<div className="icon">
<img
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834911/Process_1_uqwerq.png"
alt=""
/>
</div>
<p className="card-header">Simplified process</p>
<p>
e-Commerce-Ninjas.com reviews your claim directly, saving you time
spent negotiating with suppliers*.
</p>
</div>
<div className="cards">
<div className="icon">
<img
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834911/Hangar_1_tzoydr.png"
alt=""
/>
</div>
<p className="card-header">Inventory management</p>
<p>
Better plan out and manage inventory knowing orders will be
delivered on time.
</p>
</div>
<div className="cards">
<div className="icon">
<img
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834911/Transaction_1_mkwskd.png"
alt=""
/>
</div>
<p className="card-header">Compensation for delays</p>
<p>
If late delivery occurs, receive a coupon which can be used for
future purchases.
</p>
</div>
<div className="cards">
<div className="icon">
<img
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Coin_in_Hand_1_gno7gh.png"
alt=""
/>
</div>
<p className="card-header">Transparent rates</p>
<p>Get competitive pricing and check rates in real-time.</p>
</div>
<div className="cards">
<div className="icon">
<img
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Earth_Planet_1_uzxsfr.png"
alt=""
/>
</div>
<p className="card-header">Worldwide coverage</p>
<p>
Enjoy tracked delivery to most countries and regions around the
world.
</p>
</div>
<div className="cards">
<div className="icon">
<img
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Financial_Success_1_qb4kuu.png"
alt=""
/>
</div>
<p className="card-header">Tailored solutions</p>
<p>
Choose from door-to-door and port- to-port services according to
your needs and budget.
</p>
</div>
<div className="cards">
<div className="icon">
<img
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Security_Shield_1_gxwapg.png"
alt=""
/>
</div>
<p className="card-header">Security & Privacy</p>
<p>
e-Commerce-Ninjas.com reviews your claim directly, saving you time
spent negotiating with suppliers*.
</p>
</div>
<div className="cards">
<div className="icon">
<img
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Web_Accessibility_1_n8fof9.png"
alt=""
/>
</div>
<p className="card-header">Accessibility</p>
<p>
Better plan out and manage inventory knowing orders will be
delivered on time.
</p>
</div>
<div className="cards">
<div className="icon">
<img
src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Customer_Support_1_gott5j.png"
alt=""
/>
</div>
<p className="card-header">Resolution support</p>
<p>
If there's a problem with your refund, we will help mediate to get
your money back.
</p>
</div>
</div>
</div>
</>
);
};

export default ServicesPage;
2 changes: 2 additions & 0 deletions src/router.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import UserProfile from './pages/UserEditProfile';
import ProductsPage from './pages/Products';
import TrackOrder from './pages/trackOrder';
import UserVIewOrders from './pages/UserViewOrders';
import ServicesPage from './pages/ServicesPage';
import { Settings } from './pages/admin/Settings';
const AppRouter: React.FC = () => {
return (
Expand All @@ -37,6 +38,7 @@ const AppRouter: React.FC = () => {
<Route index element={<LandingPage />} />
<Route path="/home" element={<LandingPage />} />
<Route path="/products" element={<ProductsPage />} />
<Route path="/services" element={<ServicesPage />} />
<Route path="signup" element={<SignUp />} />
<Route path="login" element={<Login />} />
<Route path="verify-email" element={<EmailVerifying />} />
Expand Down

0 comments on commit 79312db

Please sign in to comment.