Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Made products in show category responsive #49

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Made products in show category responsive #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3159e28
Refactor Hero component layout and styles
Angee-web Oct 6, 2024
e70ba3e
Refactor Hero component layout and styles
Angee-web Oct 6, 2024
d3d2735
Refactor ShopCategory to improve responsiveness of items card.
Angee-web Oct 6, 2024
995b013
Refactored Hamburger, Navbar components, and Newsletter components.
Angee-web Oct 6, 2024
e1112a3
Refactor Navbar component to add menu indicator
Angee-web Oct 6, 2024
9b8c8a9
Refactored components
Angee-web Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48,363 changes: 29,038 additions & 19,325 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"react-icons": "^5.0.1",
"react-redux": "^9.1.0",
"react-router-dom": "^6.22.2",
"react-scripts": "5.0.1",
"react-scripts": "^3.0.1",
"tailwind-scrollbar-hide": "^1.1.7",
"web-vitals": "^2.1.4"
},
"repository": {
Expand Down
2 changes: 2 additions & 0 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Footer from "./components/Footer";
import men_banner from "./components/assets/banner_mens.png";
import women from "./components/assets/banner_women.png";
import kids from "./components/assets/banner_kids.png";
import About from "./pages/About";

function App() {
return (
Expand All @@ -35,6 +36,7 @@ function App() {
<Route path="/product" element={<Product />}>
<Route path=":productId" element={<Product />} />
</Route>
<Route path="/about" element={<About />} />
<Route path="/cart" element={<Cart />} />
<Route path="/login" element={<LoginSignup />} />
</Routes>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Breadcrum.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Breadcrum = (props) => {
};

return (
<div className="flex items-center gap-[8px] text-[#5e5e5e] text-[16px] font-bold my-[60px] mx-[170px] capitalize">
<div className=" gap-[8px] text-[#5e5e5e] text-[16px] font-bold my-[60px] mx-[170px] capitalize">
<div className="cursor-pointer hover:text-[#EB423F]" onClick={() => breadCrumbHandler("/")}>
Home
</div>
Expand Down
146 changes: 79 additions & 67 deletions src/components/CartItems.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,79 +6,91 @@ const CartItems = () => {
const { all_product, cartItems, removeToCart, getTotalCartAmount } = useContext(ShopContext);

return (
<div className='my-24 mx-10 md:my-32 md:mx-20 lg:my-40 lg:mx-32'>
<div className='grid grid-cols-6 text-[18px] py-5 text-[#454545] font-bold'>
<p>Products</p>
<p className='col-span-2 pl-4'>Title</p>
<p className='pl-8'>New Price</p>
<p className='pl-8'>Old Price</p>
<p className='pl-8'>Quantity</p>
<p className='pl-8'>Total</p>
<p className='pl-8'>Remove</p>
</div>
<hr className='h-[3px] bg-[#e2e2e2] border-0' />

{all_product.map((e) => {
if (cartItems[e.id] > 0) {
return (
<div key={e.id}>
<div className='grid grid-cols-6 items-center text-[18px] py-5 text-[#454545]'>
<img className='w-[60px] h-auto' src={e.image} alt={e.name} />
<p className='col-span-2 pl-4'>{e.name}</p>
<p className='pl-8'>${e.new_price}</p>
<p className='pl-8 line-through text-gray-500'>${e.old_price}</p> {/* Old Price with strikethrough */}
<button className='pl-8'>{cartItems[e.id]}</button>
<p className='pl-8'>${e.new_price * cartItems[e.id]}</p>
<img
className='w-[24px] h-auto pl-8 cursor-pointer'
src={remove_icon}
onClick={() => { removeToCart(e.id) }}
alt="Remove"
/>
</div>
<hr />
</div>
);
}
return null;
})}
<div className="my-24 mx-10 md:my-32 md:mx-20 lg:my-40 lg:mx-32">
<div className="text-[#454545] font-bold flex flex-col lg:justify-between lg:items-center text-lg my-3 ">
<p>Products</p>
<p className="">Title</p>
<p className=" ">New Price</p>
<p className="">Old Price</p>
<p className="">Quantity</p>
<p className="">Total</p>
<p className="">Remove</p>
</div>
<hr className="h-[3px] bg-[#e2e2e2] border-0" />

<div className='flex flex-col md:flex-row my-24 mx-0'>
<div className='flex-1 mr-0 md:mr-20 mb-10 md:mb-0'>
<p className='text-[22px] font-bold'>Cart Totals</p>
<div>
<div className='flex justify-between py-4'>
<p>Subtotal</p>
<p>${getTotalCartAmount()}</p>
</div>
<hr />
<div className='flex justify-between py-4'>
<p>Shipping Fee</p>
<p>Free</p>
</div>
<hr />
<div className='flex justify-between py-4 text-[18px] font-semibold'>
<h3>Total</h3>
<h3>${getTotalCartAmount()}</h3>
</div>
</div>
<button className='w-full md:w-[263px] h-[56px] outline-none border-none bg-[#ff4141] text-[#fff] text-[16px] font-bold cursor-pointer'>
PROCEED TO CHECKOUT
</button>
{all_product.map((e) => {
if (cartItems[e.id] > 0) {
return (
<div key={e.id}>
<div className="grid grid-cols-6 items-center text-[18px] py-5 text-[#454545]">
<img className="w-[60px] h-auto" src={e.image} alt={e.name} />
<p className="col-span-2 pl-4">{e.name}</p>
<p className="pl-8">${e.new_price}</p>
<p className="pl-8 line-through text-gray-500">
${e.old_price}
</p>{" "}
{/* Old Price with strikethrough */}
<button className="pl-8">{cartItems[e.id]}</button>
<p className="pl-8">${e.new_price * cartItems[e.id]}</p>
<img
className="w-[24px] h-auto pl-8 cursor-pointer"
src={remove_icon}
onClick={() => {
removeToCart(e.id);
}}
alt="Remove"
/>
</div>
<hr />
</div>
);
}
return null;
})}

<div className='flex-1 text-[16px] font-bold'>
<p className='text-[#555]'>If you have a promo code, enter here!</p>
<div className='w-full md:w-[504px] mt-[15px] pl-2 h-[58px] bg-[#eaeaea] flex items-center'>
<input className='border-none outline-none bg-transparent text-[16px] w-[250px] h-[50px] pl-2' type="text" placeholder='Promo-Code' />
<button className='w-[170px] h-[58px] text-[16px] bg-black text-white cursor-pointer ml-4'>
Submit
</button>
</div>
</div>
<div className="flex flex-col md:flex-row my-24 mx-0">
<div className="flex-1 mr-0 md:mr-20 mb-10 md:mb-0">
<p className="text-[22px] font-bold">Cart Totals</p>
<div>
<div className="flex justify-between py-4">
<p>Subtotal</p>
<p>${getTotalCartAmount()}</p>
</div>
<hr />
<div className="flex justify-between py-4">
<p>Shipping Fee</p>
<p>Free</p>
</div>
<hr />
<div className="flex justify-between py-4 text-[18px] font-semibold">
<h3>Total</h3>
<h3>${getTotalCartAmount()}</h3>
</div>
</div>
<button className="w-full md:w-[263px] h-[56px] outline-none border-none bg-[#ff4141] text-[#fff] text-[16px] font-bold cursor-pointer">
PROCEED TO CHECKOUT
</button>
</div>

<div className="flex-1 text-[16px] font-bold">
<p className="text-[#555]">If you have a promo code, enter here!</p>

<div className="w-full mt-[15px] h-[58px] bg-[#eaeaea] flex items-center px-1">
<input
placeholder="Promo-code"
className="h-[50px] w-full ml-0 pl-1"
/>
<button type="submit" className="text-white bg-black h-[50px] px-1 w-[100px]">Submit</button>
</div>
</div>
</div>
</div>
);
}

export default CartItems;

{/* <input className='border-none outline-none bg-transparent text-[16px] w-screen h-[50px] pl-2' type="text" placeholder='Promo-Code' />
<button className='w-[] h-[58px] text-[16px] bg-black text-white cursor-pointer ml-4'>
Submit
</button> */}
1 change: 1 addition & 0 deletions src/components/Hamburger.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const HamburgerMenu = () => {
<a className="menu-item" href="/login">
<p className='login-button'>Log in</p>
</a>
<a></a>
</Menu>
);
};
Expand Down
68 changes: 38 additions & 30 deletions src/components/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,44 @@
import React from 'react';
import hand from './assets/hand_icon.png';
import arrow from './assets/arrow.png';
import heroimg from './assets/heroimg3.png';
import React from "react";
import hand from "./assets/hand_icon.png";
import arrow from "./assets/arrow.png";
import heroimg from "./assets/heroimg3.png";

const Hero = () => {
return (
<div className='gradeint flex flex-col md:flex-row w-full'>
{/* Left Side */}
<div className='flex flex-col justify-center gap-5 md:pl-36 lg:pl-48 w-full md:w-3/5 px-5'>
<h2 className='text-white text-[22px] md:text-[26px] font-semibold'>New Arrivals Only</h2>
<div className='flex flex-col leading-tight'>
<div className='flex items-center gap-5'>
<p className='text-[60px] md:text-[80px] lg:text-[100px] font-bold text-white'>new</p>
<img className='w-[60px] md:w-[105px]' src={hand} alt="Hand Icon" />
</div>
<span className='text-[40px] md:text-[60px] lg:text-[80px] font-bold text-white'>collections</span>
<span className='text-[40px] md:text-[60px] lg:text-[80px] font-bold text-white'>for everyone</span>
</div>
<button className='flex justify-center items-center gap-[15px] w-[300px] h-[70px] rounded-full text-white border-black bg-[#D2042D] hover:bg-black mt-[30px] text-[18px] font-large'>Latest Conenction
<div>
<img className='' src={arrow} alt="" />
</div>
</button>
</div>

{/* Right Side - Hero Image */}
<div className='hero-right w-full md:w-2/5 flex justify-center'>
<img className='w-full h-auto max-w-[600px]' src={heroimg} alt="Hero" />
</div>

return (
<div className="gradeint flex flex-col md:flex-row w-full">
{/* Left Side */}
<div className="flex flex-col justify-center gap-5 md:pl-36 lg:pl-48 w-full md:w-3/5 px-5 pt-10">
<h2 className="text-white text-[22px] md:text-[26px]font-semibold text-center lg:text-left">
New Arrivals Only
</h2>
<div className="flex flex-col justify-center items-center leading-tight lg:justify-start lg:items-start">
<div className="flex items-center gap-5 ">
<p className="text-[60px] md:text-[80px] lg:text-[100px] font-bold text-white">
new
</p>
<img className="w-[60px] md:w-[105px]" src={hand} alt="Hand Icon" />
</div>
<span className="text-[40px] md:text-[60px] lg:text-[80px] font-bold text-white">
collections
</span>
<span className="text-[40px] md:text-[60px] lg:text-[80px] font-bold text-white">
for everyone
</span>
</div>
);
<button className="flex justify-center items-center gap-[15px] w-[290px] h-[70px] rounded-full text-white border-black bg-[#D2042D] hover:bg-black my-[30px] text-[18px] font-large">
Latest Collection
<div>
<img className="" src={arrow} alt="" />
</div>
</button>
</div>

{/* Right Side - Hero Image */}
<div className="hero-right w-full md:w-2/5 flex justify-center pt-10">
<img className="w-full h-auto max-w-[600px]" src={heroimg} alt="Hero" />
</div>
</div>
);
};

export default Hero;
Loading