Skip to content

Fixes #130 #130

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

Open
sahil-dev17 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Fixes #130 #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
05b792e
added the feature
Aug 9, 2025
a7b2f27
Merge branch 'main' into Cursor
sahil-dev17 Aug 9, 2025
8ec5a2d
Merge branch 'main' into Cursor
sahil-dev17 Aug 9, 2025
23a8deb
Cursor
Aug 10, 2025
798edb6
Merge branch 'Cursor' of https://github.com/sahil-dev17/trendhora int…
Aug 10, 2025
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
25,983 changes: 6,853 additions & 19,130 deletions client/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,18 @@
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"axios": "^1.11.0",
"bootstrap": "^5.2.0",
"motion": "^12.23.12",
"rc-drawer": "^5.1.0",
"react": "^18.2.0",
"react-animated-cursor": "^2.11.2",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.2.0",
"react-icons": "^5.5.0",
"react-loading": "^2.0.3",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-scripts": "5.0.1",
"react-toastify": "^11.0.5",
"uuid": "^8.3.2",
"web-vitals": "^2.1.4"
Expand Down
191 changes: 191 additions & 0 deletions client/src/app/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
font-family: 'Roboto', sans-serif;
}

/* Base link styles */
a {
text-decoration: none;
color: var(--text-primary);
Expand All @@ -59,6 +60,7 @@ html, body, #root {
height: 100%;
margin: 0;
padding: 0;
cursor: none; /* Hide native cursor for custom SnakeCursor */
}

.app__container {
Expand All @@ -70,3 +72,192 @@ html, body, #root {
.app__content {
flex: 1;
}

/* ===================
Global Hover Effects
=================== */
/* Smooth transitions on common interactive elements */
a, .btn, button, .card, .nav-link, .list-group-item, .form-control, img, .dropdown-item {
transition: color .2s ease, background-color .2s ease, border-color .2s ease,
box-shadow .25s ease, transform .25s cubic-bezier(.2,.7,.2,1),
filter .25s ease, text-decoration-color .2s ease, opacity .2s ease;
}

/* Links (override earlier hover to add nice effects) */
a {
text-decoration-color: rgba(0,0,0,0.25);
text-underline-offset: 3px;
}

a:hover {
text-decoration: underline;
text-underline-offset: 4px;
filter: brightness(1.06);
}

/* Buttons */
.btn, button {
will-change: transform, box-shadow;
}

.btn:hover, button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,.12), 0 6px 12px rgba(0,0,0,.08);
}

.btn:active, button:active {
transform: translateY(-1px) scale(.985);
box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* Cards */
.card {
transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
will-change: transform, box-shadow;
}

.card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 48px rgba(0,0,0,.16), 0 8px 18px rgba(0,0,0,.12);
}

.card img {
transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

.card:hover img {
transform: scale(1.05);
}

/* Nav links underline grow */
.nav-link {
position: relative;
}

.nav-link::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 0%;
height: 2px;
background: currentColor;
opacity: .85;
transition: width .25s ease, opacity .25s ease;
}

.nav-link:hover::after {
width: 100%;
opacity: 1;
}

/* Dropdown items */
.dropdown-item:hover {
background-color: rgba(0,0,0,0.035);
}

/* List group hover */
.list-group-item:hover {
background-color: rgba(0,0,0,0.03);
}

/* Inputs focus improvement */
.form-control:focus {
box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .15);
border-color: rgba(0, 123, 255, .4);
}

/* Image subtle hover */
img:hover {
filter: saturate(1.05) contrast(1.02);
}

/* Utility classes for opt-in stronger effects */
.hover-glow:hover {
box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset, 0 12px 28px rgba(0,0,0,.18);
transform: translateY(-3px);
}

.hover-raise:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

.hover-scale-sm:hover {
transform: scale(1.03);
}

/* Better keyboard focus visibility */
:focus-visible {
outline: 2px solid rgba(0, 123, 255, .6);
outline-offset: 2px;
}

/* ==============================
Specific Card Hover Enhancements
============================== */
/* Item product cards */
.product__card__card {
transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
will-change: transform, box-shadow;
background-color: #fff;
}
.product__card__card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 48px rgba(0,0,0,.16), 0 8px 18px rgba(0,0,0,.12);
}
.product__card__card .product__image > img {
transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.product__card__card:hover .product__image > img {
transform: none;
}
.product__card__card:hover .product__card__action {
background-color: #ffea8a; /* lighten of #ffe26e */
}

/* Featured/Category cards */
.category__card__card {
transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
will-change: transform, box-shadow;
}
.category__card__card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 48px rgba(0,0,0,.16), 0 8px 18px rgba(0,0,0,.12);
}
.category__card__card .category__image img,
.category__card__card .category__image > img {
transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.category__card__card:hover .category__image img,
.category__card__card:hover .category__image > img {
transform: none;
}
/* Lift the action button slightly if present */
.category__card__card:hover .MuiButton-root,
.category__card__card:hover .category__card__action__button {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,.12), 0 6px 12px rgba(0,0,0,.08);
}

/* Related product cards */
.related__product__card__container {
transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
will-change: transform, box-shadow;
background-color: #fff;
}
.related__product__card__container:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0,0,0,.15), 0 8px 18px rgba(0,0,0,.1);
}
.related__product__card__container .related__product__image > img {
transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.related__product__card__container:hover .related__product__image > img {
transform: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
90 changes: 89 additions & 1 deletion client/src/app/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { useState, useEffect } from "react";
import SnakeCursor from "../components/Cursor/SnakeCursor";

import Loader from "../components/Loader/loader.js";
import './App.css';
Expand Down Expand Up @@ -65,12 +66,98 @@ function App() {
}

return (
Cursor
<>
Cursor

<ThemeProvider>
main
<CartItemsProvider>
<WishItemsProvider>
<SearchProvider>
<Router>
<Header />
Cursor
<div className="app__container">
<SnakeCursor />
<Header />
<main className="app__content">
<Routes>
<Route index element={<Home />} />
<Route path="/account">
<Route path="me" element={<MyAccount />} />
<Route path="manage" element={<ManageAccount />} />
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="*" element={<Login />} />
</Route>
<Route path="/shop" element={<Shop />} />
<Route path="/category">
<Route path=":id" element={<CategoryView />} />
</Route>
<Route path="/item">
<Route path="/item/men">
<Route path=":id" element={<ItemView />} />
</Route>
<Route path="/item/women">
<Route path=":id" element={<ItemView />} />

<ThemeProvider>
<CartItemsProvider>
<WishItemsProvider>
<SearchProvider>
<Router>
<div className="app__container">
<Header />
<main className="app__content">
<Routes>
<Route index element={<Home />} />
<Route path="/account">
<Route path="me" element={<MyAccount />} />
<Route path="manage" element={<ManageAccount />} />
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="*" element={<Login />} />
main
</Route>
<Route path="/shop" element={<Shop />} />
<Route path="/category">
<Route path=":id" element={<CategoryView />} />
</Route>
<Route path="/item">
<Route path="/item/men">
<Route path=":id" element={<ItemView />} />
</Route>
<Route path="/item/women">
<Route path=":id" element={<ItemView />} />
</Route>
<Route path="/item/kids">
<Route path=":id" element={<ItemView />} />
</Route>
<Route path="/item/featured">
<Route path=":id" element={<ItemView />} />
</Route>
</Route>
<Route path="/wishlist" element={<Wishlist />} />
<Route path="/search/*" element={<SearchView />} />
<Route path="/terms" element={<TermsConditions />} />
<Route path="/privacy" element={<PrivacyPolicy />} />
<Route path="/faq" element={<FaqList />} />
<Route path="/accessibility" element={<AccessiblityPage />} />
<Route path="/shipping" element={<ShippingPage />} />
<Route path="/refund" element={<RefundPage />} />
<Route path="/admin" element={<Wishlist />} />
</Routes>
</main>
<Footer />
</div>
</Router>
</SearchProvider>
</WishItemsProvider>
</CartItemsProvider>
<Toaster />
</ThemeProvider>
</>
<Header />
<Routes>
<Route index element={<Home />} />
<Route path="/account">
Expand Down Expand Up @@ -111,6 +198,7 @@ function App() {
</CartItemsProvider>
<Toaster />
</ThemeProvider>
main
);
}

Expand Down
Loading