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

Add new pages for different links in navbar #47

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

Add new pages for different links in navbar #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3b28f1d
Add new pages for different links in navbar
Saikat123Dev Jun 7, 2024
4cade97
Merge branch 'main' into addnewPages
Saikat123Dev Jun 10, 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
63 changes: 63 additions & 0 deletions client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
"react-responsive-carousel": "^3.2.23",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.1",
"simplebar": "^6.2.6",
"simplebar-react": "^3.2.5",
"web-vitals": "^2.1.4"
},
"scripts": {
Expand Down
46 changes: 23 additions & 23 deletions client/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
import logo from './logo.svg';
import './App.css';
import logo from "./logo.svg";
import "./App.css";
import ReactDOM from "react-dom/client";
import Login from './Components/Login';
import Register from './Components/Register';
import Products from './Components/Products';
import HomePage from './Components/HomePage';
import {BrowserRouter,Routes,Route} from 'react-router-dom'

import Login from "./Components/Login";
import Register from "./Components/Register";
import Products from "./Components/Products";
import HomePage from "./Components/HomePage";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import WomanProduct from "./Components/WomanProduct";
import MenProduct from "./Components/MenProduct";
import KidsProduct from "./Components/KidsProduct";

function App() {
return (
<>
<BrowserRouter>
<Routes>



{/* Login Routes {user ? <Navigate replace to="/"/> }: */}
<Route exact path="/" element={ <HomePage/>} ></Route>
<Route exact path="/login" element={ <Login/>} />
<Route path="/sign-up" element={<Register/>}></Route>
<Route path="/:product" element={<Products/>}></Route>
</Routes>
</BrowserRouter>



<BrowserRouter>
<Routes>
{/* Login Routes {user ? <Navigate replace to="/"/> }: */}

<Route exact path="/" element={<HomePage />}></Route>
<Route exact path="/women" element={<WomanProduct />}></Route>
<Route exact path="/men" element={<MenProduct />}></Route>
<Route exact path="/kids" element={<KidsProduct />}></Route>
<Route exact path="/login" element={<Login />} />
<Route path="/sign-up" element={<Register />}></Route>
<Route path="/:product" element={<Products />}></Route>
</Routes>
</BrowserRouter>
</>
);
}
Expand Down
74 changes: 37 additions & 37 deletions client/src/Components/HomePage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,46 @@
import {React,useState} from 'react'
import Navbar from './Navbar'
import {useNavigate} from 'react-router-dom'
import data from '../Assests/HomePageData'
import CategoryCard from './CategoryCard'
import ProductCard from './ProductCard'
import Products from './Products'
import Icons from './Icons';
import CarouselComponent from './CarouselComponent'
function HomePage() {
const navigate=useNavigate();
import { React, useState } from "react";
import Navbar from "./Navbar";
import { useNavigate } from "react-router-dom";
import data from "../Assests/HomePageData";
import CategoryCard from "./CategoryCard";
import ProductCard from "./ProductCard";
import Products from "./Products";
import Icons from "./Icons";
import CarouselComponent from "./CarouselComponent";





function HomePage() {
const navigate = useNavigate();

return (
<div>
<Navbar/>
<CarouselComponent/>
<Icons/>
<div >
<div className='font-extrabold text-center'>SHOP BY CATEGORY</div>

<div className=' flex flex-wrap justify-center gap-3 w-5/6 mx-auto'>

{data.map((item,i)=>{
return (

<div onClick={()=>{

navigate("/"+item.search);
}} className='cursor-pointer'>
<CategoryCard image={item.image} title={item.title} discount={item.discount} key={i} />
</div>
)
})}
<Navbar />
<CarouselComponent />
<Icons />
<div>
<div className="font-extrabold text-center">SHOP BY CATEGORY</div>

<div className=" flex flex-wrap justify-center gap-3 w-5/6 mx-auto">
{data.map((item, i) => {
return (
<div
onClick={() => {
navigate("/" + item.search);
}}
className="cursor-pointer"
>
<CategoryCard
image={item.image}
title={item.title}
discount={item.discount}
key={i}
/>
</div>
);
})}
</div>
</div>
</div>

)
);
}

export default HomePage
export default HomePage;
19 changes: 19 additions & 0 deletions client/src/Components/KidsProduct.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/* KidsProduct.css */
.kids-bg {
background: linear-gradient(135deg, #FFDEE9 0%, #B5FFFC 100%);
}

.kids-title {
color: #FF69B4;
font-family: 'Comic Sans MS', 'Comic Sans', cursive;
}

.kids-card {
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.kids-card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
39 changes: 39 additions & 0 deletions client/src/Components/KidsProduct.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React from 'react';
import Navbar from './Navbar';
import { useNavigate } from 'react-router-dom';
import data from '../Assests/HomePageData';
import CategoryCard from './CategoryCard';
import './KidsProduct.css'; // Import the CSS file for additional styling

function KidsProduct() {
const navigate = useNavigate();

return (
<div className="kids-bg min-h-screen">
<Navbar />
<div className="container mx-auto px-4 py-8 mt-4">
<div className='flex flex-wrap justify-center gap-6 w-5/6 mx-auto mt-11'>
{data.map((item, i) => {
return item.title.includes("Kids") ? (
<div
key={i}
onClick={() => {
navigate("/" + item.search);
}}
className='cursor-pointer transform hover:scale-105 transition-transform duration-300 kids-card'
>
<CategoryCard
image={item.image}
title={item.title}
discount={item.discount}
/>
</div>
) : null;
})}
</div>
</div>
</div>
);
}

export default KidsProduct;
42 changes: 42 additions & 0 deletions client/src/Components/MenProduct.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react';
import Navbar from './Navbar';
import { useNavigate } from 'react-router-dom';
import data from '../Assests/HomePageData';
import CategoryCard from './CategoryCard';


function MenProduct() {
const navigate = useNavigate();

return (
<div className="bg-gray-100 min-h-screen">
<Navbar />
<div className="container mx-auto px-4 py-8 mt-4">


<div className='flex flex-wrap justify-center gap-6 w-5/6 mx-auto mt-11'>
{data.map((item, i) => {
return item.title.includes("Men") || item.title.includes("Watches") ? (
<div
key={i}
onClick={() => {
navigate("/" + item.search);
}}
className='cursor-pointer transform hover:scale-105 transition-transform duration-300'
>
<CategoryCard
image={item.image}
title={item.title}
discount={item.discount}
/>
</div>
) : null;
})}
</div>

</div>
</div>
);
}

export default MenProduct;
40 changes: 40 additions & 0 deletions client/src/Components/ProductCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,43 @@

import React from "react";

function ProductCard({ prop }) {
return (
<div class=" rounded overflow-hidden shadow-lg">
<div className="relative top-8 left-64 ">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6 fill-current text-red-600"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
/>
</svg>
</div>
<img
class="w-72 text-center "
src={prop.image}
alt="Sunset in the mountains"
/>
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">{prop.brand}</div>
<p class="text-gray-700 text-base">{prop.title}</p>
<div className="flex items-center">
<div className="font-bold text-md mb-2 ">{prop.discountprice}</div>
<div className=" line-through mb-2">{prop.actualprice}</div>
<div className="text-red-600 font-medium mb-2 ">{`( ${
Number.parseInt(prop.discountpercentage)
? prop.discountpercentage
: "20"
} OFF )`}</div>
</div>
=======
import React, { useState } from 'react';

function ProductCard({ prop }) {
Expand Down
Loading