AI Review Center

Project

Showing AI reviews for avriti

Project AI Score ?

63%

Quality Avg ?

68%

Security Avg ?

45%

Reviews ?

Review Result ?

jattin01/avriti · 17a7ce7c

The commit primarily consists of many styling and layout changes across multiple frontend components, along with some minor logic related to auto-scrolling and navigation link activation. There is minimal indication of critical bug fixes or security improvements, and the commit message is vague. The risk of introducing bugs is moderate due to the many UI changes, and there is some technical debt from not detailing specific fixes. The security risk is low, but no explicit mitigation was observed. The business value is moderate given it improves user experience mostly.

Quality ?

60%

Security ?

30%

Business Value ?

50%

Maintainability ?

68%

Issues & Suggested Fixes ?

1AI detects the issue

2Shows file, line, or evidence

3Suggests the fix to apply

Lacks Detail

Where commit message

Issue / Evidence lacks detail

Suggested Fix provide specific description of issues fixed and improvements made to increase business and bug risk scores

Use Of Dangerouslysetinnerhtml

Where components/faq.tsx:76

Issue / Evidence use of dangerouslySetInnerHTML

Suggested Fix sanitize HTML input to mitigate XSS security risks

Auto Scrolling Timer Logic

Where components/service-slider.tsx:59-78

Issue / Evidence auto-scrolling timer logic

Suggested Fix add cleanup and edge case handling for null or undefined states to reduce bug risk

Add More Robust Error Handling For Handlea...

Where components/product-card.tsx:178

Issue / Evidence add more robust error handling for handleAdd function to reduce potential user-facing bugs

Suggested Fix Review and simplify this section.

Navigation Active Check

Where app/site-header.tsx:40-41

Issue / Evidence navigation active check

Suggested Fix add unit tests to verify fallback cases and path matching logic to improve quality and bug risk

Address Rendering

Where components/customer-addresses.tsx:149-151

Issue / Evidence address rendering

Suggested Fix consider adding null checks or field validation to improve robustness

Autofill Styling

Where app/globals.css:63-68

Issue / Evidence autofill styling

Suggested Fix ensure cross-browser compatibility and fallback styles for safety

Security Issue

Where components/faq.tsx:76

Issue / Evidence replace dangerouslySetInnerHTML usage where possible with safer rendering methods to improve security score

Suggested Fix Review and simplify this section.

Code Change Preview · app/about/page.tsx ?

Removed / Before Commit

- <img
- src={s1?.image ?? "/banner.png"}
- alt="Avriti"
-               className="object-contain md:w-[60%] mx-auto"
- />
- </div>
- <div>
- {s1?.sub_heading && (
- <h3 className="uppercase font-bold tracking-wide">{s1.sub_heading}</h3>
- )}
- {s1?.heading && (
-               <h2 className="text-[32px] md:text-[50px] font-semibold text-[var(--color-primary-700)] font-serif italic">
- {s1.heading}
- </h2>
- )}
- <div className="grid md:grid-cols-2 gap-8">
- <div className="order-2 md:order-1">
- {s2?.heading && (

Added / After Commit

+ <img
+ src={s1?.image ?? "/banner.png"}
+ alt="Avriti"
+               className="object-contain lg:w-[60%] mx-auto"
+ />
+ </div>
+ <div>
+ {s1?.sub_heading && (
+ <h3 className="uppercase font-bold tracking-wide">{s1.sub_heading}</h3>
+ )}
+ {s1?.heading && (
+               <h2 className="text-[32px] leading-[1.2] md:text-[50px] font-semibold text-[var(--color-primary-700)] font-serif italic">
+ {s1.heading}
+ </h2>
+ )}
+ <div className="grid md:grid-cols-2 gap-8">
+ <div className="order-2 md:order-1">
+ {s2?.heading && (

Removed / Before Commit

- <div className="bg-white">
- <div className="overflow-hidden rounded-[12px] border border-[#E3E1DC] bg-white shadow-[0_2px_12px_rgba(0,0,0,0.04)]">
- {/* Header */}
-                   <div className="hidden grid-cols-[minmax(300px,1fr)_120px_150px_120px] items-center bg-[var(--color-primary-700)] px-5 py-4 text-[11px] font-bold uppercase tracking-[0.12em] text-white md:grid">
- <p>Product</p>
- <p className="text-center">Price</p>
- <p className="text-center">Quantity</p>
- className="flex h-6 w-6 items-center justify-center rounded-full bg-[var(--color-primary-700)] text-[14px] font-bold leading-none text-white cursor-pointer"
- aria-label="Remove item"
- >
-                           &times;
- </button>
- <div className="flex h-16 w-16 items-center justify-center overflow-hidden rounded-[8px] border border-[#E3E1DC] bg-[#F7F5F2]">
- <img src={item.thumbnail} alt={item.title} className="h-full w-full object-contain p-1" />
- </div>
- <div>
- <div className="flex items-center gap-2">
-                             <p className="text-[15px] font-semibold leading-5 text-[#0F172A]">{item.title}</p>

Added / After Commit

+ <div className="bg-white">
+ <div className="overflow-hidden rounded-[12px] border border-[#E3E1DC] bg-white shadow-[0_2px_12px_rgba(0,0,0,0.04)]">
+ {/* Header */}
+                   <div className="hidden grid-cols-[minmax(300px,1fr)_120px_150px_120px] items-center bg-[var(--color-primary-700)] px-5 py-4 font-bold uppercase tracking-[0.12em] text-white md:grid text-[14px]">
+ <p>Product</p>
+ <p className="text-center">Price</p>
+ <p className="text-center">Quantity</p>
+ className="flex h-6 w-6 items-center justify-center rounded-full bg-[var(--color-primary-700)] text-[14px] font-bold leading-none text-white cursor-pointer"
+ aria-label="Remove item"
+ >
+                           <span className="mt-[-1px]">&times;</span>
+ </button>
+ <div className="flex h-16 w-16 items-center justify-center overflow-hidden rounded-[8px] border border-[#E3E1DC] bg-[#F7F5F2]">
+ <img src={item.thumbnail} alt={item.title} className="h-full w-full object-contain p-1" />
+ </div>
+ <div>
+ <div className="flex items-center gap-2">
+                             <p className="text-[14px] font-medium leading-[1.2] mb-[2px] leading-5 text-[#0F172A]">{item.title}</p>

Removed / Before Commit

- { title: "Book a Consultation", desc: "Ready to book a session but not sure which one? Let's talk through it." },
- { title: "Collaborate with Avriti", desc: "Interested in partnering, wholesale, or collaboration? We'd love to explore it together." },
- ].map((item) => (
-               <div key={item.title} className="bg-[#F7F7F7] rounded-[20px] p-[20px] overflow-hidden">
-                 <img src="/HeadIcon.png" alt="Avriti" className="w-[50px] mx-auto mb-[20px]" />
- <h4 className="text-center text-[20px] font-serif italic font-semibold text-[var(--color-primary-700)]">{item.title}</h4>
- <p className="text-center text-[14px] mt-[10px] text-sm leading-7 text-[#6f6f6f] sm:text-base">{item.desc}</p>
- </div>

Added / After Commit

+ { title: "Book a Consultation", desc: "Ready to book a session but not sure which one? Let's talk through it." },
+ { title: "Collaborate with Avriti", desc: "Interested in partnering, wholesale, or collaboration? We'd love to explore it together." },
+ ].map((item) => (
+               <div key={item.title} className="bg-[#F7F7F7] rounded-[20px] p-[20px] overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-2 hover:bg-[#f0f0f0] cursor-pointer">
+                 <img src="/HeadIcon.png" alt="Avriti" className="w-[50px] mx-auto mb-[20px] transition-transform duration-300 hover:scale-110" />
+ <h4 className="text-center text-[20px] font-serif italic font-semibold text-[var(--color-primary-700)]">{item.title}</h4>
+ <p className="text-center text-[14px] mt-[10px] text-sm leading-7 text-[#6f6f6f] sm:text-base">{item.desc}</p>
+ </div>

Removed / Before Commit

- left: 0;
- top: 9px;
- } 
- ::selection {
- background: var(--color-primary-100);
- color: var(--color-primary-700);
- .addtocartButton:hover span.buttonArrow::before {
- background: #0B3DBA;
- }
-   @media only screen and (max-width: 767px) {
- li, p {
-     font-size: 14px;
- }
- }
- \ No newline at end of file

Added / After Commit

+ left: 0;
+ top: 9px;
+ } 
+ input:-webkit-autofill,
+ input:-webkit-autofill:focus {
+     -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+     background-color: transparent !important;
+     transition: background-color 5000s ease-in-out 0s;
+ }
+ ::selection {
+ background: var(--color-primary-100);
+ color: var(--color-primary-700);
+ .addtocartButton:hover span.buttonArrow::before {
+ background: #0B3DBA;
+ }
+ button.hoverBtn:hover span.buttonArrow:before {
+     background: #fff;
+ }

Removed / Before Commit

- import { Suspense, useEffect, useState } from "react";
- import { useSearchParams } from "next/navigation";
- import Image from "next/image";
- import { ChevronDown, CreditCard, Home, MapPin, Phone, User } from "lucide-react";
- import InnerBanner from "@/components/inner-banner";
- 
- interface OrderItem {
- 
- <div className="grid gap-3 p-4 sm:grid-cols-2 lg:grid-cols-4 lg:p-6">
- {orderMeta.map((item) => (
- <div
- key={item.label}
-                 className={`rounded-full px-5 py-3 text-center text-[13px] shadow-[0_3px_12px_rgba(38,24,15,0.12)] ${item.className}`}
-               >
- <span className="text-[#253024]">{item.label}: </span>
- {item.value}
-               </div>
- ))}

Added / After Commit

+ import { Suspense, useEffect, useState } from "react";
+ import { useSearchParams } from "next/navigation";
+ import Image from "next/image";
+ import { ChevronDown, CreditCard, Home, MapPin, Phone, User , Hash  } from "lucide-react";
+ import InnerBanner from "@/components/inner-banner";
+ 
+ interface OrderItem {
+ 
+ <div className="grid gap-3 p-4 sm:grid-cols-2 lg:grid-cols-4 lg:p-6">
+ {orderMeta.map((item) => (
+               
+ <div
+ key={item.label}
+                 className={`flex items-center justify-center px-5 py-3 h-full rounded-full  text-center text-[14px] shadow-[0_3px_12px_rgba(38,24,15,0.12)] ${item.className}`}
+               ><div>
+ <span className="text-[#253024]">{item.label}: </span>
+ {item.value}
+               </div></div>

Removed / Before Commit

- 
- </div>  
- 
-             <ul className="flex gap-2 md:gap-6 mt-[20px] sm:mt-[80px]">
- <li className="bg-[#F7F7F7] p-[15px] lg:px-[40px] lg:py-[20px] rounded-[20px] flex items-center">
- <img src="/1.jpeg" alt="product" className="object-contain" />
- </li>
- 
- <section className=" my-[50px] md:my-[80px]">
- <div className="mx-auto  max-w-7xl px-4 sm:px-6 lg:px-8">
-           <div className="grid md:grid-cols-2 gap-[100px] items-center">
- <div className="relative overflow-visible">
- <div className="relative overflow-hidden rounded-[24px] bg-[#F3F5F9] p-8 shadow-lg">
- 
- 
- 
- {/* Shop Section  */}
-       <div className="px-4 sm:px-6 lg:px-8 w-full my-[50px] md:my-[80px] mx-auto max-w-7xl">

Added / After Commit

+ 
+ </div>  
+ 
+             <ul className="grid grid-cols-3 gap-2 md:gap-6 mt-[20px] sm:mt-[80px]">
+ <li className="bg-[#F7F7F7] p-[15px] lg:px-[40px] lg:py-[20px] rounded-[20px] flex items-center">
+ <img src="/1.jpeg" alt="product" className="object-contain" />
+ </li>
+ 
+ <section className=" my-[50px] md:my-[80px]">
+ <div className="mx-auto  max-w-7xl px-4 sm:px-6 lg:px-8">
+           <div className="grid md:grid-cols-2 gap-[40px] lg:gap-[100px] items-center">
+ <div className="relative overflow-visible">
+ <div className="relative overflow-hidden rounded-[24px] bg-[#F3F5F9] p-8 shadow-lg">
+ 
+ 
+ 
+ {/* Shop Section  */}
+       <div className="px-4 sm:px-6 lg:px-8 w-full mx-auto max-w-7xl">

Removed / Before Commit

- 
- function InfoRow({ label, value }: InfoRowProps) {
- return (
-     <div className="flex items-center justify-between py-3 border-b border-[#F0EDE9] last:border-0">
-       <span className="text-sm text-[#9E9890]">{label}</span>
- <span className="text-sm font-medium text-[#1A1714]">{value}</span>
- </div>
- );
- 
- return (
- <div className="min-h-screen bg-[#F4F1EE]">
-       <div className="mx-auto grid max-w-7xl gap-8 px-4 py-14 sm:px-6 grid md:grid-cols-[220px_1fr] gap-5 items-start">
- 
- {/* Sidebar */}
-         <div className="bg-[var(--color-primary-700)] rounded-2xl p-5 md:sticky top-24  h-70 ">
- <div className="flex flex-col items-center text-center mb-7 ">
- <div className="relative">
- <div

Added / After Commit

+ 
+ function InfoRow({ label, value }: InfoRowProps) {
+ return (
+     <div className="group flex items-center justify-between py-3 border-b border-[#F0EDE9] last:border-0">
+       <span className="text-sm text-[#9E9890] group-hover:text-[#000]">{label}</span>
+ <span className="text-sm font-medium text-[#1A1714]">{value}</span>
+ </div>
+ );
+ 
+ return (
+ <div className="min-h-screen bg-[#F4F1EE]">
+       <div className="mx-auto grid max-w-7xl gap-8 px-4 py-8 md:py-14 sm:px-6 grid md:grid-cols-[220px_1fr] gap-5 items-start">
+ 
+ {/* Sidebar */}
+         <div className="bg-[var(--color-primary-700)] group rounded-2xl p-5 md:sticky top-24  h-70 ">
+ <div className="flex flex-col items-center text-center mb-7 ">
+ <div className="relative">
+ <div

Removed / Before Commit

- return (
- <div className="bg-white">
- <PdfBrowserFrame label="Website Services">
-         <div className="pb-12">
-           <div className="grid gap-10 lg:grid-cols-[0.75fr_1fr]">
- <div className="flex flex-col justify-center">
- <h1 className="text-4xl font-semibold leading-tight text-[var(--color-primary-700)] sm:text-5xl">
- {serviceData?.s_heading || "Every Answer Already Lives in You"}
- )}
- </div>
- 
-             <div className="relative min-h-[360px]">
-                <div className="absolute left-1/2 top-1/2 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full border border-[var(--color-primary-100)]" />
-               <div className="absolute left-1/2 top-1/2 h-44 w-44 -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-md flex items-center justify-center">
- 
-                {/*   <Image
- src={serviceData?.s_image ?? "/logoService.png"}
- alt="Avriti"

Added / After Commit

+ return (
+ <div className="bg-white">
+ <PdfBrowserFrame label="Website Services">
+         <div className="pb-12 md:pt-[50px] pt-[20px]">
+           <div className="grid gap-10 lg:grid-cols-[0.75fr_1fr] items-center">
+ <div className="flex flex-col justify-center">
+ <h1 className="text-4xl font-semibold leading-tight text-[var(--color-primary-700)] sm:text-5xl">
+ {serviceData?.s_heading || "Every Answer Already Lives in You"}
+ )}
+ </div>
+ 
+             <div className="relative">
+ 
+               <div className="m-auto rounded-full border border-[var(--color-primary-100)] h-72 w-72  overflow-hidden flex items-center justify-center">
+                
+                   <Image
+ src={serviceData?.s_image ?? "/logoService.png"}
+ alt="Avriti"

Removed / Before Commit

- return (
- <div className="bg-white">
- <section className="brand-gradient">
-         <div className="mx-auto max-w-7xl py-18">
- <div className="px-[20px]">
-             <h1 className="text-center text-[30px] font-semibold uppercase text-[var(--color-primary-700)] md:text-[40px]">
- Something here is yours.
- </h1>
- <p className="text-center max-w-[800px] mx-auto mt-[10px] text-[14px]">
- <div key={product.id} className="bg-[#F7F7F7] rounded-[20px] p-[20px] overflow-hidden">
- <Link href={`/shop/${product.slug}`} className="group">
- <div className="mt-1 mb-[10px] flex gap-2 items-center justify-between">
-                         <p className="text-sm font-normal leading-5 text-[#777777]">
- {product.title}
- {attr1 && `- ${attr1.value}${product.variant?.name ? ` ${product.variant.name}` : ''}`}
- </p>
- type="button"
- onClick={(event) => handleAddToCart(event, product, image ?? "", attr1)}

Added / After Commit

+ return (
+ <div className="bg-white">
+ <section className="brand-gradient">
+         <div className="mx-auto max-w-7xl py-[30px] md:py-18">
+ <div className="px-[20px]">
+             <h1 className="leading-[1.2] text-center text-[30px] font-semibold uppercase text-[var(--color-primary-700)] md:text-[40px]">
+ Something here is yours.
+ </h1>
+ <p className="text-center max-w-[800px] mx-auto mt-[10px] text-[14px]">
+ <div key={product.id} className="bg-[#F7F7F7] rounded-[20px] p-[20px] overflow-hidden">
+ <Link href={`/shop/${product.slug}`} className="group">
+ <div className="mt-1 mb-[10px] flex gap-2 items-center justify-between">
+                         <p className="text-[14px] leading-[1.3] font-normal leading-5 text-[#777777]">
+ {product.title}
+ {attr1 && `- ${attr1.value}${product.variant?.name ? ` ${product.variant.name}` : ''}`}
+ </p>
+ type="button"
+ onClick={(event) => handleAddToCart(event, product, image ?? "", attr1)}

Removed / Before Commit

- </button>
- </div>
- </div>
-             <div className="flex items-center justify-between py-3 border-b border-[#F0EDE9]"><span className="text-sm text-[#9E9890]">Name</span><span className="text-sm font-medium text-[#1A1714]">{addr.full_name}</span></div>
-             <div className="flex items-center justify-between py-3 border-b border-[#F0EDE9]"><span className="text-sm text-[#9E9890]">Phone</span><span className="text-sm font-medium text-[#1A1714]">{addr.phone}</span></div>
-             <div className="flex items-center justify-between py-3"><span className="text-sm text-[#9E9890]">Address</span><span className="text-sm font-medium text-[#1A1714]">{addr.address_line1}, {addr.city}, {addr.state} - {addr.pincode}</span></div>
- </div>
- ) : (
- <div key={addr.id} className="relative rounded-[12px] border border-[#E3E1DC] bg-white p-4 transition">
- 
- {showModal && (
- <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
-           <div className="w-full max-w-lg bg-white rounded-[16px] p-6 shadow-xl max-h-[90vh] overflow-y-auto">
- <div className="flex items-center justify-between mb-5">
- <h3 className="text-[16px] font-semibold text-[#0F172A]">{editId ? "Edit Address" : "Add New Address"}</h3>
- <button onClick={() => setShowModal(false)} className="text-gray-400 hover:text-gray-700 text-xl leading-none cursor-pointer">&times;</button>

Added / After Commit

+ </button>
+ </div>
+ </div>
+             <div className="group grid grid-cols-[40%_60%]  items-center justify-between py-3 border-b border-[#F0EDE9]"><span className="text-sm text-[#9E9890] group-hover:text-[#000]">Name</span><span className="text-sm text-right font-medium text-[#1A1714]">{addr.full_name}</span></div>
+             <div className="group grid grid-cols-[40%_60%] items-center justify-between py-3 border-b border-[#F0EDE9]"><span className="text-sm text-[#9E9890] group-hover:text-[#000]">Phone</span><span className="text-sm text-right font-medium text-[#1A1714]">{addr.phone}</span></div>
+             <div className="group grid grid-cols-[40%_60%] items-center justify-between py-3"><span className="text-sm text-[#9E9890] group-hover:text-[#000]">Address</span><span className="text-sm break-all text-right font-medium text-[#1A1714]">{addr.address_line1}, {addr.city}, {addr.state} - {addr.pincode}</span></div>
+ </div>
+ ) : (
+ <div key={addr.id} className="relative rounded-[12px] border border-[#E3E1DC] bg-white p-4 transition">
+ 
+ {showModal && (
+ <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
+           <div className="w-full max-w-lg bg-white rounded-[16px] p-6 shadow-xl max-h-[80vh] overflow-y-auto">
+ <div className="flex items-center justify-between mb-5">
+ <h3 className="text-[16px] font-semibold text-[#0F172A]">{editId ? "Edit Address" : "Add New Address"}</h3>
+ <button onClick={() => setShowModal(false)} className="text-gray-400 hover:text-gray-700 text-xl leading-none cursor-pointer">&times;</button>

Removed / Before Commit

- 
- import { useState, useEffect } from "react";
- import { Plus, Minus } from "lucide-react";
- 
- type FaqItem = {
- id: number;
- <span className="text-[16px] text-[var(--color-text-primary)] group-hover:text-[var(--color-primary-700)] transition-colors">
- {faq.question}
- </span>
-                 <span className="w-8 h-8 rounded-full border border-[var(--color-primary-700)] text-[var(--color-primary-700)] flex items-center justify-center flex-shrink-0 transition-all">
- {openId === faq.id ? <Minus size={14} /> : <Plus size={14} />}
-                 </span>
- </button>
-               {openId === faq.id && (
-                 <p
-                   className="text-sm text-[var(--color-text-secondary)] leading-relaxed pb-6"
-                   dangerouslySetInnerHTML={{ __html: faq.answer }}
-                 />

Added / After Commit

+ 
+ import { useState, useEffect } from "react";
+ import { Plus, Minus } from "lucide-react";
+ import { motion, AnimatePresence } from "framer-motion";
+ 
+ type FaqItem = {
+ id: number;
+ <span className="text-[16px] text-[var(--color-text-primary)] group-hover:text-[var(--color-primary-700)] transition-colors">
+ {faq.question}
+ </span>
+                 <motion.span 
+                   className="w-8 h-8 rounded-full border border-[var(--color-primary-700)] text-[var(--color-primary-700)] flex items-center justify-center flex-shrink-0"
+                   animate={{ rotate: openId === faq.id ? 180 : 0 }}
+                   transition={{ duration: 0.3 }}
+                 >
+ {openId === faq.id ? <Minus size={14} /> : <Plus size={14} />}
+                 </motion.span>
+ </button>

Removed / Before Commit

- <Card className="overflow-hidden p-6 mb-4 md:flex items-center justify-between gap-6">
- <Link href={`/my-order?id=${order.id}`} className="sm:flex-row flex-col flex items-start gap-6 flex-1 cursor-pointer">
- {/* Logo/Image */}
-         <div className="flex-shrink-0 w-24 h-24 rounded-lg flex items-center justify-center border border-gray-200 overflow-hidden">
- <img
- src={order.productImage || "/1.jpeg"}
- alt={order.productName || order.shopName || "Order"}

Added / After Commit

+ <Card className="overflow-hidden p-6 mb-4 md:flex items-center justify-between gap-6">
+ <Link href={`/my-order?id=${order.id}`} className="sm:flex-row flex-col flex items-start gap-6 flex-1 cursor-pointer">
+ {/* Logo/Image */}
+         <div className="flex-shrink-0 p-2 w-24 h-24 rounded-lg flex items-center justify-center border border-gray-200 overflow-hidden">
+ <img
+ src={order.productImage || "/1.jpeg"}
+ alt={order.productName || order.shopName || "Order"}

Removed / Before Commit

- 
- return (
- <Card className="overflow-hidden relative">
-       <Link href={product.isCombo ? `/combo/${product.slug}` : `/shop/${product.slug}`} className="block h-full flex flex-col justify-between">
- <div className="mt-2 mb-[20px] flex gap-2 items-center justify-between">
-           <h3 className="text-lg text-[var(--textcolor)] font-normal">
- {product.name}
- {product.attrValue ? ` - ${product.attrValue}${product.variantName ? ` ${product.variantName}` : ''}` : ''}
- </h3>
- </div>
- </div>
- 
-         <div className={`relative h-[400px] ${product.tone}`}>
- <img
- src={product.image}
- alt={product.name}
-             className="w-full h-full object-contain mix-blend-multiply"
- />

Added / After Commit

+ 
+ return (
+ <Card className="overflow-hidden relative">
+       <Link href={product.isCombo ? `/combo/${product.slug}` : `/shop/${product.slug}`} className="block h-full flex flex-col justify-between group">
+ <div className="mt-2 mb-[20px] flex gap-2 items-center justify-between">
+           <h3 className="text-[14px] leading-[1.3] text-[var(--textcolor)] font-normal">
+ {product.name}
+ {product.attrValue ? ` - ${product.attrValue}${product.variantName ? ` ${product.variantName}` : ''}` : ''}
+ </h3>
+ </div>
+ </div>
+ 
+         <div className={`relative ${product.tone}`}>
+ <img
+ src={product.image}
+ alt={product.name}
+             className="max-w-[70%] mx-auto h-[240px] object-contain transition duration-300 group-hover:scale-105 w-full  object-contain mix-blend-multiply"
+ />

Removed / Before Commit

- {products.map((product) => (
- <div
- key={product.slug}
-             className="min-w-0 shrink-0 basis-full snap-start md:basis-[calc(50%-12px)] lg:basis-[calc(33.333%-16px)]"
- >
- <ProductCard product={product} />
- </div>

Added / After Commit

+ {products.map((product) => (
+ <div
+ key={product.slug}
+             className="min-w-0 shrink-0 basis-full snap-start md:basis-[calc(50%-12px)] lg:basis-[calc(25%-16px)]"
+ >
+ <ProductCard product={product} />
+ </div>

Removed / Before Commit

- const [canScroll, setCanScroll] = useState(false);
- const [atStart, setAtStart] = useState(true);
- const [atEnd, setAtEnd] = useState(false);
- 
- const updateSliderState = useCallback(() => {
- const track = trackRef.current;
- };
- }, [updateSliderState]);
- 
- const scrollToSlide = (index: number) => {
- const track = trackRef.current;
- const slide = track?.children[index] as HTMLElement | undefined;
- 
- block: "nearest",
- inline: "start",
- });
- };
-

Added / After Commit

+ const [canScroll, setCanScroll] = useState(false);
+ const [atStart, setAtStart] = useState(true);
+ const [atEnd, setAtEnd] = useState(false);
+   const autoScrollTimerRef = useRef<NodeJS.Timeout | null>(null);
+   const [isAutoScrolling, setIsAutoScrolling] = useState(true);
+ 
+ const updateSliderState = useCallback(() => {
+ const track = trackRef.current;
+ };
+ }, [updateSliderState]);
+ 
+   // Auto-scroll effect
+   useEffect(() => {
+     if (!isAutoScrolling || !canScroll) {
+       return;
+     }
+ 
+     const startAutoScroll = () => {

Removed / Before Commit

- <div className="grid grid-cols-2 gap-6 text-sm">
- <div className="space-y-3">
- <p className="font-semibold">Explore</p>
-             <Link className="block text-[var(--color-text-secondary)]" href="/shop">
- Shop
- </Link>
-             <Link className="block text-[var(--color-text-secondary)]" href="/services">
- Services
- </Link>
-             <Link className="block text-[var(--color-text-secondary)]" href="/about">
- About
- </Link>
- </div>
- <div className="space-y-3">
- <p className="font-semibold">Support</p>
-             <Link className="block text-[var(--color-text-secondary)]" href="/contact">
- Contact
- </Link>

Added / After Commit

+ <div className="grid grid-cols-2 gap-6 text-sm">
+ <div className="space-y-3">
+ <p className="font-semibold">Explore</p>
+             <Link className="block hover:text-[var(--color-primary-700)] text-[var(--color-text-secondary)]" href="/shop">
+ Shop
+ </Link>
+             <Link className="block hover:text-[var(--color-primary-700)] text-[var(--color-text-secondary)]" href="/services">
+ Services
+ </Link>
+             <Link className="block hover:text-[var(--color-primary-700)] text-[var(--color-text-secondary)]" href="/about">
+ About
+ </Link>
+ </div>
+ <div className="space-y-3">
+ <p className="font-semibold">Support</p>
+             <Link className="block hover:text-[var(--color-primary-700)] text-[var(--color-text-secondary)]" href="/contact">
+ Contact
+ </Link>

Removed / Before Commit

- 
- import Image from "next/image";
- import Link from "next/link";
- import { Menu, X } from "lucide-react";
- import { useState, useEffect, useRef } from "react";
- import { CartButton } from "@/components/ui/cart-button";
- const navItems = [...leftNav, ...rightNav];
- 
- export function SiteHeader() {
- const [open, setOpen] = useState(false);
- const [user, setUser] = useState<{ name?: string; email?: string } | null>(null);
- const [acctOpen, setAcctOpen] = useState(false);
- const [shareToast, setShareToast] = useState(false);
- const accountMenuRef = useRef<HTMLDivElement>(null);
- 
- useEffect(() => {
- try {
- const raw = localStorage.getItem("avriti_customer") || localStorage.getItem("avriti_user");

Added / After Commit

+ 
+ import Image from "next/image";
+ import Link from "next/link";
+ import { usePathname } from "next/navigation";
+ import { Menu, X } from "lucide-react";
+ import { useState, useEffect, useRef } from "react";
+ import { CartButton } from "@/components/ui/cart-button";
+ const navItems = [...leftNav, ...rightNav];
+ 
+ export function SiteHeader() {
+   const pathname = usePathname();
+ const [open, setOpen] = useState(false);
+ const [user, setUser] = useState<{ name?: string; email?: string } | null>(null);
+ const [acctOpen, setAcctOpen] = useState(false);
+ const [shareToast, setShareToast] = useState(false);
+ const accountMenuRef = useRef<HTMLDivElement>(null);
+ 
+   const isActive = (href: string) => {

Removed / Before Commit

- <>
- <button
- type="button"
- aria-label="Previous testimonial"
- onClick={() => moveSlide("previous")}
- disabled={atStart}
-             className="absolute left-0 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--color-primary-300)] bg-white text-[var(--color-primary-700)] shadow-[var(--shadow-soft)] transition hover:bg-[var(--color-primary-100)]/35 disabled:pointer-events-none disabled:opacity-35 md:inline-flex"
- >
- <ChevronLeft size={20} aria-hidden="true" />
- </button>
- <button
- type="button"
- aria-label="Next testimonial"
- onClick={() => moveSlide("next")}
- disabled={atEnd}
- </button>
- </>
- ) : null}

Added / After Commit

+ <>
+ <button
+ type="button"
+             style={{ transform: "translateY(-50%)" }}
+ aria-label="Previous testimonial"
+ onClick={() => moveSlide("previous")}
+ disabled={atStart}
+             className="absolute left-[0] top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--color-primary-300)] bg-white text-[var(--color-primary-700)] shadow-[var(--shadow-soft)] transition hover:bg-[var(--color-primary-100)]/35 disabled:pointer-events-none disabled:opacity-35 md:flex"
+ >
+ <ChevronLeft size={20} aria-hidden="true" />
+ </button>
+ <button
+ type="button"
+             style={{ transform: "translateY(-50%)" }}
+ aria-label="Next testimonial"
+ onClick={() => moveSlide("next")}
+ disabled={atEnd}
+ </button>

Removed / Before Commit

- return (
- <Link
- href="https://wa.me/917411794355"
-       className="fixed bottom-5 right-5 z-50 inline-flex h-14 w-14 items-center justify-center rounded-full bg-[#25D366] text-white shadow-[var(--shadow-soft)] transition hover:bg-[var(--color-primary-600)]"
- aria-label="Message Avriti on WhatsApp"
- >
- <Image

Added / After Commit

+ return (
+ <Link
+ href="https://wa.me/917411794355"
+       className="fixed bottom-3 right-3 md:bottom-5 md:right-5 z-50 inline-flex h-8 w-8 md:h-10 md:w-10 items-center justify-center rounded-full bg-[#25D366] text-white shadow-[var(--shadow-soft)] transition hover:bg-[var(--color-primary-600)]"
+ aria-label="Message Avriti on WhatsApp"
+ >
+ <Image