[V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]plaintext:file="public/assets/pwd-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/pwd%20logo.jpg-n0SoKKlEcJUNwKdXNhAbxCycXX4O5L.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/assets/product1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/product1-rfCfGpXOvXztp88Rhjq0KjNJ5vXV1k.png" isMerged="true" [V0_FILE]plaintext:file="public/assets/product2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/product2-MAPxdREVOZKWsBt9hU76rIXfaDAg2V.png" isMerged="true" [V0_FILE]plaintext:file="public/assets/product3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/product3-2mGcdp3Phsc0mPKXlkKHl7qpSlKxys.png" isMerged="true" [V0_FILE]plaintext:file="public/assets/product4.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/product4-e1JU4MPRl5XdVXY0A1KxbgdbQmptVZ.png" isMerged="true" [V0_FILE]plaintext:file="public/assets/product5.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/product5-udEsm4wbTmaVYBvqde2eX6EDVz4npi.png" isMerged="true" [V0_FILE]plaintext:file="public/assets/product6.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/product6-VSBvsx55XRQUqveqxrKyIsrly9IRjp.png" isMerged="true" [V0_FILE]plaintext:file="public/assets/product7.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/product7-3wxvHrphXsHtuCujtZG6qHFIBqYLKM.png" isMerged="true" [V0_FILE]plaintext:file="public/assets/enclosure-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Enclosure-1.jpg-44CNIZEJX5duFDRTMnefdNBJuVPDMd.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/assets/enclosure-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Enclosure-2.jpg-XU8s4BlEELGD8js9TQMHpN1zqjkA1i.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/product-dialog.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Image from "next/image" import { ChevronRight, ExternalLink, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogClose, } from "@/components/ui/dialog" import { Badge } from "@/components/ui/badge" import Link from "next/link" import { cn } from "@/lib/utils" interface ProductDialogProps { product: { title: string description: string image: string features?: string[] specifications?: Record category?: string } trigger: React.ReactNode } export function ProductDialog({ product, trigger }: ProductDialogProps) { const [isZoomed, setIsZoomed] = useState(false) return ( ) } [V0_FILE]typescriptreact:file="components/product-carousel.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useCallback, useRef } from "react" import Image from "next/image" import { ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" interface ProductCarouselProps { images: { src: string alt: string }[] autoPlayInterval?: number className?: string } export function ProductCarousel({ images, autoPlayInterval = 5000, className }: ProductCarouselProps) { const [currentIndex, setCurrentIndex] = useState(0) const [isHovering, setIsHovering] = useState(false) const timerRef = useRef(null) const next = useCallback(() => { setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length) }, [images.length]) const prev = useCallback(() => { setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length) }, [images.length]) const goToSlide = useCallback((index: number) => { setCurrentIndex(index) }, []) // Reset the timer when the current index changes useEffect(() => { if (isHovering) return if (timerRef.current) { clearInterval(timerRef.current) } timerRef.current = setInterval(() => { next() }, autoPlayInterval) return () => { if (timerRef.current) { clearInterval(timerRef.current) } } }, [currentIndex, autoPlayInterval, next, isHovering]) // Pause autoplay on hover const handleMouseEnter = useCallback(() => { setIsHovering(true) if (timerRef.current) { clearInterval(timerRef.current) timerRef.current = null } }, []) const handleMouseLeave = useCallback(() => { setIsHovering(false) if (timerRef.current) { clearInterval(timerRef.current) } timerRef.current = setInterval(() => { next() }, autoPlayInterval) }, [autoPlayInterval, next]) return (

{images.map((image, index) => (

{image.alt}

))}

{images.map((_, index) => (

) } const ChevronLeftIcon = (props: React.SVGProps) => ( ) [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isEdit="true" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/site-footer.tsx" isMerged="true" import Link from "next/link" import { Facebook, Instagram, Linkedin, Mail, MapPin, Phone, Twitter } from "lucide-react" import { Button } from "@/components/ui/button" export function SiteFooter() { return ( ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .bg-grid-pattern { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(15 23 42 / 0.04)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e"); } @media (prefers-color-scheme: dark) { .bg-grid-pattern { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.05)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e"); } } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", "outline-primary": "border-2 border-primary bg-transparent text-primary hover:bg-primary/10", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as SheetPrimitive from "@radix-ui/react-dialog" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Sheet = SheetPrimitive.Root const SheetTrigger = SheetPrimitive.Trigger const SheetClose = SheetPrimitive.Close const SheetPortal = SheetPrimitive.Portal const SheetOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetOverlay.displayName = SheetPrimitive.Overlay.displayName const sheetVariants = cva( "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", { variants: { side: { top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", }, }, defaultVariants: { side: "right", }, }, ) interface SheetContentProps extends React.ComponentPropsWithoutRef, VariantProps {} const SheetContent = React.forwardRef, SheetContentProps>( ({ side = "right", className, children, ...props }, ref) => ( {children} Close ), ) SheetContent.displayName = SheetPrimitive.Content.displayName const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (

) SheetHeader.displayName = "SheetHeader" const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (

) SheetFooter.displayName = "SheetFooter" const SheetTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetTitle.displayName = SheetPrimitive.Title.displayName const SheetDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetDescription.displayName = SheetPrimitive.Description.displayName export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } [V0_FILE]typescriptreact:file="components/site-header.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import Link from "next/link" import { Menu, Phone, X } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger, SheetClose } from "@/components/ui/sheet" const mainNav = [ { title: "Home", href: "/" }, { title: "About Us", href: "/about" }, { title: "Products", href: "/products" }, { title: "Contact", href: "/contact" }, ] export function SiteHeader() { const [isScrolled, setIsScrolled] = React.useState(false) const [activePath, setActivePath] = React.useState("") React.useEffect(() => { setActivePath(window.location.pathname) const handleScroll = () => { if (window.scrollY > 10) { setIsScrolled(true) } else { setIsScrolled(false) } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) return (

MAHADEV TECH

+91 9818670416

MAHADEV TECH Close

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Mail, MapPin, Phone } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" export default function ContactPage() { return ( <>

Contact Us

Get in touch with our team for inquiries, quotes, or technical support.

Get in Touch

Fill out the form below and our team will get back to you as soon as possible.

First name

Last name

Phone

Subject

Message

</div>
                <Button type="submit" className="w-full">
                  Send Message
                </Button>
              </form>
            </div>
            <div className="space-y-6">
              <div>
                <h2 className="text-2xl font-bold tracking-tight">Contact Information</h2>
                <p className="text-gray-500 dark:text-gray-400 mt-2">
                  Our team is available to assist you during business hours.
                </p>
              </div>
              <div className="grid gap-6">
                <Card>
                  <CardContent className="flex items-start gap-4 p-6">
                    <Phone className="h-6 w-6 text-primary mt-1" />
                    <div>
                      <h3 className="font-medium">Phone</h3>
                      <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Call us during business hours</p>
                      <p className="font-medium mt-1">+91 9818670416</p>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="flex items-start gap-4 p-6">
                    <Mail className="h-6 w-6 text-primary mt-1" />
                    <div>
                      <h3 className="font-medium">Email</h3>
                      <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Send us an email anytime</p>
                      <p className="font-medium mt-1">mahadevtechindia@gmail.com</p>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="flex items-start gap-4 p-6">
                    <MapPin className="h-6 w-6 text-primary mt-1" />
                    <div>
                      <h3 className="font-medium">Office & Factory</h3>
                      <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Visit our facility</p>
                      <p className="font-medium mt-1">
                        Plot No 14, Ground Floor, Gali No.1, Gazipur Industrial Area, Faridabad, Haryana 121001
                      </p>
                    </div>
                  </CardContent>
                </Card>
              </div>
              <div className="rounded-lg border overflow-hidden h-[300px] mt-8">
                <iframe
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d448196.5263279825!2d76.76357065462201!3d28.643795032051744!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd5b347eb62d%3A0x37205b715389640!2sDelhi!5e0!3m2!1sen!2sin!4v1709297658318!5m2!1sen!2sin"
                  width="100%"
                  height="100%"
                  style={{ border: 0 }}
                  allowFullScreen={false}
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                ></iframe>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/about/page.tsx" isEdit="true" isMerged="true"
import Image from "next/image"
import Link from "next/link"
import { CheckCircle } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function AboutPage() {
  return (
    <>
      <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-r from-blue-50 to-gray-50 dark:from-gray-900 dark:to-gray-950">
        <div className="container px-4 md:px-6">
          <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-center mb-8">
            About MAHADEV TECH
          </h1>
          <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
            <div className="space-y-4">
              <p className="text-gray-500 dark:text-gray-400">
                MAHADEV TECH is one of India's premier Electric Switchboards and Panel boards manufacturer, exporter and
                supplier. Established in March 2021, we have quickly grown to become a trusted name in the electrical
                industry.
              </p>
              <p className="text-gray-500 dark:text-gray-400">
                Our range of electric panels is used for industrial purposes, building or apartment construction
                organization purpose and custom built designs. We are a group of young, enterprising professionals
                having vast experience in the field of industrial automation & power distribution systems in respect of
                Electrical Engineering.
              </p>
            </div>
            <div className="mx-auto w-full max-w-[500px] lg:max-w-none">
              <Image
                src="/assets/product7.png"
                width={600}
                height={400}
                alt="MAHADEV TECH facility"
                className="w-full rounded-lg object-cover shadow-lg"
              />
            </div>
          </div>
        </div>
      </section>

<section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-800">
        <div className="container px-4 md:px-6">
          <h2 className="text-2xl font-bold tracking-tighter sm:text-3xl md:text-4xl text-center mb-8">
            Our Strengths
          </h2>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {[
              "Well experienced, dedicated & Qualified Electrical Engineers",
              "Diversified system Design & execution experience",
              "Very cost-effective & reliable solutions",
              "Strong service backup round the clock",
              "Well awareness of 'Building Blocks' available in market",
              "Proven track record of customer satisfaction",
            ].map((strength, index) => (
              <div key={index} className="flex items-start space-x-4">
                <CheckCircle className="h-6 w-6 text-primary flex-shrink-0 mt-1" />
                <p className="text-gray-500 dark:text-gray-400">{strength}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

<section className="w-full py-12 md:py-24 lg:py-32">
        <div className="container px-4 md:px-6">
          <h2 className="text-2xl font-bold tracking-tighter sm:text-3xl md:text-4xl text-center mb-8">
            Our Manufacturing Facilities
          </h2>
          <div className="grid gap-6 lg:grid-cols-2 lg:gap-12">
            <div className="space-y-4">
              <h3 className="text-xl font-bold">Unit-1 (Electrical Panel Manufacturing)</h3>
              <p className="text-gray-500 dark:text-gray-400">
                Plot No.14, Gali No-1, Gazipur Industrial Area, Faridabad
              </p>
              <Image
                src="/assets/product1.png"
                width={400}
                height={300}
                alt="Unit-1 Facility"
                className="w-full rounded-lg object-cover shadow-lg"
              />
            </div>
            <div className="space-y-4">
              <h3 className="text-xl font-bold">Unit-2 (Powder Coating)</h3>
              <p className="text-gray-500 dark:text-gray-400">
                Plot No.8, Gali No-8 East, Saroorpur Industrial Area, Faridabad
              </p>
              <Image
                src="/assets/product7.png"
                width={400}
                height={300}
                alt="Unit-2 Facility"
                className="w-full rounded-lg object-cover shadow-lg"
              />
            </div>
          </div>
          <div className="mt-12 text-center">
            <Button asChild size="lg">
              <Link href="/contact">Get a Quote</Link>
            </Button>
          </div>
        </div>
      </section>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/products/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { ChevronRight } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ProductCard } from "@/components/product-card"

export default function ProductsPage() {
  const [activeTab, setActiveTab] = useState("control-panels")

const controlPanels = [
    {
      title: "Power Control Centres (P.C.C.) Panels",
      description: "High-performance power distribution and control systems for industrial applications.",
      features: [
        "Robust construction",
        "Customizable configurations",
        "High short-circuit withstand capacity",
        "Reliable operation in harsh environments",
      ],
      image: "/assets/product1.png",
      category: "Control Panels",
      specifications: {
        "Voltage Rating": "Up to 1000V",
        "Current Rating": "Up to 6300A",
        "Protection Class": "IP42-IP54",
        Form: "Form 1-4b",
        Standards: "IS/IEC 61439-1&2",
      },
    },
    {
      title: "Motor Control Centres (M.C.C.) Panels",
      description: "Centralized control for multiple motors with protection and automation capabilities.",
      features: ["Integrated motor protection", "Modular design", "Easy maintenance", "Space-efficient layout"],
      image: "/assets/product2.png",
      category: "Control Panels",
      specifications: {
        "Voltage Rating": "Up to 690V",
        "Current Rating": "Up to 630A per feeder",
        "Protection Class": "IP42-IP54",
        Form: "Form 3b, 4a, 4b",
        Standards: "IS/IEC 61439-1&2",
      },
    },
    {
      title: "Auto Mains Failure (A.M.F.) DG Panels",
      description: "Automatic power backup systems for seamless operation during mains failure.",
      features: [
        "Automatic generator starting",
        "Smooth load transfer",
        "Programmable timers",
        "Comprehensive protection features",
      ],
      image: "/assets/product5.png",
      category: "Control Panels",
      specifications: {
        "Voltage Rating": "Up to 440V",
        "Current Rating": "Up to 3200A",
        "Protection Class": "IP42-IP54",
        Controller: "Microprocessor based",
        Standards: "IS/IEC 61439-1&2",
      },
    },
  ]

const distributionSystems = [
    {
      title: "Distribution Boards",
      description: "Efficient power distribution solutions for commercial and industrial settings.",
      features: [
        "Compact design",
        "Multiple circuit configurations",
        "Reliable circuit protection",
        "Easy installation",
      ],
      image: "/assets/product4.png",
      category: "Distribution",
      specifications: {
        "Voltage Rating": "Up to 440V",
        "Current Rating": "Up to 630A",
        "Protection Class": "IP42-IP54",
        Ways: "4 to 24 ways",
        Standards: "IS/IEC 61439-3",
      },
    },
    {
      title: "Meter Boards",
      description: "Centralized metering solutions for multi-tenant buildings and industrial complexes.",
      features: [
        "Accurate energy monitoring",
        "Tamper-proof design",
        "Multiple meter configurations",
        "Weather-resistant enclosures",
      ],
      image: "/assets/enclosure-1.jpg",
      category: "Distribution",
      specifications: {
        "Voltage Rating": "Up to 440V",
        "Current Rating": "Up to 100A per meter",
        "Protection Class": "IP42-IP54",
        Meters: "Up to 24 meters",
        Standards: "IS/IEC 61439-3",
      },
    },
    {
      title: "Feeder Pillars",
      description: "Outdoor power distribution units for street lighting and public infrastructure.",
      features: [
        "Weather-proof construction",
        "Vandal-resistant design",
        "Multiple outgoing circuits",
        "Integrated protection",
      ],
      image: "/assets/enclosure-2.jpg",
      category: "Distribution",
      specifications: {
        "Voltage Rating": "Up to 440V",
        "Current Rating": "Up to 630A",
        "Protection Class": "IP55-IP65",
        Material: "Stainless Steel/GI",
        Standards: "IS/IEC 61439-5",
      },
    },
  ]

const automationSystems = [
    {
      title: "PLC Based DG Synchronizing Panels",
      description: "Advanced automation for generator synchronization and load management.",
      features: [
        "Automatic load sharing",
        "Seamless generator synchronization",
        "Real-time monitoring",
        "Programmable operation sequences",
      ],
      image: "/assets/product3.png",
      category: "Automation",
      specifications: {
        "PLC Type": "Siemens/Allen Bradley/Schneider",
        "I/O Capacity": "Scalable as per requirement",
        Communication: "Modbus/Profibus/Ethernet",
        HMI: "Touch screen interface",
        "Protection Class": "IP54",
      },
    },
    {
      title: "AC-DC Drive Panels",
      description: "Precise motor speed control for industrial applications.",
      features: [
        "Energy-efficient operation",
        "Smooth acceleration/deceleration",
        "Overload protection",
        "Multiple control modes",
      ],
      image: "/assets/product2.png",
      category: "Automation",
      specifications: {
        "Drive Type": "VFD/Soft Starter",
        "Power Range": "0.75kW to 500kW",
        Control: "Local/Remote",
        "Protection Class": "IP42-IP54",
        Standards: "IEC 61800",
      },
    },
    {
      title: "Soft Starter Panels",
      description: "Reduced starting current and mechanical stress for motor applications.",
      features: [
        "Reduced mechanical stress",
        "Lower starting current",
        "Adjustable ramp times",
        "Motor protection features",
      ],
      image: "/assets/product1.png",
      category: "Automation",
      specifications: {
        "Current Rating": "Up to 1000A",
        "Voltage Rating": "Up to 690V",
        Control: "Digital with display",
        "Protection Class": "IP42-IP54",
        Standards: "IEC 60947-4-2",
      },
    },
  ]

const accessories = [
    {
      title: "Compact and Segregated Bus Duct",
      description: "Efficient power distribution systems for connecting transformers to switchgear.",
      features: [
        "Low power losses",
        "Compact design",
        "High short-circuit withstand",
        "Easy installation and maintenance",
      ],
      image: "/assets/product6.png",
      category: "Accessories",
      specifications: {
        "Current Rating": "Up to 6300A",
        "Voltage Rating": "Up to 1000V",
        "IP Rating": "IP42-IP54",
        "Short Circuit": "Up to 100kA",
        Standards: "IEC 61439-6",
      },
    },
    {
      title: "Cable Trays",
      description: "Organized cable management solutions for industrial and commercial applications.",
      features: ["Multiple configurations", "Corrosion-resistant materials", "Easy installation", "Scalable design"],
      image: "/assets/product6.png",
      category: "Accessories",
      specifications: {
        Material: "GI/SS/Aluminum",
        Width: "50mm to 900mm",
        Height: "25mm to 150mm",
        Thickness: "1.2mm to 3mm",
        Finish: "Hot Dip Galvanized",
      },
    },
    {
      title: "Electrical Enclosures & Junction Boxes",
      description: "Protective housings for electrical components in various environments.",
      features: [
        "IP-rated protection",
        "Customizable dimensions",
        "Multiple material options",
        "Weather-resistant designs",
      ],
      image: "/assets/enclosure-2.jpg",
      category: "Accessories",
      specifications: {
        Material: "MS/SS/GI",
        "IP Rating": "IP42-IP65",
        Sizes: "Custom as per requirement",
        Mounting: "Wall/Floor/Pole",
        Finish: "Powder Coated/Painted",
      },
    },
  ]

<section className="py-12 md:py-24">
        <div className="container px-4 md:px-6">
          <Tabs defaultValue="control-panels" value={activeTab} onValueChange={setActiveTab} className="w-full">
            <div className="mb-8 overflow-x-auto pb-2">
              <TabsList className="inline-flex w-full justify-start md:justify-center">
                <TabsTrigger value="control-panels" className="min-w-[150px]">
                  Control Panels
                </TabsTrigger>
                <TabsTrigger value="distribution" className="min-w-[150px]">
                  Distribution Systems
                </TabsTrigger>
                <TabsTrigger value="automation" className="min-w-[150px]">
                  Automation
                </TabsTrigger>
                <TabsTrigger value="accessories" className="min-w-[150px]">
                  Accessories
                </TabsTrigger>
              </TabsList>
            </div>

<TabsContent value="control-panels" className="mt-6 space-y-8">
              <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                {controlPanels.map((product, index) => (
                  <ProductCard key={index} product={product} />
                ))}
              </div>
            </TabsContent>

<TabsContent value="distribution" className="mt-6 space-y-8">
              <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                {distributionSystems.map((product, index) => (
                  <ProductCard key={index} product={product} />
                ))}
              </div>
            </TabsContent>

<TabsContent value="automation" className="mt-6 space-y-8">
              <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                {automationSystems.map((product, index) => (
                  <ProductCard key={index} product={product} />
                ))}
              </div>
            </TabsContent>

<TabsContent value="accessories" className="mt-6 space-y-8">
              <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                {accessories.map((product, index) => (
                  <ProductCard key={index} product={product} />
                ))}
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </section>

<section className="py-12 md:py-24 bg-primary/5">
        <div className="container px-4 md:px-6">
          <div className="mx-auto max-w-3xl text-center">
            <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">Need a Custom Solution?</h2>
            <p className="mt-4 text-muted-foreground md:text-lg">
              We specialize in designing and manufacturing custom electrical solutions tailored to your specific
              requirements.
            </p>
            <div className="mt-8 flex flex-col sm:flex-row justify-center gap-4">
              <Button asChild size="lg" className="group">
                <Link href="/contact">
                  Request a Quote
                  <ChevronRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-0.5" />
                </Link>
              </Button>
              <Button asChild variant="outline-primary" size="lg">
                <Link href="/contact">Contact Our Team</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import Image from "next/image"
import Link from "next/link"
import { CheckCircle, ChevronRight, Mail, MapPin, Phone } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { ProductCarousel } from "@/components/product-carousel"
import { ProductCard } from "@/components/product-card"

export default function Home() {
  const carouselImages = [
    { src: "/assets/product1.png", alt: "Power Control Centre Panel" },
    { src: "/assets/product2.png", alt: "Motor Control Centre Panel" },
    { src: "/assets/product3.png", alt: "Electrical Control Panel" },
    { src: "/assets/product4.png", alt: "Distribution Board" },
    { src: "/assets/product5.png", alt: "Fire Control Panel" },
    { src: "/assets/product6.png", alt: "Bus Duct System" },
    { src: "/assets/product7.png", alt: "MAHADEV TECH manufacturing facility" },
  ]

// Simplified product data for the homepage
  const products = [
    {
      title: "Power Control Centres (P.C.C.) Panels",
      description:
        "High-performance power distribution and control systems for industrial applications. Our PCC panels are designed to provide reliable power distribution with maximum safety and efficiency.",
      image: "/assets/product1.png",
      category: "Control Panels",
      features: [
        "Robust construction with high-quality sheet metal",
        "Customizable configurations to meet specific requirements",
        "High short-circuit withstand capacity up to 50kA",
        "Reliable operation in harsh environments",
      ],
    },
    {
      title: "Motor Control Centres (M.C.C.) Panels",
      description:
        "Centralized control for multiple motors with protection and automation capabilities. Our MCC panels provide comprehensive motor management with advanced protection features.",
      image: "/assets/product2.png",
      category: "Control Panels",
      features: [
        "Integrated motor protection with thermal and electronic overload relays",
        "Modular design with withdrawable modules for easy maintenance",
        "Easy maintenance with front access to all components",
        "Space-efficient layout for maximum component density",
      ],
    },
    {
      title: "Auto Mains Failure (A.M.F.) DG Panels",
      description:
        "Automatic power backup systems for seamless operation during mains failure. Our AMF panels ensure continuous power supply with minimal interruption.",
      image: "/assets/product5.png",
      category: "Control Panels",
      features: [
        "Automatic generator starting upon mains failure",
        "Smooth load transfer between mains and generator",
        "Programmable timers for startup and cooldown",
        "Comprehensive protection features for generator and load",
      ],
    },
    {
      title: "Distribution Boards",
      description:
        "Efficient power distribution solutions for commercial and industrial settings. Our distribution boards provide safe and reliable power distribution with optimal space utilization.",
      image: "/assets/product4.png",
      category: "Distribution",
      features: [
        "Compact design for space-constrained installations",
        "Multiple circuit configurations with MCBs, RCCBs, and MCCBs",
        "Reliable circuit protection with coordinated devices",
        "Easy installation with accessible terminations",
      ],
    },
    {
      title: "PLC Based Systems",
      description:
        "Advanced automation solutions with programmable logic controllers for DG synchronizing and load sharing. Our PLC systems provide intelligent control for complex applications.",
      image: "/assets/product3.png",
      category: "Automation",
      features: [
        "Automatic load sharing between multiple generators",
        "Seamless generator synchronization with mains and other generators",
        "Real-time monitoring of all system parameters",
        "Programmable operation sequences for different scenarios",
      ],
    },
    {
      title: "APFC Panels",
      description:
        "Automatic Power Factor Correction panels for improved energy efficiency and reduced electricity costs. Our APFC panels maintain optimal power factor under varying load conditions.",
      image: "/assets/product6.png",
      category: "Power Quality",
      features: [
        "Automatic switching of capacitor banks based on load",
        "Microprocessor-based controller for precise correction",
        "Harmonic filtering options for non-linear loads",
        "Individual capacitor protection with fuses or MCBs",
      ],
    },
  ]

return (
    <>
      <section className="relative overflow-hidden bg-gradient-to-b from-blue-50 via-blue-50/80 to-white dark:from-gray-900 dark:via-gray-900/80 dark:to-background">
        <div className="absolute inset-0 bg-grid-pattern bg-top [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
        <div className="container relative px-4 py-12 md:px-6 md:py-24 lg:py-32">
          <div className="grid gap-8 lg:grid-cols-2 lg:gap-12 items-center">
            <div className="space-y-6">
              <div className="inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm font-medium text-primary">
                <span className="flex h-2 w-2 rounded-full bg-primary mr-2"></span>
                Trusted by Industry Leaders
              </div>
              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
                Quality Electrical Solutions for Industrial Applications
              </h1>
              <p className="max-w-[600px] text-muted-foreground md:text-xl">
                MAHADEV TECH is a leading manufacturer of high-quality electrical control panels, distribution systems,
                and power management solutions. Serving industries since 1998.
              </p>
              <div className="flex flex-col sm:flex-row gap-3">
                <Button asChild size="lg" className="group">
                  <Link href="/products">
                    Explore Products
                    <ChevronRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-0.5" />
                  </Link>
                </Button>
                <Button asChild variant="outline-primary" size="lg">
                  <Link href="/contact">Contact Us</Link>
                </Button>
              </div>
            </div>
            <div className="mx-auto w-full max-w-[500px] lg:max-w-none h-[400px]">
              <ProductCarousel images={carouselImages} className="h-full" />
            </div>
          </div>
        </div>
      </section>

<section className="py-12 md:py-24 bg-muted/30">
        <div className="container px-4 md:px-6">
          <div className="grid gap-8 lg:grid-cols-2 lg:gap-12 items-center">
            <div className="space-y-5">
              <div className="inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm font-medium text-primary">
                Why Choose Us
              </div>
              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">
                Engineering Excellence & Quality Assurance
              </h2>
              <p className="text-muted-foreground md:text-lg">
                With years of experience in electrical manufacturing, MAHADEV TECH has established itself as a trusted
                partner for industries across India.
              </p>
              <ul className="grid gap-3 py-4">
                {[
                  "ISO 9001:2015 certified company",
                  "CPRI certified products",
                  "Up to IP-55 approved",
                  "Customized solutions for specific requirements",
                  "Rigorous quality control and testing",
                  "Experienced engineering team",
                  "Prompt after-sales service",
                ].map((point, index) => (
                  <li key={index} className="flex items-center gap-3">
                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10">
                      <CheckCircle className="h-4 w-4 text-primary" />
                    </div>
                    <span>{point}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="mx-auto w-full max-w-[500px] lg:max-w-none">
              <div className="relative h-[400px] overflow-hidden rounded-xl border border-border/40 shadow-lg">
                <Image
                  src="/assets/product7.png"
                  fill
                  alt="MAHADEV TECH manufacturing facility"
                  className="object-cover"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

<section className="py-12 md:py-24">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2 max-w-[800px]">
              <div className="inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm font-medium text-primary">
                Our Clients
              </div>
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">Trusted by Industry Leaders</h2>
              <p className="text-muted-foreground md:text-lg">
                We've provided electrical solutions to clients across various industries.
              </p>
            </div>
          </div>
          <div className="mx-auto grid max-w-5xl grid-cols-2 gap-8 py-12 md:grid-cols-4">
            {[
              { name: "Flovel Energy Pvt. Ltd.", logo: "/placeholder.svg" },
              { name: "SGS Control & Solution Pvt. Ltd.", logo: "/placeholder.svg" },
              { name: "PP Rolling Mill Pvt. Ltd.", logo: "/placeholder.svg" },
              { name: "PWD, Delhi", logo: "/assets/pwd-logo.jpg" },
              { name: "Escort Tractor", logo: "/placeholder.svg" },
              { name: "GKN Driveline", logo: "/placeholder.svg" },
              { name: "Sanden Vikas India Ltd.", logo: "/placeholder.svg" },
              { name: "Police Line, Mathura UP", logo: "/placeholder.svg" },
            ].map((client, index) => (
              <div key={index} className="flex items-center justify-center p-4 group">
                <div className="text-center">
                  <div className="relative h-20 w-40 mx-auto mb-3 overflow-hidden rounded-md border border-border/20 bg-background p-2">
                    <Image
                      src={client.logo || "/placeholder.svg"}
                      fill
                      alt={`${client.name} logo`}
                      className="mx-auto object-contain opacity-70 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0"
                    />
                  </div>
                  <p className="text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors duration-300">
                    {client.name}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

<section className="py-12 md:py-24 bg-primary/5">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2 max-w-[800px]">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">Get in Touch</h2>
              <p className="text-muted-foreground md:text-lg">
                Contact our team for inquiries, quotes, or technical support.
              </p>
            </div>
          </div>
          <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 py-12 md:grid-cols-3">
            <Card className="hover:shadow-md transition-all border-border/40 bg-card/50 backdrop-blur-sm">
              <CardContent className="flex flex-col items-center space-y-3 p-6">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                  <Phone className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-bold">Call Us</h3>
                <p className="text-center text-muted-foreground">Our team is available during business hours</p>
                <p className="text-center font-medium">+91 9818670416</p>
              </CardContent>
            </Card>
            <Card className="hover:shadow-md transition-all border-border/40 bg-card/50 backdrop-blur-sm">
              <CardContent className="flex flex-col items-center space-y-3 p-6">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                  <Mail className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-bold">Email Us</h3>
                <p className="text-center text-muted-foreground">Send us an email for any inquiries</p>
                <p className="text-center font-medium">mahadevtechindia@gmail.com</p>
              </CardContent>
            </Card>
            <Card className="hover:shadow-md transition-all border-border/40 bg-card/50 backdrop-blur-sm">
              <CardContent className="flex flex-col items-center space-y-3 p-6">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                  <MapPin className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-bold">Visit Us</h3>
                <p className="text-center text-muted-foreground">Our office and manufacturing facility</p>
                <p className="text-center font-medium">Faridabad, Haryana</p>
              </CardContent>
            </Card>
          </div>
          <div className="text-center">
            <Button asChild size="lg">
              <Link href="/contact">Contact Us Now</Link>
            </Button>
          </div>
        </div>
      </section>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/product-card.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { ArrowRight, ChevronRight } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"

interface ProductCardProps {
  product: {
    title: string
    description: string
    image: string
    features?: string[]
    specifications?: Record<string, string>
    category?: string
  }
  variant?: "default" | "compact"
  className?: string
}

// Helper function to convert title to slug
function titleToSlug(title: string): string {
  return title
    .toLowerCase()
    .replace(/[^\w\s]/g, "")
    .replace(/\s+/g, "-")
}

export function ProductCard({ product, variant = "default", className }: ProductCardProps) {
  const [isHovered, setIsHovered] = useState(false)

// Generate slug from product title
  const slug = titleToSlug(product.title.split("(")[0].trim())

return (
    <div
      className={cn(
        "group relative flex flex-col overflow-hidden rounded-xl border border-border/40 bg-card shadow-sm transition-all duration-200 hover:shadow-md hover:border-primary/20 hover:-translate-y-1",
        className,
      )}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="relative aspect-[4/3] w-full overflow-hidden bg-muted/30">
        <div
          className={cn(
            "absolute inset-0 transition-transform duration-500 ease-in-out",
            isHovered ? "scale-105" : "scale-100",
          )}
        >
          <Image src={product.image || "/placeholder.svg"} alt={product.title} fill className="object-cover" />
        </div>
        {product.category && (
          <Badge className="absolute left-3 top-3 bg-primary/80 hover:bg-primary/90 backdrop-blur-sm">
            {product.category}
          </Badge>
        )}
      </div>

<div className="flex flex-col space-y-2.5 p-4">
        <Link href={`/products/${slug}`}>
          <h3 className="line-clamp-2 text-lg font-semibold leading-tight tracking-tight hover:text-primary cursor-pointer transition-colors">
            {product.title}
          </h3>
        </Link>

<p className="line-clamp-2 text-sm text-muted-foreground">{product.description}</p>

{variant === "default" && product.features && product.features.length > 0 && (
          <div className="mt-1 space-y-1.5">
            <p className="text-xs font-medium text-muted-foreground">Key Features:</p>
            <ul className="space-y-1">
              {product.features.slice(0, 2).map((feature, i) => (
                <li key={i} className="flex items-start text-xs">
                  <ChevronRight className="h-3.5 w-3.5 text-primary shrink-0 mt-px" />
                  <span className="text-muted-foreground">{feature}</span>
                </li>
              ))}
              {product.features.length > 2 && (
                <li className="text-xs text-primary">
                  <Link href={`/products/${slug}`} className="cursor-pointer hover:underline">
                    + {product.features.length - 2} more features
                  </Link>
                </li>
              )}
            </ul>
          </div>
        )}
      </div>

<div className="mt-auto flex items-center justify-between border-t border-border/40 p-4 pt-3">
        <Link
          href={`/products/${slug}`}
          className="group/link inline-flex items-center text-sm font-medium text-primary transition-colors hover:text-primary/80"
        >
          View Details
          <ArrowRight className="ml-1 h-4 w-4 transition-transform group-hover/link:translate-x-0.5" />
        </Link>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/products/[slug]/page.tsx" isEdit="true" isMerged="true"
import Image from "next/image"
import Link from "next/link"
import { ChevronRight, ArrowLeft, CheckCircle } from "lucide-react"
import { notFound } from "next/navigation"

import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

// Import the product data
import { products } from "@/lib/product-data"

// Define the page props type
interface ProductDetailPageProps {
  params: {
    slug: string
  }
}

export default function ProductDetailPage({ params }: ProductDetailPageProps) {
  const { slug } = params
  const product = products[slug]

if (!product) {
    notFound()
  }

// Get related products data
  const relatedProductsData = product.relatedProducts
    ? product.relatedProducts
        .filter((relatedSlug) => products[relatedSlug]) // Filter out any invalid slugs
        .map((relatedSlug) => ({
          slug: relatedSlug,
          ...products[relatedSlug],
        }))
    : []

return (
    <>
      <section className="w-full py-12 md:py-24 bg-gradient-to-b from-blue-50 via-blue-50/80 to-white dark:from-gray-900 dark:via-gray-900/80 dark:to-background">
        <div className="container px-4 md:px-6">
          <div className="mb-8">
            <Link
              href="/products"
              className="inline-flex items-center text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Products
            </Link>
          </div>

<div className="grid gap-8 lg:grid-cols-2 lg:gap-12 items-start">
            <div className="relative aspect-square overflow-hidden rounded-xl border border-border/40 shadow-lg bg-background">
              <Image
                src={product.image || "/placeholder.svg"}
                alt={product.title}
                fill
                className="object-cover object-center"
                priority
              />
              {product.category && (
                <Badge className="absolute left-4 top-4 bg-primary/80 hover:bg-primary/90 backdrop-blur-sm">
                  {product.category}
                </Badge>
              )}
            </div>

<div className="space-y-6">
              <div>
                <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl">{product.title}</h1>
                <p className="mt-4 text-muted-foreground">{product.description}</p>
              </div>

<div className="space-y-4">
                <h3 className="text-xl font-semibold">Key Features</h3>
                <ul className="grid gap-2 sm:grid-cols-2">
                  {product.features.map((feature, index) => (
                    <li key={index} className="flex items-start gap-2">
                      <CheckCircle className="h-5 w-5 text-primary shrink-0 mt-0.5" />
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>

<div className="pt-4 flex flex-col sm:flex-row gap-4">
                <Button asChild size="lg" className="w-full sm:w-auto">
                  <Link href="/contact">Request a Quote</Link>
                </Button>
                <Button asChild variant="outline-primary" size="lg" className="w-full sm:w-auto">
                  <Link href="/contact">Contact Sales Team</Link>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

<section className="py-12 md:py-24">
        <div className="container px-4 md:px-6">
          <Tabs defaultValue="specifications" className="w-full">
            <TabsList className="grid w-full grid-cols-3 mb-8">
              <TabsTrigger value="specifications">Specifications</TabsTrigger>
              <TabsTrigger value="applications">Applications</TabsTrigger>
              <TabsTrigger value="documentation">Documentation</TabsTrigger>
            </TabsList>

<TabsContent value="specifications" className="space-y-6">
              <div className="rounded-lg border bg-card p-6">
                <h3 className="text-xl font-semibold mb-4">Technical Specifications</h3>
                <div className="grid gap-4 sm:grid-cols-2">
                  {product.specifications &&
                    Object.entries(product.specifications).map(([key, value]) => (
                      <div key={key} className="flex justify-between border-b pb-2">
                        <span className="font-medium">{key}:</span>
                        <span className="text-muted-foreground">{value}</span>
                      </div>
                    ))}
                </div>
              </div>
            </TabsContent>

<TabsContent value="applications" className="space-y-6">
              <div className="rounded-lg border bg-card p-6">
                <h3 className="text-xl font-semibold mb-4">Common Applications</h3>
                <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3">
                  {product.applications &&
                    product.applications.map((application, index) => (
                      <div key={index} className="flex items-start gap-2">
                        <CheckCircle className="h-5 w-5 text-primary shrink-0 mt-0.5" />
                        <span>{application}</span>
                      </div>
                    ))}
                </div>
              </div>
            </TabsContent>

<TabsContent value="documentation" className="space-y-6">
              <div className="rounded-lg border bg-card p-6">
                <h3 className="text-xl font-semibold mb-4">Product Documentation</h3>
                <p className="text-muted-foreground mb-4">
                  Download technical documentation and resources for {product.title}.
                </p>
                <div className="space-y-4">
                  <Button variant="outline" className="w-full sm:w-auto">
                    Download Technical Datasheet
                  </Button>
                  <Button variant="outline" className="w-full sm:w-auto">
                    Download Installation Guide
                  </Button>
                  <Button variant="outline" className="w-full sm:w-auto">
                    Download CAD Drawings
                  </Button>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </section>

{relatedProductsData.length > 0 && (
        <section className="py-12 md:py-24 bg-muted/30">
          <div className="container px-4 md:px-6">
            <h2 className="text-2xl font-bold tracking-tighter sm:text-3xl text-center mb-8">Related Products</h2>
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              {relatedProductsData.map((relatedProduct, index) => (
                <Card
                  key={index}
                  className="overflow-hidden border-border/40 hover:shadow-md transition-all hover:border-primary/20"
                >
                  <div className="relative aspect-[4/3] w-full overflow-hidden">
                    <Image
                      src={relatedProduct.image || "/placeholder.svg"}
                      alt={relatedProduct.title}
                      fill
                      className="object-cover"
                    />
                    {relatedProduct.category && (
                      <Badge className="absolute left-3 top-3 bg-primary/80 hover:bg-primary/90 backdrop-blur-sm">
                        {relatedProduct.category}
                      </Badge>
                    )}
                  </div>
                  <CardContent className="p-4">
                    <h3 className="text-lg font-semibold line-clamp-1">{relatedProduct.title}</h3>
                    <p className="text-sm text-muted-foreground line-clamp-2 mt-1">{relatedProduct.description}</p>
                    <Button asChild variant="link" className="p-0 h-auto mt-2">
                      <Link href={`/products/${relatedProduct.slug}`} className="inline-flex items-center text-primary">
                        View Details
                        <ChevronRight className="ml-1 h-4 w-4" />
                      </Link>
                    </Button>
                  </CardContent>
                </Card>
              ))}
            </div>
            <div className="mt-8 text-center">
              <Button asChild size="lg">
                <Link href="/products">View All Products</Link>
              </Button>
            </div>
          </div>
        </section>
      )}
    </>
  )
}
[V0_FILE]typescript:file="lib/product-data.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
// Product data store
export const products = {
  "power-control-centres": {
    title: "Power Control Centres (P.C.C.) Panels",
    description:
      "High-performance power distribution and control systems for industrial applications. Our PCC panels are designed to provide reliable power distribution with maximum safety and efficiency.",
    image: "/assets/product1.png",
    category: "Control Panels",
    features: [
      "Robust construction with high-quality sheet metal",
      "Customizable configurations to meet specific requirements",
      "High short-circuit withstand capacity up to 50kA",
      "Reliable operation in harsh environments",
      "IP54 protection available for dust and water resistance",
      "Modular design for easy maintenance and future expansion",
    ],
    specifications: {
      "Voltage Rating": "Up to 1000V",
      "Current Rating": "Up to 6300A",
      "Protection Class": "IP42-IP54",
      Form: "Form 1-4b",
      Standards: "IS/IEC 61439-1&2",
    },
    applications: [
      "Industrial manufacturing plants",
      "Commercial buildings",
      "Data centers",
      "Healthcare facilities",
      "Educational institutions",
      "Infrastructure projects",
    ],
    relatedProducts: ["motor-control-centres", "auto-mains-failure-panels", "distribution-boards"],
  },
  "motor-control-centres": {
    title: "Motor Control Centres (M.C.C.) Panels",
    description:
      "Centralized control for multiple motors with protection and automation capabilities. Our MCC panels provide comprehensive motor management with advanced protection features.",
    image: "/assets/product2.png",
    category: "Control Panels",
    features: [
      "Integrated motor protection with thermal and electronic overload relays",
      "Modular design with withdrawable modules for easy maintenance",
      "Easy maintenance with front access to all components",
      "Space-efficient layout for maximum component density",
      "Available with variable frequency drives for speed control",
      "Remote monitoring and control capabilities",
    ],
    specifications: {
      "Voltage Rating": "Up to 690V",
      "Current Rating": "Up to 630A per feeder",
      "Protection Class": "IP42-IP54",
      Form: "Form 3b, 4a, 4b",
      Standards: "IS/IEC 61439-1&2",
    },
    applications: [
      "Manufacturing facilities",
      "Water treatment plants",
      "HVAC systems",
      "Conveyor systems",
      "Pumping stations",
      "Mining operations",
    ],
    relatedProducts: ["power-control-centres", "auto-mains-failure-panels", "plc-based-systems"],
  },
  "auto-mains-failure-panels": {
    title: "Auto Mains Failure (A.M.F.) DG Panels",
    description:
      "Automatic power backup systems for seamless operation during mains failure. Our AMF panels ensure continuous power supply with minimal interruption.",
    image: "/assets/product5.png",
    category: "Control Panels",
    features: [
      "Automatic generator starting upon mains failure",
      "Smooth load transfer between mains and generator",
      "Programmable timers for startup and cooldown",
      "Comprehensive protection features for generator and load",
      "Digital display for system parameters and status",
      "Manual override capability for maintenance",
    ],
    specifications: {
      "Voltage Rating": "Up to 440V",
      "Current Rating": "Up to 3200A",
      "Protection Class": "IP42-IP54",
      Controller: "Microprocessor based",
      Standards: "IS/IEC 61439-1&2",
    },
    applications: [
      "Hospitals and healthcare facilities",
      "Data centers",
      "Telecommunications",
      "Commercial buildings",
      "Industrial plants",
      "Critical infrastructure",
    ],
    relatedProducts: ["power-control-centres", "motor-control-centres", "distribution-boards"],
  },
  "distribution-boards": {
    title: "Distribution Boards",
    description:
      "Efficient power distribution solutions for commercial and industrial settings. Our distribution boards provide safe and reliable power distribution with optimal space utilization.",
    image: "/assets/product4.png",
    category: "Distribution",
    features: [
      "Compact design for space-constrained installations",
      "Multiple circuit configurations with MCBs, RCCBs, and MCCBs",
      "Reliable circuit protection with coordinated devices",
      "Easy installation with accessible terminations",
      "Available in single phase and three phase configurations",
      "Surface or flush mounting options",
    ],
    specifications: {
      "Voltage Rating": "Up to 440V",
      "Current Rating": "Up to 630A",
      "Protection Class": "IP42-IP54",
      Ways: "4 to 24 ways",
      Standards: "IS/IEC 61439-3",
    },
    applications: [
      "Residential buildings",
      "Commercial complexes",
      "Office spaces",
      "Retail establishments",
      "Light industrial applications",
      "Educational institutions",
    ],
    relatedProducts: ["power-control-centres", "meter-boards", "feeder-pillars"],
  },
  "plc-based-systems": {
    title: "PLC Based Systems",
    description:
      "Advanced automation solutions with programmable logic controllers for DG synchronizing and load sharing. Our PLC systems provide intelligent control for complex applications.",
    image: "/assets/product3.png",
    category: "Automation",
    features: [
      "Automatic load sharing between multiple generators",
      "Seamless generator synchronization with mains and other generators",
      "Real-time monitoring of all system parameters",
      "Programmable operation sequences for different scenarios",
      "Data logging and event recording for analysis",
      "Remote monitoring and control via SCADA integration",
    ],
    specifications: {
      "PLC Type": "Siemens/Allen Bradley/Schneider",
      "I/O Capacity": "Scalable as per requirement",
      Communication: "Modbus/Profibus/Ethernet",
      HMI: "Touch screen interface",
      "Protection Class": "IP54",
    },
    applications: [
      "Power generation facilities",
      "Manufacturing automation",
      "Process control systems",
      "Building management systems",
      "Water and wastewater treatment",
      "Oil and gas industry",
    ],
    relatedProducts: ["motor-control-centres", "ac-dc-drive-panels", "auto-mains-failure-panels"],
  },
  "apfc-panels": {
    title: "APFC Panels",
    description:
      "Automatic Power Factor Correction panels for improved energy efficiency and reduced electricity costs. Our APFC panels maintain optimal power factor under varying load conditions.",
    image: "/assets/product6.png",
    category: "Power Quality",
    features: [
      "Automatic switching of capacitor banks based on load",
      "Microprocessor-based controller for precise correction",
      "Harmonic filtering options for non-linear loads",
      "Individual capacitor protection with fuses or MCBs",
      "Digital display for power factor and system parameters",
      "Compact design with high-quality capacitors",
    ],
    specifications: {
      "Voltage Rating": "Up to 440V",
      "Capacitor Rating": "5 to 500 kVAR",
      Controller: "6 to 12 stage microprocessor",
      "Protection Class": "IP42-IP54",
      Standards: "IS/IEC 61439-1&2",
    },
    applications: [
      "Industrial facilities with inductive loads",
      "Commercial buildings",
      "Manufacturing plants",
      "Textile industries",
      "Metal processing units",
      "Facilities with penalty for low power factor",
    ],
    relatedProducts: ["power-control-centres", "motor-control-centres", "distribution-boards"],
  },
  "meter-boards": {
    title: "Meter Boards",
    description: "Centralized metering solutions for multi-tenant buildings and industrial complexes.",
    image: "/assets/enclosure-1.jpg",
    category: "Distribution",
    features: [
      "Accurate energy monitoring",
      "Tamper-proof design",
      "Multiple meter configurations",
      "Weather-resistant enclosures",
      "Customizable layouts for different requirements",
      "Compatible with various meter types",
    ],
    specifications: {
      "Voltage Rating": "Up to 440V",
      "Current Rating": "Up to 100A per meter",
      "Protection Class": "IP42-IP54",
      Meters: "Up to 24 meters",
      Standards: "IS/IEC 61439-3",
    },
    applications: [
      "Residential apartments",
      "Commercial complexes",
      "Shopping malls",
      "Industrial estates",
      "Office buildings",
      "Mixed-use developments",
    ],
    relatedProducts: ["distribution-boards", "feeder-pillars", "power-control-centres"],
  },
  "feeder-pillars": {
    title: "Feeder Pillars",
    description: "Outdoor power distribution units for street lighting and public infrastructure.",
    image: "/assets/enclosure-2.jpg",
    category: "Distribution",
    features: [
      "Weather-proof construction",
      "Vandal-resistant design",
      "Multiple outgoing circuits",
      "Integrated protection",
      "Durable construction for outdoor environments",
      "Lockable access for security",
    ],
    specifications: {
      "Voltage Rating": "Up to 440V",
      "Current Rating": "Up to 630A",
      "Protection Class": "IP55-IP65",
      Material: "Stainless Steel/GI",
      Standards: "IS/IEC 61439-5",
    },
    applications: [
      "Street lighting systems",
      "Traffic signal control",
      "Public parks and gardens",
      "Highway infrastructure",
      "Railway platforms",
      "Outdoor event spaces",
    ],
    relatedProducts: ["distribution-boards", "meter-boards", "power-control-centres"],
  },
  "ac-dc-drive-panels": {
    title: "AC-DC Drive Panels",
    description: "Precise motor speed control for industrial applications.",
    image: "/assets/product2.png",
    category: "Automation",
    features: [
      "Energy-efficient operation",
      "Smooth acceleration/deceleration",
      "Overload protection",
      "Multiple control modes",
      "Advanced diagnostics and monitoring",
      "Customizable for specific applications",
    ],
    specifications: {
      "Drive Type": "VFD/Soft Starter",
      "Power Range": "0.75kW to 500kW",
      Control: "Local/Remote",
      "Protection Class": "IP42-IP54",
      Standards: "IEC 61800",
    },
    applications: [
      "Conveyor systems",
      "Pump control",
      "Fan and blower applications",
      "Machine tools",
      "Textile machinery",
      "Material handling equipment",
    ],
    relatedProducts: ["motor-control-centres", "plc-based-systems", "soft-starter-panels"],
  },
  "soft-starter-panels": {
    title: "Soft Starter Panels",
    description: "Reduced starting current and mechanical stress for motor applications.",
    image: "/assets/product1.png",
    category: "Automation",
    features: [
      "Reduced mechanical stress",
      "Lower starting current",
      "Adjustable ramp times",
      "Motor protection features",
      "Bypass contactor for continuous operation",
      "Compact design for space-constrained installations",
    ],
    specifications: {
      "Current Rating": "Up to 1000A",
      "Voltage Rating": "Up to 690V",
      Control: "Digital with display",
      "Protection Class": "IP42-IP54",
      Standards: "IEC 60947-4-2",
    },
    applications: ["Water pumps", "Compressors", "Conveyors", "Fans and blowers", "Crushers and mills", "Centrifuges"],
    relatedProducts: ["motor-control-centres", "ac-dc-drive-panels", "plc-based-systems"],
  },
  "bus-duct-systems": {
    title: "Compact and Segregated Bus Duct",
    description: "Efficient power distribution systems for connecting transformers to switchgear.",
    image: "/assets/product6.png",
    category: "Accessories",
    features: [
      "Low power losses",
      "Compact design",
      "High short-circuit withstand",
      "Easy installation and maintenance",
      "Reduced voltage drop",
      "Flexible configuration options",
    ],
    specifications: {
      "Current Rating": "Up to 6300A",
      "Voltage Rating": "Up to 1000V",
      "IP Rating": "IP42-IP54",
      "Short Circuit": "Up to 100kA",
      Standards: "IEC 61439-6",
    },
    applications: [
      "Power plants",
      "Substations",
      "Data centers",
      "High-rise buildings",
      "Industrial facilities",
      "Commercial complexes",
    ],
    relatedProducts: ["power-control-centres", "motor-control-centres", "distribution-boards"],
  },
  "cable-trays": {
    title: "Cable Trays",
    description: "Organized cable management solutions for industrial and commercial applications.",
    image: "/assets/product6.png",
    category: "Accessories",
    features: [
      "Multiple configurations",
      "Corrosion-resistant materials",
      "Easy installation",
      "Scalable design",
      "Excellent heat dissipation",
      "Various mounting options",
    ],
    specifications: {
      Material: "GI/SS/Aluminum",
      Width: "50mm to 900mm",
      Height: "25mm to 150mm",
      Thickness: "1.2mm to 3mm",
      Finish: "Hot Dip Galvanized",
    },
    applications: [
      "Industrial facilities",
      "Commercial buildings",
      "Data centers",
      "Power plants",
      "Oil and gas facilities",
      "Infrastructure projects",
    ],
    relatedProducts: ["bus-duct-systems", "electrical-enclosures", "power-control-centres"],
  },
  "electrical-enclosures": {
    title: "Electrical Enclosures & Junction Boxes",
    description: "Protective housings for electrical components in various environments.",
    image: "/assets/enclosure-2.jpg",
    category: "Accessories",
    features: [
      "IP-rated protection",
      "Customizable dimensions",
      "Multiple material options",
      "Weather-resistant designs",
      "Various mounting configurations",
      "Secure locking mechanisms",
    ],
    specifications: {
      Material: "MS/SS/GI",
      "IP Rating": "IP42-IP65",
      Sizes: "Custom as per requirement",
      Mounting: "Wall/Floor/Pole",
      Finish: "Powder Coated/Painted",
    },
    applications: [
      "Industrial control systems",
      "Outdoor installations",
      "Telecommunications",
      "Building services",
      "Transportation infrastructure",
      "Utility services",
    ],
    relatedProducts: ["cable-trays", "distribution-boards", "feeder-pillars"],
  },
}

// Add TypeScript type for the products
export type Product = {
  title: string
  description: string
  image: string
  category?: string
  features: string[]
  specifications: Record<string, string>
  applications?: string[]
  relatedProducts?: string[]
}

export type ProductsData = Record<string, Product>
[V0_FILE]typescript:file="lib/mongodb.ts" isMerged="true"
import "server-only"
import { MongoClient } from "mongodb"

const uri = process.env.MONGODB_URI || ""

declare global {
  // eslint-disable-next-line no-var
  var _mongoClient: MongoClient | undefined
}

export async function getMongoClient() {
  if (!uri) {
    // No URI configured
    return null
  }
  if (!global._mongoClient) {
    const client = new MongoClient(uri)
    await client.connect()
    global._mongoClient = client
  }
  return global._mongoClient
}

export function getDbName() {
  return process.env.MONGODB_DB || "mahadev_tech"
}
[V0_FILE]typescript:file="lib/fallback-store.ts" isMerged="true"
import "server-only"

type Submission = {
  name: string
  email: string
  phone?: string
  message: string
  createdAt: string
}

declare global {
  // eslint-disable-next-line no-var
  var _submissionsCache: Submission[] | undefined
}

function ensureStore() {
  if (!global._submissionsCache) {
    global._submissionsCache = []
  }
  return global._submissionsCache
}

export async function addSubmissionFallback(data: Submission) {
  const store = ensureStore()
  store.push(data)
}

export async function querySubmissionsFallback(params: {
  search?: string
  sortBy?: "name" | "createdAt"
  sortDir?: "asc" | "desc"
  page?: number
  pageSize?: number
}) {
  const store = ensureStore()
  const { search = "", sortBy = "createdAt", sortDir = "desc", page = 1, pageSize = 10 } = params

let items = store.slice()

if (search) {
    const q = search.toLowerCase()
    items = items.filter(
      (s) =>
        s.name.toLowerCase().includes(q) ||
        s.email.toLowerCase().includes(q) ||
        (s.phone || "").toLowerCase().includes(q) ||
        s.message.toLowerCase().includes(q),
    )
  }

items.sort((a, b) => {
    let cmp = 0
    if (sortBy === "name") {
      cmp = a.name.localeCompare(b.name)
    } else {
      cmp = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
    }
    return sortDir === "asc" ? cmp : -cmp
  })

const total = items.length
  const start = (page - 1) * pageSize
  const paged = items.slice(start, start + pageSize)

return { items: paged, total }
}
[V0_FILE]typescript:file="lib/auth.ts" isMerged="true"
import "server-only"
import crypto from "crypto"
import { cookies } from "next/headers"

const ADMIN_USERNAME = process.env.ADMIN_USERNAME || "admin"
const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD || "admin"
const ADMIN_SECRET = process.env.ADMIN_SECRET || "dev-secret-change-me"

// very small helper; in production set env vars above on Vercel
export function validateCredentials(username: string, password: string) {
  return username === ADMIN_USERNAME && password === ADMIN_PASSWORD
}

function sign(payload: string) {
  return crypto.createHmac("sha256", ADMIN_SECRET).update(payload).digest("hex")
}

export function createSessionToken(username: string) {
  const payload = JSON.stringify({ u: username, iat: Date.now() })
  const sig = sign(payload)
  const token = Buffer.from(payload).toString("base64") + "." + sig
  return token
}

export function verifySessionToken(token?: string | null, maxAgeMs = 7 * 24 * 60 * 60 * 1000) {
  if (!token) return false
  const [b64, sig] = token.split(".")
  if (!b64 || !sig) return false
  const payload = Buffer.from(b64, "base64").toString("utf8")
  const expected = sign(payload)
  if (expected !== sig) return false
  try {
    const data = JSON.parse(payload) as { u: string; iat: number }
    if (!data?.iat || Date.now() - data.iat > maxAgeMs) return false
    return true
  } catch {
    return false
  }
}

export async function setSessionCookie(token: string) {
  cookies().set("admin_session", token, {
    httpOnly: true,
    sameSite: "lax",
    secure: true,
    path: "/",
    maxAge: 7 * 24 * 60 * 60,
  })
}

export async function clearSessionCookie() {
  cookies().set("admin_session", "", { path: "/", maxAge: 0 })
}

export function isAuthenticated() {
  const token = cookies().get("admin_session")?.value
  return verifySessionToken(token)
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
import { redirect } from "next/navigation"

export default function AdminIndex() {
  redirect("/admin/submissions")
}
[V0_FILE]typescriptreact:file="app/admin/login/actions.ts" isMerged="true"
"use server"

import { createSessionToken, setSessionCookie, validateCredentials } from "@/lib/auth"

export async function loginAction(formData: FormData) {
  const username = String(formData.get("username") || "")
  const password = String(formData.get("password") || "")

const ok = validateCredentials(username, password)
  if (!ok) {
    return { success: false, error: "Invalid credentials" }
  }
  const token = createSessionToken(username)
  await setSessionCookie(token)
  return { success: true }
}
[V0_FILE]typescriptreact:file="app/admin/login/page.tsx" isMerged="true"
"use client"

import { useState, useTransition } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

import { loginAction } from "./actions"

export default function AdminLoginPage() {
  const [error, setError] = useState<string | null>(null)
  const [isPending, startTransition] = useTransition()
  const router = useRouter()

return (
    <div className="min-h-[80vh] flex items-center justify-center px-4">
      <Card className="w-full max-w-sm">
        <CardHeader>
          <CardTitle>Admin Login</CardTitle>
        </CardHeader>
        <CardContent>
          <form
            action={(formData) => {
              setError(null)
              startTransition(async () => {
                const res = await loginAction(formData)
                if (!res.success) {
                  setError(res.error || "Login failed")
                  return
                }
                router.replace("/admin/submissions")
              })
            }}
            className="space-y-4"
          >
            <div className="space-y-2">
              <Label htmlFor="username">Username</Label>
              <Input id="username" name="username" placeholder="Enter username" required />
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input id="password" name="password" type="password" placeholder="Enter password" required />
            </div>
            {error && <p className="text-sm text-destructive">{error}</p>}
            <Button type="submit" className="w-full" disabled={isPending}>
              {isPending ? "Signing in..." : "Sign In"}
            </Button>
            <p className="text-xs text-muted-foreground">
              Tip: Set ADMIN_USERNAME, ADMIN_PASSWORD, and ADMIN_SECRET in your Vercel Project Settings.
            </p>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/(dashboard)/layout.tsx" isMerged="true"
import type { ReactNode } from "react"
import Link from "next/link"
import { redirect } from "next/navigation"
import { isAuthenticated, clearSessionCookie } from "@/lib/auth"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { Inbox, Settings, LogOut } from "lucide-react"

export default function AdminDashboardLayout({ children }: { children: ReactNode }) {
  const authed = isAuthenticated()
  if (!authed) {
    redirect("/admin/login")
  }

async function LogoutButton() {
    "use server"
    await clearSessionCookie()
    redirect("/admin/login")
  }

return (
    <div className="flex min-h-[80vh]">
      <aside className="hidden md:flex w-60 flex-col border-r bg-card">
        <div className="p-4 border-b">
          <span className="font-bold tracking-tight text-primary">Admin</span>
        </div>
        <nav className="flex-1 p-2">
          <Link
            href="/admin/submissions"
            className={cn(
              "flex items-center gap-2 px-3 py-2 rounded-md text-sm hover:bg-accent hover:text-accent-foreground",
            )}
          >
            <Inbox className="h-4 w-4" />
            Submissions
          </Link>
          <Link
            href="/admin/settings"
            className={cn(
              "mt-1 flex items-center gap-2 px-3 py-2 rounded-md text-sm hover:bg-accent hover:text-accent-foreground",
            )}
          >
            <Settings className="h-4 w-4" />
            Settings
          </Link>
        </nav>
        <form action={LogoutButton} className="p-2 border-t">
          <Button type="submit" variant="outline" className="w-full bg-transparent">
            <LogOut className="mr-2 h-4 w-4" />
            Logout
          </Button>
        </form>
      </aside>
      <div className="flex-1">
        <header className="md:hidden sticky top-0 z-10 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="container flex h-14 items-center justify-between">
            <span className="font-semibold">Admin</span>
            <form
              action={async () => {
                "use server"
                await clearSessionCookie()
                redirect("/admin/login")
              }}
            >
              <Button type="submit" size="sm" variant="outline">
                <LogOut className="mr-2 h-4 w-4" />
                Logout
              </Button>
            </form>
          </div>
        </header>
        <main className="container p-4 md:p-6">{children}</main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/(dashboard)/submissions/page.tsx" isMerged="true"
"use client"

import { useEffect, useMemo, useState } from "react"
import { Download, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"

type Submission = {
  name: string
  email: string
  phone?: string
  message: string
  createdAt: string
}

type ApiResponse = {
  items: Submission[]
  total: number
}

export default function SubmissionsPage() {
  const [data, setData] = useState<Submission[]>([])
  const [total, setTotal] = useState(0)
  const [search, setSearch] = useState("")
  const [sortBy, setSortBy] = useState<"name" | "createdAt">("createdAt")
  const [sortDir, setSortDir] = useState<"asc" | "desc">("desc")
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [loading, setLoading] = useState(false)

// debounced search
  const [searchInput, setSearchInput] = useState("")
  useEffect(() => {
    const t = setTimeout(() => setSearch(searchInput), 300)
    return () => clearTimeout(t)
  }, [searchInput])

async function fetchData() {
    setLoading(true)
    const params = new URLSearchParams({
      page: String(page),
      pageSize: String(pageSize),
      sortBy,
      sortDir,
    })
    if (search) params.set("search", search)
    const res = await fetch(`/api/admin/submissions?${params.toString()}`, { cache: "no-store" })
    const json: ApiResponse = await res.json()
    setData(json.items)
    setTotal(json.total)
    setLoading(false)
  }

useEffect(() => {
    fetchData()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [search, sortBy, sortDir, page, pageSize])

const totalPages = useMemo(() => Math.max(1, Math.ceil(total / pageSize)), [total, pageSize])

function toggleSort(col: "name" | "createdAt") {
    if (sortBy !== col) {
      setSortBy(col)
      setSortDir("asc")
    } else {
      setSortDir((d) => (d === "asc" ? "desc" : "asc"))
    }
    setPage(1)
  }

async function exportFile(format: "csv" | "xlsx") {
    const params = new URLSearchParams()
    if (search) params.set("search", search)
    params.set("sortBy", sortBy)
    params.set("sortDir", sortDir)
    params.set("format", format)
    const res = await fetch(`/api/admin/submissions/export?${params.toString()}`)
    const blob = await res.blob()
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `submissions.${format === "csv" ? "csv" : "xlsx"}`
    a.click()
    URL.revokeObjectURL(url)
  }

return (
    <div className="space-y-6">
      <div className="grid gap-4 sm:grid-cols-2">
        <Card>
          <CardContent className="p-4">
            <div className="text-sm text-muted-foreground">Total Submissions</div>
            <div className="mt-1 text-3xl font-bold">{total}</div>
          </CardContent>
        </Card>
      </div>

<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="relative max-w-md w-full">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search by name, email, phone, message..."
            className="pl-8"
            value={searchInput}
            onChange={(e) => {
              setPage(1)
              setSearchInput(e.target.value)
            }}
          />
        </div>
        <div className="flex gap-2">
          <Button variant="outline" onClick={() => exportFile("csv")}>
            <Download className="mr-2 h-4 w-4" />
            Export CSV
          </Button>
          <Button onClick={() => exportFile("xlsx")}>
            <Download className="mr-2 h-4 w-4" />
            Export Excel
          </Button>
        </div>
      </div>

<div className="overflow-x-auto rounded-md border">
        <table className="min-w-[700px] w-full text-sm">
          <thead className="bg-muted/50">
            <tr>
              <th
                className="text-left px-3 py-2 cursor-pointer select-none"
                onClick={() => toggleSort("name")}
                aria-label="Sort by name"
              >
                <div className="inline-flex items-center gap-1">
                  Name
                  <SortIcon active={sortBy === "name"} dir={sortDir} />
                </div>
              </th>
              <th className="text-left px-3 py-2">Email</th>
              <th className="text-left px-3 py-2">Phone</th>
              <th className="text-left px-3 py-2">Message</th>
              <th
                className="text-left px-3 py-2 cursor-pointer select-none"
                onClick={() => toggleSort("createdAt")}
                aria-label="Sort by date"
              >
                <div className="inline-flex items-center gap-1">
                  Date
                  <SortIcon active={sortBy === "createdAt"} dir={sortDir} />
                </div>
              </th>
            </tr>
          </thead>
          <tbody>
            {!loading &&
              data.map((row, idx) => (
                <tr key={idx} className={cn("border-t")}>
                  <td className="px-3 py-2 font-medium">{row.name}</td>
                  <td className="px-3 py-2">{row.email}</td>
                  <td className="px-3 py-2">{row.phone || "-"}</td>
                  <td className="px-3 py-2 max-w-[360px]">
                    <div className="line-clamp-2">{row.message}</div>
                  </td>
                  <td className="px-3 py-2">{new Date(row.createdAt).toLocaleString()}</td>
                </tr>
              ))}
          </tbody>
        </table>
        {loading && <div className="p-4 text-sm text-muted-foreground">Loading...</div>}
        {!loading && data.length === 0 && <div className="p-4 text-sm text-muted-foreground">No results</div>}
      </div>

<div className="flex flex-col sm:flex-row items-center justify-between gap-3">
        <div className="text-sm text-muted-foreground">
          Page {page} of {totalPages}
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" disabled={page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>
            Previous
          </Button>
          <Button variant="outline" disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>
            Next
          </Button>
          <select
            className="ml-2 h-10 rounded-md border bg-background px-2 text-sm"
            value={pageSize}
            onChange={(e) => {
              setPage(1)
              setPageSize(Number(e.target.value))
            }}
          >
            {[10, 20, 50, 100].map((n) => (
              <option key={n} value={n}>
                {n} / page
              </option>
            ))}
          </select>
        </div>
      </div>
    </div>
  )
}

function SortIcon({ active, dir }: { active: boolean; dir: "asc" | "desc" }) {
  return (
    <svg
      className={cn("h-3 w-3 opacity-40", active && "opacity-100")}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      {dir === "asc" ? <path d="M7 14l5-5 5 5H7z" /> : <path d="M7 10l5 5 5-5H7z" />}
    </svg>
  )
}
[V0_FILE]typescriptreact:file="app/admin/(dashboard)/submissions/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/(dashboard)/settings/page.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export default function SettingsPage() {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Settings</CardTitle>
        </CardHeader>
        <CardContent>
          <Alert>
            <AlertTitle>Coming soon</AlertTitle>
            <AlertDescription>Settings configuration will be available here.</AlertDescription>
          </Alert>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/admin/submissions/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { getMongoClient, getDbName } from "@/lib/mongodb"
import { querySubmissionsFallback } from "@/lib/fallback-store"

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url)
  const page = Number(searchParams.get("page") || "1")
  const pageSize = Number(searchParams.get("pageSize") || "10")
  const search = (searchParams.get("search") || "").trim()
  const sortBy = (searchParams.get("sortBy") || "createdAt") as "name" | "createdAt"
  const sortDir = (searchParams.get("sortDir") || "desc") as "asc" | "desc"

const client = await getMongoClient()

if (!client) {
    const result = await querySubmissionsFallback({ page, pageSize, search, sortBy, sortDir })
    return NextResponse.json(result)
  }

const db = client.db(getDbName())
  const col = db.collection("submissions")

const filter: Record<string, any> = {}
  if (search) {
    const regex = new RegExp(search.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i")
    filter.$or = [{ name: regex }, { email: regex }, { phone: regex }, { message: regex }]
  }

const sort: Record<string, 1 | -1> = { [sortBy]: sortDir === "asc" ? 1 : -1 }

const total = await col.countDocuments(filter)
  const items = await col
    .find(filter, { projection: { _id: 0 } })
    .sort(sort)
    .skip((page - 1) * pageSize)
    .limit(pageSize)
    .toArray()

return NextResponse.json({ items, total })
}
[V0_FILE]typescript:file="app/api/admin/submissions/export/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { getMongoClient, getDbName } from "@/lib/mongodb"
import { querySubmissionsFallback } from "@/lib/fallback-store"
import * as XLSX from "xlsx"

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url)
  const format = (searchParams.get("format") || "csv") as "csv" | "xlsx"
  const search = (searchParams.get("search") || "").trim()
  const sortBy = (searchParams.get("sortBy") || "createdAt") as "name" | "createdAt"
  const sortDir = (searchParams.get("sortDir") || "desc") as "asc" | "desc"

const client = await getMongoClient()
  let items: any[] = []

if (!client) {
    const result = await querySubmissionsFallback({ page: 1, pageSize: 100000, search, sortBy, sortDir })
    items = result.items
  } else {
    const db = client.db(getDbName())
    const col = db.collection("submissions")

const filter: Record<string, any> = {}
    if (search) {
      const regex = new RegExp(search.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i")
      filter.$or = [{ name: regex }, { email: regex }, { phone: regex }, { message: regex }]
    }
    const sort: Record<string, 1 | -1> = { [sortBy]: sortDir === "asc" ? 1 : -1 }

items = await col
      .find(filter, { projection: { _id: 0 } })
      .sort(sort)
      .toArray()
  }

if (format === "xlsx") {
    const ws = XLSX.utils.json_to_sheet(items)
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, "Submissions")
    const ab = XLSX.write(wb, { type: "array", bookType: "xlsx" })
    return new Response(ab, {
      headers: {
        "Content-Type": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        "Content-Disposition": 'attachment; filename="submissions.xlsx"',
      },
    })
  }

// CSV
  const headers = ["name", "email", "phone", "message", "createdAt"]
  const csvRows = [headers.join(",")]
  for (const item of items) {
    const row = headers
      .map((h) => {
        const v = (item as any)[h] ?? ""
        const s = String(v).replace(/"/g, '""')
        return `"${s}"`
      })
      .join(",")
    csvRows.push(row)
  }
  const csv = csvRows.join("\n")
  return new NextResponse(csv, {
    headers: {
      "Content-Type": "text/csv; charset=utf-8",
      "Content-Disposition": 'attachment; filename="submissions.csv"',
    },
  })
}
[V0_FILE]typescript:file="app/api/contact/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { getMongoClient, getDbName } from "@/lib/mongodb"
import { addSubmissionFallback } from "@/lib/fallback-store"

export async function POST(request: Request) {
  const data = await request.formData()
  const firstName = String(data.get("firstName") || "").trim()
  const lastName = String(data.get("lastName") || "").trim()
  const email = String(data.get("email") || "").trim()
  const phone = String(data.get("phone") || "").trim()
  const subject = String(data.get("subject") || "").trim()
  const message = String(data.get("message") || "").trim()

const record = {
    name: [firstName, lastName].filter(Boolean).join(" ").trim() || firstName || lastName || "Unknown",
    email,
    phone,
    message: subject ? `${subject} — ${message}` : message,
    createdAt: new Date().toISOString(),
  }

try {
    const client = await getMongoClient()
    if (client) {
      const db = client.db(getDbName())
      await db.collection("submissions").insertOne(record)
    } else {
      await addSubmissionFallback(record)
    }
  } catch (e) {
    // fallback store on any db error
    await addSubmissionFallback(record)
  }

return NextResponse.json({ message: "Form submitted successfully" })
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import "./globals.css"

import { cn } from "@/lib/utils"
import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"
import { GeistSans } from "geist/font/sans"

export const metadata = {
  title: "MAHADEV TECH - Electrical Manufacturing Solutions",
  description:
    "Manufacturer of high-quality electrical control panels, distribution systems, and power management solutions for industrial applications.",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="scroll-smooth">
      <body className={cn("min-h-screen bg-background antialiased", GeistSans.className)}>
        <div className="relative flex min-h-screen flex-col">
          <SiteHeader />
          <main className="flex-1">{children}</main>
          <SiteFooter />
        </div>
      </body>
    </html>
  )
}
[V0_FILE]json:file="package.json" isEdit="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.4",
    "react": "^18.3.1",
    "react-day-picker": "9.8.0",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1",
    "server-only": "0.0.1",
    "mongodb": "6.20.0",
    "xlsx": "0.18.5",
    "crypto": "1.0.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.3"
  }
}</article></body></html>