AI Review Center

Project

Showing AI reviews for avriti

Project AI Score ?

63%

Quality Avg ?

68%

Security Avg ?

45%

Reviews ?

Review Result ?

jattin01/avriti · ff940e0a

This commit adds homepage layout and styling, including fonts, colors, components for products, services, and FAQ sections. It enhances the user interface and content relating to the brand Avriti, driving user engagement and potential sales. The commit imports fonts multiple times redundantly and lacks alt text best practices for images in some cases, and does not address security aspects beyond frontend styling.

Quality ?

80%

Security ?

30%

Business Value ?

85%

Maintainability ?

85%

Issues & Suggested Fixes ?

1AI detects the issue

2Shows file, line, or evidence

3Suggests the fix to apply

Optimization

Where app/globals.css:1-3

Issue / Evidence optimization

Suggested Fix remove duplicate font import statements to avoid redundant network requests and improve load performance

Accessibility

Where app/page.tsx:86,89,92

Issue / Evidence accessibility

Suggested Fix add meaningful alt text describing the product images for screen readers instead of generic 'product'

Code Organization

Where app/page.tsx:6-10

Issue / Evidence code organization

Suggested Fix add missing import statement for Button component to clarify component origin and avoid potential runtime errors

Code Clarity

Where app/page.tsx:62-150

Issue / Evidence code clarity

Suggested Fix consider splitting large JSX markup into smaller reusable components for maintainability and readability

Clarity

Where commit message

Issue / Evidence clarity

Suggested Fix improve commit message with more descriptive detail about the homepage implementation to enhance traceability and context

Code Change Preview · app/globals.css ?

Removed / Before Commit

- @import "tailwindcss";
- 
- :root {
- --background: #ffffff;
- --foreground: #2c2c2a;
-   --font-sans: "Basic Sans", "Inter", Arial, sans-serif;
-   --font-support: "Rubik", "Inter", Arial, sans-serif;
-   --font-serif: "Crimson Pro", Georgia, serif;
- 
-   --color-primary-700: #0c3ebb;
- --color-primary-600: #3b58db;
- --color-primary-300: #93a3f0;
- --color-primary-100: #c5ccf0;
- --shadow-soft: 0 8px 24px rgba(12, 62, 187, 0.08);
- }
- 
- @theme inline {
-   --color-background: var(--background);

Added / After Commit

+ @import url('https://fonts.googleapis.com/css2?family=Basic&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap');
+ @import url('https://fonts.googleapis.com/css2?family=Basic&display=swap');
+ @import url('https://fonts.googleapis.com/css2?family=Basic&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
+ @import "tailwindcss";
+ 
+ :root {
+ --background: #ffffff;
+ --foreground: #2c2c2a;
+   --textcolor: #848482;
+   --font-sans: "Basic", sans-serif;
+   --font-serif: "Crimson Pro", serif;
+   --font-dm:"DM Sans", sans-serif;
+   --color-primary-700: #0B3DBA;
+ --color-primary-600: #3b58db;
+ --color-primary-300: #93a3f0;
+ --color-primary-100: #c5ccf0;
+ --shadow-soft: 0 8px 24px rgba(12, 62, 187, 0.08);
+ }

Removed / Before Commit

- }>) {
- return (
- <html lang="en" className="h-full antialiased">
-       <body className="flex min-h-full flex-col bg-white text-[var(--color-text-primary)]">
- <SiteHeader />
- <main className="flex-1">{children}</main>
- <SiteFooter />

Added / After Commit

+ }>) {
+ return (
+ <html lang="en" className="h-full antialiased">
+       
+       <body className="flex min-h-full flex-col bg-white text-[var(--color-text-primary)] font-sans">
+ <SiteHeader />
+ <main className="flex-1">{children}</main>
+ <SiteFooter />

Removed / Before Commit

- import { ArrowRight } from "lucide-react";
- import { PdfBrowserFrame } from "@/components/pdf-browser-frame";
- import { Button } from "@/components/ui/button";
- 
- export default function Home() {
- return (
- <div className="bg-white">
- <PdfBrowserFrame label="Website Home">
-         <div className="relative grid min-h-[650px] overflow-hidden px-6 pb-10 pt-4 sm:px-10 lg:grid-cols-[0.95fr_1.05fr] lg:px-14">
-           <div className="pointer-events-none absolute right-[-10%] top-[-8%] h-[520px] w-[520px] rounded-full bg-[radial-gradient(circle,rgba(12,62,187,0.13),transparent_62%)]" />
-           <div className="relative z-10 flex flex-col justify-center py-8">
-             <p className="max-w-[620px] text-5xl font-semibold leading-[0.98] text-[#e0e0e0] sm:text-6xl lg:text-[76px]">
- Ancient Wisdom.
- <br />
- Modern Seekers.
- </p>
-             <h1 className="mt-6 max-w-xl text-xl font-semibold leading-snug text-[var(--color-primary-700)] sm:text-2xl">
- You Were Born With a Map. We Help You Read It.

Added / After Commit

+ import { ArrowRight } from "lucide-react";
+ import { PdfBrowserFrame } from "@/components/pdf-browser-frame";
+ import { Button } from "@/components/ui/button";
+ import { ProductCard } from "@/components/product-card";
+ import { ServiceCard } from "@/components/service-card";
+ import { services } from "@/lib/data";
+ import { FAQ } from "@/components/faq";
+ 
+ 
+ const products = [
+   {
+     slug: "shuddhi-mopping-salt",
+     name: "Avriti Shuddhi - Mopping Salt - 1kg",
+     price: 299,
+     image: "/product2.jpeg",
+     tone: "from-[#E8EDFB] to-[#D0D9F7]",
+   },  
+   {

Removed / Before Commit

- \ No newline at end of file

Added / After Commit

+ "use client";
+ 
+ import { useState } from "react";
+ import { Plus, Minus } from "lucide-react";
+ 
+ const faqs = [
+   {
+     id: 1,
+     question: "What is Avriti and what does it mean?",
+     answer:
+       "Avriti means 'return' — a homecoming to the self. It is a spiritual wellness brand rooted in Vedic wisdom, offering services in Numerology, Vedic Astrology, Tarot, and Vastu Shastra, alongside sacred products designed to bring clarity and alignment to your life.",
+   },
+   {
+     id: 2,
+     question: "How do I book a consultation?",
+     answer:
+       "Simply click on 'Book Consultation,' choose your preferred type (Audio, Video, or Physical), select a date and time, and complete the booking with payment. You will receive a confirmation via email with all session details.",
+   },

Removed / Before Commit

- className?: string;
- }) {
- return (
-     <section className="bg-[#e3e3e3] px-3 py-6 sm:px-6 lg:px-8">
-       <div className="mx-auto max-w-7xl">
-         <p className="mb-3 text-sm font-semibold text-[#3d3d3d]">{label}</p>
- <div
- className={cn(
-             "overflow-hidden rounded-[18px] bg-white shadow-[0_22px_70px_rgba(12,62,187,0.10)]",
- className,
- )}
- >
-           <div className="relative border-b border-[#eeeeee] px-4 py-5">
-             <div className="mx-auto flex h-7 max-w-sm items-center justify-center rounded-md bg-[#f0f0f0] text-xs font-semibold text-black">
-               avriti.com
-             </div>
-             <Link
-               href="/"

Added / After Commit

+ className?: string;
+ }) {
+ return (
+     <section className="">
+       <div className="mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+         
+ <div
+ className={cn(
+             "rounded-[18px] bg-white",
+ className,
+ )}
+ >
+         
+ {children}
+ </div>
+ </div>

Removed / Before Commit

- export function ProductCard({ product }: { product: (typeof products)[number] }) {
- return (
- <Card className="overflow-hidden">
-       <Link href={`/shop/${product.slug}`} className="block">
-         <div className={`relative aspect-[4/3] bg-gradient-to-br ${product.tone}`}>
-           <div className="sacred-ring absolute inset-6 opacity-80" />
-           <Image
- src={product.image}
- alt={product.name}
- fill
- sizes="(min-width: 1024px) 25vw, 90vw"
-             className="object-contain p-10 mix-blend-multiply"
- />
-           <Badge className="absolute left-4 top-4">{product.badge}</Badge>
-         </div>
-       </Link>
-       <div className="space-y-4 p-5">
-         <div>

Added / After Commit

+ export function ProductCard({ product }: { product: (typeof products)[number] }) {
+ return (
+ <Card className="overflow-hidden">
+       <Link href={`/shop/${product.slug}`} className="block h-full flex flex-col justify-between">
+       <h3 className="mt-2 text-lg mb-[20px] text-[var(--textcolor)] font-normal">{product.name}</h3>
+         <div className={`relative ${product.tone}`}>
+           
+           <img
+ src={product.image}
+ alt={product.name}
+ fill
+ sizes="(min-width: 1024px) 25vw, 90vw"
+             className="w-[60%] object-contain  mix-blend-multiply ml-auto mr-auto"
+ />
+           
+ </div>
+       
+       <div className="mt-[20px]">

Removed / Before Commit

- const Icon = service.icon;
- 
- return (
-     <Card className="p-6 transition hover:-translate-y-1 hover:border-[var(--color-primary-300)]">
-       <div className="flex h-12 w-12 items-center justify-center rounded-md bg-[var(--color-primary-100)]/55 text-[var(--color-primary-700)]">
-         <Icon size={23} />
-       </div>
-       <div className="mt-6">
-         <div className="flex flex-wrap items-center justify-between gap-2">
-           <h3 className="text-xl font-semibold">{service.name}</h3>
-           <span className="text-xs font-semibold text-[var(--color-text-secondary)]">
-             {service.duration}
-           </span>
-         </div>
-         <p className="mt-2 text-sm font-semibold text-[var(--color-primary-700)]">
-           {service.price}
-         </p>
-         <p className="mt-3 text-sm leading-6 text-[var(--color-text-secondary)]">

Added / After Commit

+ const Icon = service.icon;
+ 
+ return (
+     <Card className="flex flex-col px-6 py-3 transition hover:-translate-y-1 hover:border-[var(--color-primary-300)]">
+       
+       <div className="">
+         
+           <h3 className="text-xl font-semibold font-serif text-[var(--color-primary-700)]">{service.name}</h3>
+           
+         <p className="mt-3 text-[12px] text-[var(--textcolor)] leading-normal mb-[20px] text-[var(--color-text-secondary)]">
+ {service.summary}
+ </p>
+ </div>
+      <div className="flex items-center h-full"> <img
+                     src={service.img}
+                     alt="Avriti"
+                     fill
+                     sizes="112px"

Removed / Before Commit

- <footer className="border-t border-[var(--color-border)] bg-[#f8fbff]">
- <div className="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 lg:grid-cols-[1.2fr_0.8fr_1fr] lg:px-8">
- <div>
-           <p className="text-xl font-semibold text-[var(--color-primary-700)]">
-             Avriti
-           </p>
- <p className="mt-4 max-w-sm text-sm leading-6 text-[var(--color-text-secondary)]">
- Sacred products, Vedic-inspired consultations, and calm practical
- guidance for everyday decisions.
- <p className="mt-3 text-sm leading-6 text-[var(--color-text-secondary)]">
- Monthly notes on rituals, guidance windows, and new Avriti drops.
- </p>
-           <form className="mt-4 flex flex-col gap-3 sm:flex-row">
-             <Input type="email" placeholder="Email address" aria-label="Email" />
-             <Button type="button">Subscribe</Button>
- </form>
- </div>
- </div>

Added / After Commit

+ <footer className="border-t border-[var(--color-border)] bg-[#f8fbff]">
+ <div className="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 lg:grid-cols-[1.2fr_0.8fr_1fr] lg:px-8">
+ <div>
+           <img
+                         src="/logo1.png"
+                         alt="Avriti"
+                         fill
+                         sizes="112px"
+                         className="object-contain w-[100px]"
+                         priority
+                       />
+ <p className="mt-4 max-w-sm text-sm leading-6 text-[var(--color-text-secondary)]">
+ Sacred products, Vedic-inspired consultations, and calm practical
+ guidance for everyday decisions.
+ <p className="mt-3 text-sm leading-6 text-[var(--color-text-secondary)]">
+ Monthly notes on rituals, guidance windows, and new Avriti drops.
+ </p>
+           <form className="mt-4 flex flex-col gap-3 sm:flex-row border border-[#0B3DBA] rounded-[10px]">

Removed / Before Commit

- import { Menu, ShoppingBag, UserRound, X } from "lucide-react";
- import { useState } from "react";
- import { Button } from "@/components/ui/button";
- import { cn } from "@/lib/utils";
- 
- const navItems = [
- { href: "/shop", label: "Shop" },
- { href: "/services", label: "Services" },
- { href: "/about", label: "About" },
- { href: "/contact", label: "Connect" },
- ];
- 
- export function SiteHeader() {
- const [open, setOpen] = useState(false);
- 
- return (
-     <header className="sticky top-0 z-40 border-b border-[var(--color-border)] bg-white/90 backdrop-blur-xl">
-       <div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">

Added / After Commit

+ import { Menu, ShoppingBag, UserRound, X } from "lucide-react";
+ import { useState } from "react";
+ import { Button } from "@/components/ui/button";
+ import { CartButton } from "@/components/ui/cart-button";
+ import { cn } from "@/lib/utils";
+ 
+ const leftNav = [
+ { href: "/shop", label: "Shop" },
+ { href: "/services", label: "Services" },
+ ];
+ 
+ const rightNav = [
+ { href: "/about", label: "About" },
+ { href: "/contact", label: "Connect" },
+ ];
+ 
+ const navItems = [...leftNav, ...rightNav];
+

Removed / Before Commit

- return (
- <div
- className={cn(
-         "rounded-md border border-[var(--color-border)] bg-white shadow-[var(--shadow-soft)]",
- className,
- )}
- {...props}

Added / After Commit

+ return (
+ <div
+ className={cn(
+         "bg-white bg-[#F7F7F7] rounded-[20px] p-[20px] ",
+ className,
+ )}
+ {...props}

Removed / Before Commit

Added / After Commit

+ import * as React from "react";
+ import { cn } from "@/lib/utils";
+ 
+ export interface CartButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+   count?: number;
+   itemsLabel?: string;
+ }
+ 
+ export function CartButton({ className, count = 0, itemsLabel = "ITEMS", ...props }: CartButtonProps) {
+   return (
+     <button
+       className={cn(
+         "inline-flex items-center justify-between rounded-[15px] bg-gradient-to-br from-[#C7C3D6] to-[#3C60C2] px-4 py-2 text-white gap-3",
+         className,
+       )}
+       {...props}
+     >
+       <span className="text-[12px] font-normal  uppercase">CART</span>

Removed / Before Commit

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

Added / After Commit

+ return (
+ <Link
+ href="https://wa.me/910000000000"
+       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"
+ >
+       <img
+                     src="/whatsapp.png"
+                     alt="Avriti"
+                     fill
+                     sizes="112px"
+                     className="object-contain"
+                     priority
+                   />
+ </Link>
+ );
+ }

Removed / Before Commit

- export const services = [
- {
- slug: "numerology",
-     name: "Numerology",
- icon: BadgeIndianRupee,
- duration: "45 min",
- price: "Starts ₹1,499",
- summary:
-       "Decode name, date, and personal cycles with grounded, practical guidance.",
- detail:
- "A numerology session maps personal patterns, decision windows, and supportive name/date insights in a calm, actionable format.",
- },
- {
- slug: "tarot",
-     name: "Tarot Reading",
- icon: Eye,
- duration: "40 min",
- price: "Starts ₹1,299",

Added / After Commit

+ export const services = [
+ {
+ slug: "numerology",
+     name: "Avriti Numerology",
+ icon: BadgeIndianRupee,
+ duration: "45 min",
+ price: "Starts ₹1,499",
+ summary:
+       "Your name and birth date hold a blueprint.Let's decode it.",
+       img:"/service11.png",
+ detail:
+ "A numerology session maps personal patterns, decision windows, and supportive name/date insights in a calm, actionable format.",
+ },
+ {
+ slug: "tarot",
+     name: "Avriti Drishti",
+ icon: Eye,
+ duration: "40 min",