Commit Review Workspace ?

- <div>
- <section className="brand-gradient">
- <div className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
-           <Badge>Contact</Badge>
-           <h1 className="mt-5 max-w-3xl text-4xl font-semibold text-[var(--color-primary-700)]">
-             Reach Avriti for product questions, consultation help, or collaboration.
-           </h1>
- </div>
- </section>
- 
- </div>
- 
- <Card className="p-6">
-           <h2 className="text-2xl font-semibold">Send a message</h2>
- <div className="mt-6 grid gap-4">
- <div className="grid gap-4 sm:grid-cols-2">
- <Input placeholder="Name" aria-label="Name" />

+ <div>
+ <section className="brand-gradient">
+ <div className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
+           <h1 className="uppercase text-[40px] md:text-[50px] font-semibold text-[var(--color-primary-700)] text-center font-serif">
+               Contact Us
+             </h1>
+             
+ </div>
+ </section>
+ 
+ </div>
+ 
+ <Card className="p-6">
+           <h2 className="text-2xl font-semibold font-serif">Send a message</h2>
+ <div className="mt-6 grid gap-4">
+ <div className="grid gap-4 sm:grid-cols-2">
+ <Input placeholder="Name" aria-label="Name" />

+ "use client";
+ 
+ import { useState } from "react";
+ // ... rest of your code
+ 
+ export default function LoginPage() {
+   const [email, setEmail] = useState("");
+   const [password, setPassword] = useState("");
+   const [showPassword, setShowPassword] = useState(false);
+   const [loading, setLoading] = useState(false);
+   const [focused, setFocused] = useState("");
+ 
+   const handleSubmit = () => {
+     setLoading(true);
+     setTimeout(() => setLoading(false), 2000);
+   };
+ 
+   return (

- import Image from "next/image";
- import Link from "next/link";
- 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";
- 
- 
- <h4 className="text-center text-[var(--textcolor)] font-normal text-[20px] mb-[30px]">We just know where to look.</h4>
- <p className="text-center text-[var(--textcolor)] font-normal text-[14px] md:text-[16px] mb-[30px] max-w-[800px] mx-auto">Our consultations draw from the oldest sciences of self-knowledge — Vedic Astrology, Numerology, Tarot,
- and Vastu — to offer you not predictions, but perspective. Not fortune-telling, but clarity</p>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-         {services.map((service) => (
-           <ServiceCard key={service.slug} service={service} />
-         ))}

+ import Image from "next/image";
+ import Link from "next/link";
+ import { PdfBrowserFrame } from "@/components/pdf-browser-frame";
+ import { Button } from "@/components/ui/button";
+ import { ProductCard } from "@/components/product-card";
+ import { ServiceSlider } from "@/components/service-slider";
+ import { FAQ } from "@/components/faq";
+ 
+ 
+ <h4 className="text-center text-[var(--textcolor)] font-normal text-[20px] mb-[30px]">We just know where to look.</h4>
+ <p className="text-center text-[var(--textcolor)] font-normal text-[14px] md:text-[16px] mb-[30px] max-w-[800px] mx-auto">Our consultations draw from the oldest sciences of self-knowledge — Vedic Astrology, Numerology, Tarot,
+ and Vastu — to offer you not predictions, but perspective. Not fortune-telling, but clarity</p>
+         <ServiceSlider />
+ </div>
+ 
+ {/* FAQ Section  */}

- body: "The space you live in shapes the life you live.",
- icon: Home,
- },
- ];
- 
- export default function ServicesPage() {

+ body: "The space you live in shapes the life you live.",
+ icon: Home,
+ },
+   {
+     href: "/services/numerology",
+     title: "Avriti Numerology New",
+     body: "Your name and birth date hold a blueprint. Let's decode it.",
+     icon: Hash,
+   },
+ ];
+ 
+ export default function ServicesPage() {

- import Image from "next/image";
- import Link from "next/link";
- import { PdfBrowserFrame } from "@/components/pdf-browser-frame";
- 
- const categories = [
- "Shop",
- "Avriti All Products",
- ];
- 
- const shopProducts = [
-   ["vastu-harmony-salt", "Avriti Shuddhi - Mopping Salt - 1kg", "299"],
-   ["vastu-harmony-salt", "Avriti Jal Shuddhi - Bathroom Salt - 250g", "359"],
-   ["drishti-tarot-cards", "Drishti Tarot Cards - Pack of 78 cards", "299"],
-   ["drishti-tarot-cards", "Drishti Tarot Cards - Oracle Deck - Pack of 44 cards", "299"],
-   ["signature-protection-charm", "Signature Charm - Natural Healing crystals", "1,700"],
-   ["crystalline-intention-set", "Avriti Dristi - Altar Cloth", "299"],
- ];
- 

+ "use client";
+ 
+ import { useState } from "react";
+ import Image from "next/image";
+ import Link from "next/link";
+ import { PdfBrowserFrame } from "@/components/pdf-browser-frame";
+ 
+ 
+ const categories = [
+ "Shop",
+ "Avriti All Products",
+ ];
+ 
+ const shopProducts = [
+   ["vastu-harmony-salt", "Avriti Shuddhi - Mopping Salt - 1kg", "299" , "/product2.jpeg"],
+   ["vastu-harmony-salt", "Avriti Jal Shuddhi - Bathroom Salt - 250g", "359" , "/product3.jpeg"],
+   ["drishti-tarot-cards", "Drishti Tarot Cards - Pack of 78 cards", "299",  "/product4.jpeg"],
+   ["drishti-tarot-cards", "Drishti Tarot Cards - Oracle Deck - Pack of 44 cards", "299",  "/product66.jpeg"],

- 
- <div
- className={cn(
-             "rounded-[18px] bg-white",
- className,
- )}
- >

+ 
+ <div
+ className={cn(
+             "rounded-[18px] bg-white w-full",
+ className,
+ )}
+ >

- 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]">
-       

+ 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}
+ sizes="(min-width: 1024px) 25vw, 90vw"
+ className="w-[60%] object-contain  mix-blend-multiply ml-auto mr-auto"
+ />
+ 
+ </div>
+ 
+         <div className="mt-[20px]">
+ 
+           <div className="flex items-center justify-between gap-3">

- import Link from "next/link";
- import { ArrowRight } from "lucide-react";
- import { Button } from "@/components/ui/button";
- import { Card } from "@/components/ui/card";
- import { services } from "@/lib/data";
- 
- export function ServiceCard({ service }: { service: (typeof services)[number] }) {
-   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}

+ import Image from "next/image";
+ import { Card } from "@/components/ui/card";
+ import { services } from "@/lib/data";
+ import { cn } from "@/lib/utils";
+ 
+ export function ServiceCard({
+   service,
+   className,
+ }: {
+   service: (typeof services)[number];
+   className?: string;
+ }) {
+ return (
+     <Card
+       className={cn(
+         "flex min-h-[356px] flex-col overflow-hidden border border-transparent px-6 py-5 transition duration-300 hover:-translate-y-1 hover:border-[var(--color-primary-300)]",
+         className,
+       )}

+ "use client";
+ 
+ import { ChevronLeft, ChevronRight } from "lucide-react";
+ import { useCallback, useEffect, useRef, useState } from "react";
+ import { ServiceCard } from "@/components/service-card";
+ import { services } from "@/lib/data";
+ import { cn } from "@/lib/utils";
+ 
+ export function ServiceSlider() {
+   const trackRef = useRef<HTMLDivElement>(null);
+   const [activeIndex, setActiveIndex] = useState(0);
+   const [canScroll, setCanScroll] = useState(false);
+   const [atStart, setAtStart] = useState(true);
+   const [atEnd, setAtEnd] = useState(false);
+ 
+   const updateSliderState = useCallback(() => {
+     const track = trackRef.current;
+ 

- <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]">
- <Input type="email" placeholder="Email address" aria-label="Email" className="border-none bg-transparent focus:outline-none focus:ring-transparent" />
- <Button type="button" className="bg-transparent shadow-none hover:bg-transparent"><img
- src="/right-arrow.png"

+ <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 flex-row border border-[#0B3DBA] rounded-[10px]">
+ <Input type="email" placeholder="Email address" aria-label="Email" className="border-none bg-transparent focus:outline-none focus:ring-transparent" />
+ <Button type="button" className="bg-transparent shadow-none hover:bg-transparent"><img
+ src="/right-arrow.png"

- 
- import Image from "next/image";
- import Link from "next/link";
- 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";
- 
- ))}
- </div>
- {/* Center Logo */}
-         <div className="flex justify-center flex-1">
-           <Link href="/">
-             <Image
-               src="/HeadIcon.png"
-               alt="Avriti"
-               width={80}

+ 
+ import Image from "next/image";
+ import Link from "next/link";
+ import { Menu, X } from "lucide-react";
+ import { useState } from "react";
+ import { CartButton } from "@/components/ui/cart-button";
+ import { cn } from "@/lib/utils";
+ 
+ ))}
+ </div>
+ {/* Center Logo */}
+         {/* Center Logo */}
+ <div className="flex justify-center flex-1">
+   <Link href="/">
+     <span className="relative h-12 w-20 block overflow-hidden">
+       <Image
+         src="/HeadIcon.png"
+         alt="Avriti"

- detail:
- "A Vastu consultation reviews layout, rooms, entrances, and practical corrections that can be applied without overwhelming changes.",
- },
- 
- 
- ];

+ detail:
+ "A Vastu consultation reviews layout, rooms, entrances, and practical corrections that can be applied without overwhelming changes.",
+ },
+   {
+     slug: "vastu",
+     name: "Avriti Vastu New",
+     icon: SunMedium,
+     duration: "60 min",
+     price: "Starts ₹2,999",
+     summary:
+       "The space you live in shapes the life you live.",
+       img:"/service44.png",
+     detail:
+       "A Vastu consultation reviews layout, rooms, entrances, and practical corrections that can be applied without overwhelming changes.",
+   },
+ 
+ 
+ ];