AI Review Center
Commit Review Workspace ?
Select a commit on the left to inspect quality, security, business value, findings, and suggested code changes.
Project AI Score
?
63%
Quality Avg
?
68%
Security Avg
?
45%
Reviews
?
56
Review Result ?
jattin01/avriti · 17339969
The commit introduces CSS styling for list dots and an offer banner slider with controls using React state and effects. The code uses reasonable React patterns and semantic HTML with aria attributes. However, there are duplicated image paths in the offerBanners array and some commented-out unused code remains, reducing clarity and code quality. The commit message is generic and uninformative.
Quality
?
70%
Security
?
80%
Business Value
?
60%
Maintainability
?
70%
Issues & Suggested Fixes
?
1AI detects the issue
2Shows file, line, or evidence
3Suggests the fix to apply
Uninformative Commit Message
Where
commit message
Issue / Evidence
uninformative commit message
Suggested Fix
provide a more descriptive commit message explaining the purpose and scope of the changes
Duplicate Logic
Where
app/page.tsx:42
Issue / Evidence
duplicate image paths in offerBanners array
Suggested Fix
replace duplicate entries with unique images or add comment explaining duplicate purpose
Commented Out Image Component Code
Where
app/services/page.tsx:74
Issue / Evidence
commented-out Image component code
Suggested Fix
remove unused commented code to improve code cleanliness
Improve Accessibility And Usability
Where
app/page.tsx:120
Issue / Evidence
improve accessibility and usability
Suggested Fix
consider pausing banner slider on user interaction or adding indicators for better UX
Code Change Preview · app/globals.css
?
Removed / Before Commit
- left: 0; - top: 9px; - } */ - ::selection { - background: var(--color-primary-100); - color: var(--color-primary-700);
Added / After Commit
+ left: 0; + top: 9px; + } */ + .withlistDots li:before { + content: ''; + position: absolute; + background: var(--color-primary-700); + width: 8px; + height: 8px; + border-radius: 50%; + left: 0; + top: 9px; + } + ::selection { + background: var(--color-primary-100); + color: var(--color-primary-700);
Removed / Before Commit
- "from-[#F4F0E8] to-[#EDE4DC]", - ]; - - export default function Home() { - const [home, setHome] = useState<HomeData | null>(null); - const [featuredProducts, setFeaturedProducts] = useState<FeaturedProduct[]>([]); - - useEffect(() => { - Promise.all([ - .catch(() => { }); - }, []); - - return ( - <div className="bg-white"> - <PdfBrowserFrame label="Website Home"> - </PdfBrowserFrame> - -
Added / After Commit
+ "from-[#F4F0E8] to-[#EDE4DC]", + ]; + + const offerBanners = ["/offerBanner1.png", "/offerBanner1.png", "/offerBanner1.png"]; + + export default function Home() { + const [home, setHome] = useState<HomeData | null>(null); + const [featuredProducts, setFeaturedProducts] = useState<FeaturedProduct[]>([]); + const [activeOfferIndex, setActiveOfferIndex] = useState(0); + + useEffect(() => { + Promise.all([ + .catch(() => { }); + }, []); + + useEffect(() => { + const intervalId = window.setInterval(() => { + setActiveOfferIndex((current) => (current + 1) % offerBanners.length);
Removed / Before Commit
- return ( - <div className="bg-white"> - <PdfBrowserFrame label="Website Services"> - <div className="px-6 pb-12 sm:px-10 lg:px-14"> - <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"> - </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 bg-black"> - <Image - src={serviceData?.s_image ?? "/logo.jpeg"} - alt="Avriti" - fill - sizes="180px" - className="object-contain p-5"
Added / After 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"> + </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" + fill + sizes="180px"
Removed / Before Commit
- const [open, setOpen] = useState(defaultOpen); - - return ( - <div - style={{ - borderBottom: "1px solid #ede8e1", - }} - > - <button - onClick={() => setOpen(!open)} - style={{ - height: "28px", - minWidth: "28px", - borderRadius: "50%", - background: open ? "#6b3f2a" : "#f3ede6", - display: "flex", - alignItems: "center", - justifyContent: "center",
Added / After Commit
+ const [open, setOpen] = useState(defaultOpen); + + return ( + <div className="border-b border-[#c5c9f1] last:border-b-0"> + <button + onClick={() => setOpen(!open)} + style={{ + height: "28px", + minWidth: "28px", + borderRadius: "50%", + background: open ? "#1a2ed4" : "#c5c9f1", + display: "flex", + alignItems: "center", + justifyContent: "center", + }} + > + <svg width="12" height="12" viewBox="0 0 12 12" fill="none"> + <line x1="6" y1="1" x2="6" y2="11" stroke={open ? "#fff" : "#1a2ed4"} strokeWidth="1.8" strokeLinecap="round" />
Removed / Before Commit
- {products.map((product) => ( - <div - key={product.slug} - className="min-w-0 shrink-0 basis-[calc((100%-48px)/3)] snap-start" - > - <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(33.333%-16px)]" + > + <ProductCard product={product} /> + </div>
Removed / Before Commit
- - {/* LEFT — Image */} - <div> - <div className="relative overflow-hidden border border-[#ffebdfde] rounded-[10px] p-[60px]"> - <img - src={imageUrl} - alt={product.title} - className="block mx-auto max-w-[60%]" - /> - </div> - {/* // Old: grid grid-cols-4 (no scroll, overflow on many images) */}
Added / After Commit
+ + {/* LEFT — Image */} + <div> + <div className="relative overflow-hidden border border-[#ffebdfde] rounded-[10px] p-[20px] md:p-[40px]"> + <img + src={imageUrl} + alt={product.title} + className="block mx-auto max-w-[40%]" + /> + </div> + {/* // Old: grid grid-cols-4 (no scroll, overflow on many images) */}