Commit Review Workspace ?

- import Image from "next/image";
- import { Badge } from "@/components/ui/badge";
- import { Card } from "@/components/ui/card";
- 
- export default function AboutPage() {
- return (
- <div>
- <section className="brand-gradient">
- </div>
- </div>
- </section>
-     
- 
-       <section className="mx-auto  max-w-7xl px-4 sm:px-6 lg:px-8 my-[50px] md:my-[80px]">
-           <div className="grid md:grid-cols-2 gap-8">
-                 <div>
-                       <img   src="/banner.png"  alt="Avriti"                                    className="object-contain md:w-[60%] mx-auto" />
-                 </div>

+ "use client";
+ import './about.css';
+ import { useEffect, useState } from "react";
+ 
+ type Section = {
+   sub_heading?: string;
+   heading?: string;
+   message?: string;
+   description?: string;
+   image?: string;
+ };
+ 
+ type AboutData = {
+   section1: Section | null;
+   section2: Section | null;
+   section3: Section | null;
+ };
+ 

- 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";
- import { TestimonialSlider } from "@/components/testimonial-slider";
- 
- const products = [
-   {
-     slug: "shuddhi-mopping-salt",
-     name: "Avriti Shuddhi - Mopping Salt - 1kg",
-     price: "299",
-     image: "/product2.jpeg",
-     tone: "from-[#E8EDFB] to-[#D0D9F7]",
-      category: "Salt",
-   badge: "New",

+ "use client";
+ 
+ import { useEffect, useState } from "react";
+ import Image from "next/image";
+ import { ProductCard } from "@/components/product-card";
+ import Link from "next/link";
+ import { PdfBrowserFrame } from "@/components/pdf-browser-frame";
+ import { Button } from "@/components/ui/button";
+ import { ServiceSlider } from "@/components/service-slider";
+ import { FAQ } from "@/components/faq";
+ import { TestimonialSlider } from "@/components/testimonial-slider";
+ 
+ type FeaturedProduct = {
+   slug: string;
+   name: string;
+   attrName: string;
+   price: string;
+   image: string;

- }
- 
- export default function ShopPage() {
-   const [selected, setSelected] = useState<number[]>([]);
- const [categories, setCategories] = useState<Category[]>([]);
- const [products, setProducts] = useState<Product[]>([]);
- 
- useEffect(() => {
- const fetchCategories = async () => {
-       const res = await fetch('http://localhost:8000/api/categories');
- const data = await res.json();
- setCategories(data.data);
- };
- 
- useEffect(() => {
- const fetchProducts = async () => {
-       const res = await fetch('http://localhost:8000/api/product');
- const data = await res.json();

+ }
+ 
+ export default function ShopPage() {
+   const [selected, setSelected] = useState<number | null>(null);
+ const [categories, setCategories] = useState<Category[]>([]);
+ const [products, setProducts] = useState<Product[]>([]);
+   const [loading, setLoading] = useState(false);
+ 
+ useEffect(() => {
+ const fetchCategories = async () => {
+       const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/categories`);
+ const data = await res.json();
+ setCategories(data.data);
+ };
+ 
+ useEffect(() => {
+ const fetchProducts = async () => {
+       setLoading(true);

- "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.",
-   },

+ "use client";
+ 
+ import { useState, useEffect } from "react";
+ import { Plus, Minus } from "lucide-react";
+ 
+ type FaqItem = {
+   id: number;
+   question: string;
+   answer: string;
+ };
+ 
+ export function FAQ() {
+ const [openId, setOpenId] = useState<number | null>(null);
+   const [faqs, setFaqs] = useState<FaqItem[]>([]);
+ 
+   useEffect(() => {
+     fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/faqs`)
+       .then((res) => res.json())

- import Image from "next/image";
- import Link from "next/link";
- import { ArrowRight, ShoppingBag } from "lucide-react";
- import { Badge } from "@/components/ui/badge";
- import { Button } from "@/components/ui/button";
- import { Card } from "@/components/ui/card";
- import { products } from "@/lib/data";
- 
- 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

+ import Link from "next/link";
+ import { Button } from "@/components/ui/button";
+ import { Card } from "@/components/ui/card";
+ 
+ type ProductCardProps = {
+   slug: string;
+   name: string;
+   attrName?: string;
+   price: string;
+   image: string;
+   tone: string;
+   category?: string;
+   badge?: string;
+   description?: string;
+ };
+ 
+ export function ProductCard({ product }: { product: ProductCardProps }) {
+ return (

- port: '8000',
- pathname: '/**',
- },
- ],
-     unoptimized: true,  // ✅ yeh add karo
- },
- };

+ port: '8000',
+ pathname: '/**',
+ },
+       {
+         protocol: 'https',
+         hostname: 'api.digitalmission.in',
+         pathname: '/**',
+       },
+ ],
+     unoptimized: true,
+ },
+ };