Skip to content

Commit

Permalink
added About us Page
Browse files Browse the repository at this point in the history
  • Loading branch information
13XAVI committed Jul 23, 2024
1 parent 1e8e7fe commit 6379cee
Show file tree
Hide file tree
Showing 6 changed files with 117 additions and 0 deletions.
Binary file added public/doublequotes2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/doublequotesl.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions public/whoweare.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 45 additions & 0 deletions src/__test__/home/aboutus.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import { MemoryRouter } from 'react-router-dom';
import Aboutus from '@/components/home/Aboutus';

const renderWithProviders = (
ui: React.ReactElement,
{
store = configureStore({
reducer: {},
}),
} = {}
) => {
return render(
<Provider store={store}>
<MemoryRouter>{ui}</MemoryRouter>
</Provider>
);
};

describe('Aboutus Component', () => {
test('renders Aboutus component', () => {
renderWithProviders(<Aboutus />);

expect(screen.getByText('Dynamite E-commerce')).toBeInTheDocument();

expect(screen.getAllByRole('img')).toHaveLength(4);

expect(screen.getByText('Mission')).toBeInTheDocument();
expect(
screen.getByText(
'We prosper our customers to give them valuable product at affordable price in fast process.'
)
).toBeInTheDocument();
expect(screen.getByText('Vision')).toBeInTheDocument();
expect(
screen.getByText(
'E-commerce is your go-to platform designed for security reasons. Data privacy is our endless goal for potential customers to feel at ease.'
)
).toBeInTheDocument();
expect(screen.getByText('why chose us')).toBeInTheDocument();

Check failure on line 43 in src/__test__/home/aboutus.test.tsx

View workflow job for this annotation

GitHub Actions / build (20.x)

src/__test__/home/aboutus.test.tsx > Aboutus Component > renders Aboutus component

TestingLibraryElementError: Unable to find an element with the text: why chose us. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <div> <div class="w-full overflow-hidden px-10 bg-violeteBg py-5 md:h-96 relative " > <h1 class="font-bold md:text-3xl text-2xl text-primary flex justify-center py-10" > Dynamite E-commerce </h1> <img alt="" class=" md:px-40" src="/doublequotesl.png" /> <div class=" flex-wrap text-textBlack md:px-56" > E-commerce is your go-to platform for seamless online shopping. We offer a wide range of products, competitive prices, and a user-friendly experience, ensuring you find exactly what you need with ease. At Dynamite, customer satisfaction is our top priority, and we are dedicated to providing a secure and enjoyable shopping experience for everyone. </div> <img alt="" class="pb-10 sticky top-10 right-48" src="/doublequotes2.png" style="margin-left: auto;" /> </div> <div class="font-bold flex justify-center py-5 text-2xl" > why choose us </div> <div class="md:px-56" > <header class="bg-white py-4 mx-0 md:mx-16" style="font-family: Lexend, Manrope, Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif;" > <div class="mx-auto p-4 flex flex-col md:flex-row justify-between gap-4 md:items-center" > <div class="flex items-center gap-2" > <img alt="Free Shipping" src="/icons/icon1.svg" /> <div class="flex flex-col gap-2" > <h2 class="font-semibold leading-none text-lg text-gray-700" > Free Shipping </h2> <span class="text-gray-400 text-sm" > Free shipping on all orders </span> </div> </div> <div class="flex items-center gap-2" > <img alt="Online Support 24/7" src="/icons/icon4.svg" /> <div class="flex flex-col gap-2" > <h2 class="font-semibold leading-none text-lg text-gray-700" > Online Support 24/7 </h2> <span class="text-gray-400 text-sm" > Support online 24 hours a day </span> </div> </div> <div class="flex items-center gap-2" > <img alt="Money Return" src="/icons/icon3.svg" /> <div class="flex flex-col gap-2" > <h2 class="font-semibold leading-none text-lg text-gray-700" > Money Return </h2> <span class="text-gray-400 text-sm" > Back guarantee under 7 days </span> </div> </div> <div class="flex items-center gap-2" > <img alt="Member Discount" src="/icons/icon2.svg" /> <div class="flex flex-col gap-2" > <h2 class="font-semibold leading-none text-lg text-gray-700"
});
});
61 changes: 61 additions & 0 deletions src/components/home/Aboutus.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import Header from './header';

function Aboutus() {
return (
<div>
<div className="w-full overflow-hidden px-10 bg-violeteBg py-5 md:h-96 relative ">
<h1 className="font-bold md:text-3xl text-2xl text-primary flex justify-center py-10">
Dynamite E-commerce
</h1>
<img src="/doublequotesl.png" alt="" className=" md:px-40" />
<div className=" flex-wrap text-textBlack md:px-56">
E-commerce is your go-to platform for seamless online shopping. We
offer a wide range of products, competitive prices, and a
user-friendly experience, ensuring you find exactly what you need with
ease. At Dynamite, customer satisfaction is our top priority, and we
are dedicated to providing a secure and enjoyable shopping experience
for everyone.
</div>
<img
src="/doublequotes2.png"
alt=""
className="pb-10 sticky top-10 right-48"
style={{ marginLeft: 'auto' }}
/>
</div>

<div className="font-bold flex justify-center py-5 text-2xl">
why choose us
</div>
<div className="md:px-56">
<Header />
</div>
<div className="md:flex items-center gap-10 py-20 justify-center pl-10">
<img
src="/whoweare.svg"
alt=""
className="md:w-1/6 object-cover pb-5 "
/>
<div className="flex flex-col md:w-1/2 gap-10 ">
<div>
<h1 className="font-semibold text-lg ">Mission</h1>
<p className="mt-2">
We prosper our customers to give them valuable product at
affordable price in fast process.
</p>
</div>
<div className="py-3">
<h1 className="font-semibold text-lg">Vision</h1>
<p className="mt-2">
E-commerce is your go-to platform designed for security reasons.
Data privacy is our endless goal for potential customers to feel
at ease.
</p>
</div>
</div>
</div>
</div>
);
}

export default Aboutus;
2 changes: 2 additions & 0 deletions src/routes/AppRoutes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import ProductDetails from '@/pages/ProductDetails';
import ProtectedRoute from '@/components/ProtectedRoute';
import Cart from '@/components/Cart/Cart';
import Seller from '@/pages/Seller';
import Aboutus from '@/components/home/Aboutus';

function AppRoutes() {
return (
Expand All @@ -29,6 +30,7 @@ function AppRoutes() {
<Route index path="/" element={<Home />} />
<Route path="shop" element={<Shop />} />
<Route path="/contact" element={<ContactPage />} />
<Route path="about" element={<Aboutus />} />
<Route
path="wishlist"
element={
Expand Down

0 comments on commit 6379cee

Please sign in to comment.