[V0_FILE]typescriptreact:file="app/page.tsx" import Link from "next/link" import Image from "next/image" import { ArrowRight, Shield, Award, ThumbsUp } from "lucide-react" import { Button } from "@/components/ui/button" import ProductCard from "@/components/product-card" import { products } from "@/lib/products" export default function Home() { return (

{/* Hero Section */}

Fire Safety Solutions for Every Need

Protecting lives and property with high-quality fire extinguishers and safety equipment. Trust India's leading fire safety provider.

{/* Features Section */}

Why Choose Our Fire Extinguishers?

We provide the highest quality fire safety equipment with certified products that meet all safety standards.

Maximum Protection

Our fire extinguishers provide reliable protection against various types of fires, ensuring your safety.

Certified Quality

All our products are certified and comply with Indian and international safety standards.

Easy to Use

Our extinguishers are designed for ease of use, allowing quick response during emergencies.

{/* Featured Products */}

Featured Fire Extinguishers

Browse our selection of high-quality fire extinguishers for various applications.

{products.slice(0, 4).map((product) => ( ))}

{/* CTA Section */}

Ready to Enhance Your Fire Safety?

Contact our team of experts today to find the perfect fire safety solution for your home or business.

{/* Testimonials */}

What Our Customers Say

Rajesh Kumar

Hotel Owner, Mumbai

"The fire extinguishers we purchased are of excellent quality. The team provided great guidance on which types would be best for our hotel. Highly recommended!"

Sunita Patel

Office Manager, Delhi

"We equipped our entire office building with their fire safety products. The installation service was professional and the products are top-notch."

Amit Mehta

Factory Owner, Pune

"Their industrial fire extinguishers have been a great investment for our factory. The quality is excellent and the after-sales service is outstanding."

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" import Image from "next/image" import { CheckCircle, Users, Building, Award, MapPin } from "lucide-react" export default function AboutPage() { return (

{/* Hero Section */}

About Our Company

Leading the way in fire safety solutions across India since 2005

{/* Our Story */}

Our Story

Founded in 2005, our company has grown from a small local supplier to one of India's most trusted fire safety equipment providers. Our journey began with a simple mission: to provide high-quality fire safety solutions that protect lives and property.

Over the years, we have expanded our product range and services to meet the diverse needs of our customers, from homeowners to large industrial complexes. Our commitment to quality and safety has remained unwavering throughout our growth.

Today, we are proud to serve thousands of customers across India, providing them with the best fire safety equipment and services. Our team of experts is dedicated to ensuring that every customer receives personalized solutions that meet their specific requirements.

{/* Our Values */}

Our Core Values

These principles guide everything we do, from product development to customer service

Quality Assurance

We never compromise on the quality of our products. Every fire extinguisher undergoes rigorous testing to ensure it meets the highest safety standards.

Customer First

Our customers' safety is our top priority. We work closely with each client to understand their needs and provide tailored solutions.

Innovation

We continuously invest in research and development to improve our products and stay ahead of industry standards and technological advancements.

{/* Our Team */}

Meet Our Leadership Team

Experienced professionals dedicated to advancing fire safety in India

Vikram Singh

Chief Executive Officer

Priya Sharma

Chief Technical Officer

Rahul Patel

Operations Director

Anita Desai

Sales Director

{/* Company Stats */}

15+

Years of Experience

10,000+

Customers Served

50,000+

Products Sold

100+

Cities Covered

{/* Certifications */}

Our Certifications

We adhere to the highest industry standards and certifications

ISO 9001:2015

Certified for our quality management systems that consistently provide products meeting customer and regulatory requirements.

BIS Certification

Our products comply with Bureau of Indian Standards specifications, ensuring they meet national safety requirements.

CE Marking

Our products conform to European health, safety, and environmental protection standards.

{/* Locations */}

Our Locations

Serving customers across India with strategically located offices and warehouses

Mumbai (HQ)

123 Business Park, Andheri East
Mumbai, Maharashtra 400069

Delhi

456 Industrial Area, Okhla Phase II
New Delhi, Delhi 110020

Bangalore

789 Tech Park, Whitefield
Bangalore, Karnataka 560066

Chennai

321 Industrial Estate, Guindy
Chennai, Tamil Nadu 600032

) } [V0_FILE]typescriptreact:file="app/products/page.tsx" "use client" import { useState } from "react" import { Search, Filter } from "lucide-react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import ProductCard from "@/components/product-card" import { products } from "@/lib/products" export default function ProductsPage() { const [searchQuery, setSearchQuery] = useState("") const [categoryFilter, setCategoryFilter] = useState("all") const [sizeFilter, setSizeFilter] = useState("all") const filteredProducts = products.filter((product) => { // Search filter const matchesSearch = product.name.toLowerCase().includes(searchQuery.toLowerCase()) || product.description.toLowerCase().includes(searchQuery.toLowerCase()) // Category filter const matchesCategory = categoryFilter === "all" || product.category === categoryFilter // Size filter const matchesSize = sizeFilter === "all" || product.size === sizeFilter return matchesSearch && matchesCategory && matchesSize }) return (

{/* Hero Section */}

Our Products

Browse our comprehensive range of fire safety equipment

{/* Filters */}

setSearchQuery(e.target.value)} />

Filters:

{/* Products Grid */}

{filteredProducts.length > 0 ? ( <>

Showing {filteredProducts.length} of {products.length} products

{filteredProducts.map((product) => ( ))}

) : (

No products found

Try adjusting your search or filter criteria

)}

{/* Product Categories */}

Fire Extinguisher Categories

ABC Dry Powder Extinguishers

Versatile extinguishers suitable for Class A, B, and C fires. Effective against fires involving ordinary combustibles, flammable liquids, and electrical equipment.

CO2 Extinguishers

Ideal for Class B and electrical fires. These extinguishers leave no residue, making them perfect for sensitive equipment and electronics.

Foam Extinguishers

Effective for Class A and B fires. The foam blankets the fire and seals the vapors, preventing re-ignition of flammable liquids.

Water Extinguishers

Best for Class A fires involving ordinary combustibles like wood, paper, and cloth. Not suitable for electrical or flammable liquid fires.

Powder Extinguishers

Specialized extinguishers for specific applications, including metal fires (Class D). Highly effective but may cause significant cleanup.

Automatic Extinguishers

Self-activating extinguishers that deploy automatically when they detect fire. Ideal for unmanned areas or critical equipment.

) } [V0_FILE]typescriptreact:file="app/products/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/contact/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Phone, Mail, MapPin, Clock, Send } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useToast } from "@/hooks/use-toast" export default function ContactPage() { const { toast } = useToast() const [formData, setFormData] = useState({ name: "", email: "", phone: "", subject: "", message: "", inquiryType: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (value: string) => { setFormData((prev) => ({ ...prev, inquiryType: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission setTimeout(() => { setIsSubmitting(false) toast({ title: "Message Sent", description: "We'll get back to you as soon as possible.", }) setFormData({ name: "", email: "", phone: "", subject: "", message: "", inquiryType: "", }) }, 1500) } return (

{/* Hero Section */}

Contact Us

Get in touch with our team for any inquiries or support

{/* Contact Information */}

Phone

+91 1234 567 890

+91 9876 543 210

Email

info@fireextinguishers.com

support@fireextinguishers.com

Head Office

123 Business Park, Andheri East

Mumbai, Maharashtra 400069

Business Hours

Monday - Friday: 9:00 AM - 6:00 PM

Saturday: 10:00 AM - 4:00 PM

{/* Contact Form and Map */}

Send Us a Message

Full Name *

Email Address *

Phone Number

Inquiry Type *

Subject *

Message *

</div>

<Button type="submit" className="w-full" disabled={isSubmitting}>
                  {isSubmitting ? (
                    <span className="flex items-center">
                      <svg
                        className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      Sending...
                    </span>
                  ) : (
                    <span className="flex items-center">
                      <Send className="mr-2 h-4 w-4" /> Send Message
                    </span>
                  )}
                </Button>
              </form>
            </div>

<div className="space-y-6">
              <h2 className="text-2xl font-bold">Our Location</h2>
              <div className="aspect-video bg-card rounded-xl shadow-sm border border-border overflow-hidden">
                {/* This would be replaced with an actual map component in production */}
                <div className="w-full h-full bg-muted flex items-center justify-center">
                  <p className="text-muted-foreground">Interactive Map Would Be Here</p>
                </div>
              </div>

<div className="bg-card p-6 rounded-xl shadow-sm border border-border">
                <h3 className="text-lg font-semibold mb-4">Regional Offices</h3>
                <div className="space-y-4">
                  <div className="flex items-start">
                    <MapPin className="h-5 w-5 text-red-600 mr-3 mt-0.5 flex-shrink-0" />
                    <div>
                      <h4 className="font-medium">Delhi Office</h4>
                      <p className="text-sm text-muted-foreground">
                        456 Industrial Area, Okhla Phase II
                        <br />
                        New Delhi, Delhi 110020
                      </p>
                    </div>
                  </div>

<div className="flex items-start">
                    <MapPin className="h-5 w-5 text-red-600 mr-3 mt-0.5 flex-shrink-0" />
                    <div>
                      <h4 className="font-medium">Bangalore Office</h4>
                      <p className="text-sm text-muted-foreground">
                        789 Tech Park, Whitefield
                        <br />
                        Bangalore, Karnataka 560066
                      </p>
                    </div>
                  </div>

<div className="flex items-start">
                    <MapPin className="h-5 w-5 text-red-600 mr-3 mt-0.5 flex-shrink-0" />
                    <div>
                      <h4 className="font-medium">Chennai Office</h4>
                      <p className="text-sm text-muted-foreground">
                        321 Industrial Estate, Guindy
                        <br />
                        Chennai, Tamil Nadu 600032
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* FAQ Section */}
      <section className="py-12">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-8 text-center">Frequently Asked Questions</h2>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            <div className="bg-card p-6 rounded-xl shadow-sm border border-border">
              <h3 className="text-lg font-semibold mb-2">How quickly can you deliver fire extinguishers?</h3>
              <p className="text-muted-foreground">
                We typically deliver within 2-3 business days for standard orders. For urgent requirements, we offer
                express delivery options that can deliver within 24 hours in major cities.
              </p>
            </div>

<div className="bg-card p-6 rounded-xl shadow-sm border border-border">
              <h3 className="text-lg font-semibold mb-2">Do you offer installation services?</h3>
              <p className="text-muted-foreground">
                Yes, we provide professional installation services for all our fire safety equipment. Our trained
                technicians ensure proper placement and mounting according to safety regulations.
              </p>
            </div>

<div className="bg-card p-6 rounded-xl shadow-sm border border-border">
              <h3 className="text-lg font-semibold mb-2">How often should fire extinguishers be serviced?</h3>
              <p className="text-muted-foreground">
                Fire extinguishers should be visually inspected monthly and undergo professional maintenance annually. A
                complete overhaul is recommended every 5-6 years depending on the type.
              </p>
            </div>

<div className="bg-card p-6 rounded-xl shadow-sm border border-border">
              <h3 className="text-lg font-semibold mb-2">Do you offer bulk discounts for businesses?</h3>
              <p className="text-muted-foreground">
                Yes, we offer special pricing for bulk orders and business clients. Please contact our sales team for a
                customized quote based on your specific requirements.
              </p>
            </div>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-12 bg-red-600 text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-4">Need Emergency Assistance?</h2>
          <p className="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
            Our emergency support team is available 24/7 to assist you with urgent fire safety concerns.
          </p>
          <div className="inline-flex items-center justify-center bg-white text-red-600 px-6 py-3 rounded-lg font-bold text-xl">
            <Phone className="mr-2 h-6 w-6" />
            Emergency Hotline: 1800-FIRE-911
          </div>
        </div>
      </section>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/services/page.tsx"
import Link from "next/link"
import { ArrowRight, CheckCircle, Clock, Settings, FileText, Users, Shield } from "lucide-react"

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

export default function ServicesPage() {
  return (
    <div className="flex flex-col min-h-screen">
      {/* Hero Section */}
      <section className="relative py-16 bg-red-600">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center text-white">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">Our Services</h1>
            <p className="text-xl text-white/90">Comprehensive fire safety solutions for homes and businesses</p>
          </div>
        </div>
        <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-background to-transparent" />
      </section>

{/* Services Overview */}
      <section className="py-20 container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-3xl font-bold mb-4">Complete Fire Safety Solutions</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            We offer a comprehensive range of fire safety services to protect your property and ensure compliance with
            safety regulations.
          </p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div className="bg-card p-8 rounded-xl shadow-sm border border-border flex flex-col">
            <div className="bg-red-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">
              <Shield className="h-8 w-8 text-red-600" />
            </div>
            <h3 className="text-xl font-semibold mb-3">Fire Extinguisher Supply</h3>
            <p className="text-muted-foreground mb-6 flex-grow">
              We provide a wide range of fire extinguishers suitable for different types of fires and environments, from
              homes to industrial facilities.
            </p>
            <Link href="/products">
              <Button variant="outline" className="w-full group">
                Explore Products
                <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
              </Button>
            </Link>
          </div>

<div className="bg-card p-8 rounded-xl shadow-sm border border-border flex flex-col">
            <div className="bg-red-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">
              <Settings className="h-8 w-8 text-red-600" />
            </div>
            <h3 className="text-xl font-semibold mb-3">Installation Services</h3>
            <p className="text-muted-foreground mb-6 flex-grow">
              Our trained technicians ensure proper installation of all fire safety equipment, following industry best
              practices and safety standards.
            </p>
            <Button variant="outline" className="w-full group">
              Learn More
              <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Button>
          </div>

<div className="bg-card p-8 rounded-xl shadow-sm border border-border flex flex-col">
            <div className="bg-red-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">
              <Clock className="h-8 w-8 text-red-600" />
            </div>
            <h3 className="text-xl font-semibold mb-3">Maintenance & Servicing</h3>
            <p className="text-muted-foreground mb-6 flex-grow">
              Regular maintenance and servicing of fire extinguishers and safety equipment to ensure they function
              properly when needed.
            </p>
            <Button variant="outline" className="w-full group">
              Service Details
              <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Button>
          </div>

<div className="bg-card p-8 rounded-xl shadow-sm border border-border flex flex-col">
            <div className="bg-red-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">
              <FileText className="h-8 w-8 text-red-600" />
            </div>
            <h3 className="text-xl font-semibold mb-3">Fire Safety Audits</h3>
            <p className="text-muted-foreground mb-6 flex-grow">
              Comprehensive assessment of your premises to identify potential fire hazards and recommend appropriate
              safety measures.
            </p>
            <Button variant="outline" className="w-full group">
              Request Audit
              <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Button>
          </div>

<div className="bg-card p-8 rounded-xl shadow-sm border border-border flex flex-col">
            <div className="bg-red-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">
              <Users className="h-8 w-8 text-red-600" />
            </div>
            <h3 className="text-xl font-semibold mb-3">Training Programs</h3>
            <p className="text-muted-foreground mb-6 flex-grow">
              Fire safety training for employees, including proper use of extinguishers, evacuation procedures, and
              emergency response.
            </p>
            <Button variant="outline" className="w-full group">
              Training Options
              <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Button>
          </div>

<div className="bg-card p-8 rounded-xl shadow-sm border border-border flex flex-col">
            <div className="bg-red-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">
              <Shield className="h-8 w-8 text-red-600" />
            </div>
            <h3 className="text-xl font-semibold mb-3">Fire Safety Consultancy</h3>
            <p className="text-muted-foreground mb-6 flex-grow">
              Expert advice on fire safety regulations, compliance requirements, and best practices for your specific
              industry.
            </p>
            <Button variant="outline" className="w-full group">
              Consult Experts
              <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Button>
          </div>
        </div>
      </section>

{/* Service Process */}
      <section className="py-20 bg-muted">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4">Our Service Process</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              We follow a systematic approach to ensure you receive the best fire safety solutions
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="bg-card p-6 rounded-xl shadow-sm border border-border text-center relative">
              <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-red-600 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold">
                1
              </div>
              <div className="bg-red-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                <FileText className="h-6 w-6 text-red-600" />
              </div>
              <h3 className="text-lg font-semibold mb-2">Assessment</h3>
              <p className="text-muted-foreground text-sm">
                We assess your premises and specific requirements to understand your fire safety needs.
              </p>
            </div>

<div className="bg-card p-6 rounded-xl shadow-sm border border-border text-center relative">
              <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-red-600 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold">
                2
              </div>
              <div className="bg-red-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                <FileText className="h-6 w-6 text-red-600" />
              </div>
              <h3 className="text-lg font-semibold mb-2">Recommendation</h3>
              <p className="text-muted-foreground text-sm">
                We provide tailored recommendations for fire safety equipment and services.
              </p>
            </div>

<div className="bg-card p-6 rounded-xl shadow-sm border border-border text-center relative">
              <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-red-600 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold">
                3
              </div>
              <div className="bg-red-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                <Settings className="h-6 w-6 text-red-600" />
              </div>
              <h3 className="text-lg font-semibold mb-2">Implementation</h3>
              <p className="text-muted-foreground text-sm">
                We supply and install the recommended fire safety equipment at your premises.
              </p>
            </div>

<div className="bg-card p-6 rounded-xl shadow-sm border border-border text-center relative">
              <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-red-600 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold">
                4
              </div>
              <div className="bg-red-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                <Clock className="h-6 w-6 text-red-600" />
              </div>
              <h3 className="text-lg font-semibold mb-2">Ongoing Support</h3>
              <p className="text-muted-foreground text-sm">
                We provide regular maintenance, training, and support to ensure continued safety.
              </p>
            </div>
          </div>
        </div>
      </section>

{/* Service Packages */}
      <section className="py-20 container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-3xl font-bold mb-4">Our Service Packages</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Choose the package that best suits your fire safety needs
          </p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="bg-card p-8 rounded-xl shadow-sm border border-border flex flex-col">
            <div className="text-center mb-6">
              <h3 className="text-xl font-bold">Basic Package</h3>
              <div className="mt-4 text-3xl font-bold">₹15,000</div>
              <p className="text-sm text-muted-foreground">One-time setup</p>
            </div>

<ul className="space-y-3 mb-8 flex-grow">
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>5 ABC Type Fire Extinguishers</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>Basic Installation</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>Annual Maintenance (1 year)</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>Basic Staff Training</span>
              </li>
            </ul>

<Button className="w-full">Get Started</Button>
          </div>

<div className="bg-card p-8 rounded-xl shadow-sm border-2 border-red-600 flex flex-col relative">
            <div className="absolute top-0 right-0 bg-red-600 text-white px-4 py-1 text-sm font-medium rounded-bl-lg rounded-tr-xl">
              Popular
            </div>

<div className="text-center mb-6">
              <h3 className="text-xl font-bold">Business Package</h3>
              <div className="mt-4 text-3xl font-bold">₹45,000</div>
              <p className="text-sm text-muted-foreground">One-time setup</p>
            </div>

<ul className="space-y-3 mb-8 flex-grow">
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>15 Fire Extinguishers (Mixed Types)</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>Professional Installation</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>Biannual Maintenance (2 years)</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>Comprehensive Staff Training</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>Fire Safety Audit</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>Emergency Response Plan</span>
              </li>
            </ul>

<Button className="w-full bg-red-600 hover:bg-red-700">Get Started</Button>
          </div>

<div className="bg-card p-8 rounded-xl shadow-sm border border-border flex flex-col">
            <div className="text-center mb-6">
              <h3 className="text-xl font-bold">Enterprise Package</h3>
              <div className="mt-4 text-3xl font-bold">Custom</div>
              <p className="text-sm text-muted-foreground">Tailored solution</p>
            </div>

<ul className="space-y-3 mb-8 flex-grow">
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>Custom Fire Safety Solution</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>Premium Installation</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>Quarterly Maintenance (3 years)</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>Advanced Training Programs</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>Comprehensive Fire Safety Audit</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>24/7 Emergency Support</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                <span>Dedicated Account Manager</span>
              </li>
            </ul>

<Button variant="outline" className="w-full">
              Contact Sales
            </Button>
          </div>
        </div>
      </section>

{/* Industries We Serve */}
      <section className="py-20 bg-muted">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4">Industries We Serve</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              We provide specialized fire safety solutions for various industries
            </p>
          </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="bg-card p-6 rounded-xl shadow-sm border border-border">
              <h3 className="text-xl font-semibold mb-3">Commercial Buildings</h3>
              <p className="text-muted-foreground mb-4">
                Comprehensive fire safety solutions for offices, shopping malls, hotels, and other commercial
                establishments.
              </p>
              <ul className="space-y-2 text-sm">
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Multi-class fire extinguishers</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Fire alarm systems</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Evacuation planning</span>
                </li>
              </ul>
            </div>

<div className="bg-card p-6 rounded-xl shadow-sm border border-border">
              <h3 className="text-xl font-semibold mb-3">Industrial Facilities</h3>
              <p className="text-muted-foreground mb-4">
                Specialized fire protection for factories, warehouses, and manufacturing plants with unique fire
                hazards.
              </p>
              <ul className="space-y-2 text-sm">
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Heavy-duty fire extinguishers</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Automatic suppression systems</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Hazardous material protection</span>
                </li>
              </ul>
            </div>

<div className="bg-card p-6 rounded-xl shadow-sm border border-border">
              <h3 className="text-xl font-semibold mb-3">Educational Institutions</h3>
              <p className="text-muted-foreground mb-4">
                Fire safety solutions for schools, colleges, and universities with focus on student and staff safety.
              </p>
              <ul className="space-y-2 text-sm">
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Standard fire extinguishers</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Fire safety education</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Emergency drills</span>
                </li>
              </ul>
            </div>

<div className="bg-card p-6 rounded-xl shadow-sm border border-border">
              <h3 className="text-xl font-semibold mb-3">Healthcare Facilities</h3>
              <p className="text-muted-foreground mb-4">
                Specialized fire protection for hospitals, clinics, and nursing homes with patient safety as priority.
              </p>
              <ul className="space-y-2 text-sm">
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Clean agent extinguishers</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Evacuation assistance</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Staff emergency response training</span>
                </li>
              </ul>
            </div>

<div className="bg-card p-6 rounded-xl shadow-sm border border-border">
              <h3 className="text-xl font-semibold mb-3">Residential Buildings</h3>
              <p className="text-muted-foreground mb-4">
                Fire safety solutions for apartments, housing societies, and individual homes for family protection.
              </p>
              <ul className="space-y-2 text-sm">
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Home fire extinguishers</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Smoke detectors</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Family emergency planning</span>
                </li>
              </ul>
            </div>

<div className="bg-card p-6 rounded-xl shadow-sm border border-border">
              <h3 className="text-xl font-semibold mb-3">Hospitality Industry</h3>
              <p className="text-muted-foreground mb-4">
                Fire safety solutions for hotels, restaurants, and entertainment venues with guest safety in mind.
              </p>
              <ul className="space-y-2 text-sm">
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Kitchen fire suppression</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Guest evacuation systems</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span>Staff emergency training</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-20 bg-red-600 text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-4">Ready to Enhance Your Fire Safety?</h2>
          <p className="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
            Contact our team today to discuss your fire safety requirements and get a customized solution.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Link href="/contact">
              <Button size="lg" className="bg-white text-red-600 hover:bg-white/90">
                Contact Us Now
              </Button>
            </Link>
            <Button size="lg" variant="outline" className="text-white border-white hover:bg-white/10">
              Download Brochure
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/product-card.tsx"
import Image from "next/image"
import { ShoppingCart } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import type { Product } from "@/lib/products"

interface ProductCardProps {
  product: Product
}

export default function ProductCard({ product }: ProductCardProps) {
  return (
    <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden flex flex-col h-full transition-all hover:shadow-md">
      <div className="relative aspect-square">
        <Image src={product.image || "/placeholder.svg"} alt={product.name} fill className="object-cover" />
        {product.isNew && <Badge className="absolute top-2 right-2 bg-red-600">New</Badge>}
      </div>
      <div className="p-5 flex flex-col flex-grow">
        <div className="flex justify-between items-start mb-2">
          <h3 className="font-semibold text-lg line-clamp-2">{product.name}</h3>
          <Badge variant="outline" className="ml-2 flex-shrink-0">
            {product.category}
          </Badge>
        </div>
        <p className="text-muted-foreground text-sm mb-4 line-clamp-3 flex-grow">{product.description}</p>
        <div className="flex justify-between items-center mt-auto">
          <div className="font-bold text-lg">₹{product.price.toLocaleString()}</div>
          <Button size="sm" className="bg-red-600 hover:bg-red-700">
            <ShoppingCart className="h-4 w-4 mr-2" />
            Add to Cart
          </Button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="lib/products.ts"
export interface Product {
  id: string
  name: string
  description: string
  price: number
  category: string
  size: string
  image: string
  isNew?: boolean
  isFeatured?: boolean
}

export const products: Product[] = [
  {
    id: "1",
    name: "ABC Dry Powder Fire Extinguisher - 4KG",
    description:
      "Multipurpose fire extinguisher suitable for Class A, B, and C fires. Ideal for homes, offices, and commercial spaces.",
    price: 1499,
    category: "abc",
    size: "4kg",
    image: "/placeholder.svg?height=400&width=400",
    isNew: true,
    isFeatured: true,
  },
  {
    id: "2",
    name: "CO2 Fire Extinguisher - 2KG",
    description:
      "Carbon dioxide extinguisher perfect for electrical fires and sensitive equipment. Leaves no residue after use.",
    price: 2299,
    category: "co2",
    size: "2kg",
    image: "/placeholder.svg?height=400&width=400",
    isFeatured: true,
  },
  {
    id: "3",
    name: "Foam Fire Extinguisher - 6KG",
    description:
      "AFFF foam extinguisher effective against Class A and B fires. Creates a film that prevents re-ignition.",
    price: 1899,
    category: "foam",
    size: "6kg",
    image: "/placeholder.svg?height=400&width=400",
    isFeatured: true,
  },
  {
    id: "4",
    name: "Water Fire Extinguisher - 9KG",
    description:
      "Water-based extinguisher for Class A fires. Economical and environmentally friendly option for ordinary combustibles.",
    price: 1299,
    category: "water",
    size: "9kg",
    image: "/placeholder.svg?height=400&width=400",
    isFeatured: true,
  },
  {
    id: "5",
    name: "ABC Dry Powder Fire Extinguisher - 6KG",
    description:
      "Larger capacity multipurpose extinguisher for areas with higher fire risk. Effective on multiple fire types.",
    price: 1899,
    category: "abc",
    size: "6kg",
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: "6",
    name: "CO2 Fire Extinguisher - 4.5KG",
    description: "Heavy-duty carbon dioxide extinguisher for larger electrical fires and industrial applications.",
    price: 3499,
    category: "co2",
    size: "4kg",
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: "7",
    name: "Kitchen Fire Extinguisher - 2KG",
    description:
      "Specialized extinguisher for kitchen fires, effective against cooking oils and fats. Compact design for easy storage.",
    price: 1699,
    category: "foam",
    size: "2kg",
    image: "/placeholder.svg?height=400&width=400",
    isNew: true,
  },
  {
    id: "8",
    name: "ABC Dry Powder Fire Extinguisher - 1KG",
    description:
      "Compact multipurpose extinguisher for cars, small offices, and home use. Lightweight and easy to handle.",
    price: 899,
    category: "abc",
    size: "1kg",
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: "9",
    name: "Automatic Fire Extinguisher - 5KG",
    description:
      "Self-activating extinguisher that deploys automatically when it detects fire. Ideal for unmanned areas.",
    price: 4999,
    category: "automatic",
    size: "5kg",
    image: "/placeholder.svg?height=400&width=400",
    isNew: true,
  },
  {
    id: "10",
    name: "Water Mist Fire Extinguisher - 3L",
    description:
      "Advanced water mist technology that creates a fine mist to fight fires efficiently while minimizing water damage.",
    price: 2799,
    category: "water",
    size: "3kg",
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: "11",
    name: "Powder Fire Extinguisher for Metal Fires - 6KG",
    description:
      "Specialized powder extinguisher for Class D fires involving metals. Essential for workshops and metal processing facilities.",
    price: 3999,
    category: "powder",
    size: "6kg",
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: "12",
    name: "Clean Agent Fire Extinguisher - 4KG",
    description:
      "Environmentally friendly clean agent extinguisher that leaves no residue. Ideal for server rooms and sensitive equipment.",
    price: 5499,
    category: "clean",
    size: "4kg",
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: "13",
    name: "Wheeled CO2 Fire Extinguisher - 22.5KG",
    description: "Large capacity wheeled extinguisher for industrial applications and areas with high fire risk.",
    price: 12999,
    category: "co2",
    size: "22kg",
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: "14",
    name: "ABC Dry Powder Fire Extinguisher - 9KG",
    description: "High capacity multipurpose extinguisher for warehouses, factories, and large commercial spaces.",
    price: 2499,
    category: "abc",
    size: "9kg",
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: "15",
    name: "Foam Spray Fire Extinguisher - 1L",
    description: "Compact foam spray extinguisher for small fires. Easy to use with no maintenance required.",
    price: 699,
    category: "foam",
    size: "1kg",
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: "16",
    name: "Fire Extinguisher Cabinet - Single",
    description:
      "Wall-mounted cabinet for storing a single fire extinguisher. Protects the extinguisher from damage and tampering.",
    price: 1299,
    category: "accessories",
    size: "standard",
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: "17",
    name: "Fire Blanket - 1.2m x 1.2m",
    description:
      "Fire-resistant blanket for smothering small fires or wrapping around a person whose clothes are on fire.",
    price: 599,
    category: "accessories",
    size: "standard",
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: "18",
    name: "Fire Extinguisher Stand - Double",
    description: "Floor stand for holding two fire extinguishers. Ideal for areas where wall mounting is not possible.",
    price: 1899,
    category: "accessories",
    size: "standard",
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: "19",
    name: "Fire Extinguisher Inspection Tags - Pack of 100",
    description: "Tags for recording fire extinguisher inspection dates and maintenance history.",
    price: 499,
    category: "accessories",
    size: "standard",
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: "20",
    name: "Vehicle Fire Extinguisher Kit",
    description:
      "Complete fire safety kit for vehicles including a 1KG ABC extinguisher, mounting bracket, and safety sign.",
    price: 1299,
    category: "abc",
    size: "1kg",
    image: "/placeholder.svg?height=400&width=400",
  },
]

[V0_FILE]typescriptreact:file="components/layout/header.tsx"
"use client"

import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Menu, X, ShoppingCart, Phone, Search, ChevronDown } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export default function Header() {
  const pathname = usePathname()
  const [isSearchOpen, setIsSearchOpen] = useState(false)

const routes = [
    { href: "/", label: "Home" },
    { href: "/about", label: "About" },
    { href: "/products", label: "Products" },
    { href: "/services", label: "Services" },
    { href: "/contact", label: "Contact" },
  ]

return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      {/* Top Bar */}
      <div className="bg-red-600 text-white py-2 px-4">
        <div className="container mx-auto flex justify-between items-center">
          <div className="text-sm hidden sm:block">Welcome to India's Leading Fire Safety Equipment Provider</div>
          <div className="flex items-center gap-4">
            <div className="flex items-center text-sm">
              <Phone className="h-3 w-3 mr-1" />
              <span>Hotline: 1800-FIRE-911</span>
            </div>
            <div className="h-4 w-px bg-white/30" />
            <Link href="/contact" className="text-sm hover:underline">
              Support
            </Link>
          </div>
        </div>
      </div>

{/* Main Header */}
      <div className="container mx-auto px-4 h-16 flex items-center justify-between">
        <div className="flex items-center">
          <Sheet>
            <SheetTrigger asChild>
              <Button variant="ghost" size="icon" className="md:hidden">
                <Menu className="h-6 w-6" />
                <span className="sr-only">Toggle menu</span>
              </Button>
            </SheetTrigger>
            <SheetContent side="left" className="w-[300px] sm:w-[400px]">
              <nav className="flex flex-col gap-4 mt-8">
                {routes.map((route) => (
                  <Link
                    key={route.href}
                    href={route.href}
                    className={`text-lg font-medium ${pathname === route.href ? "text-red-600" : "text-foreground"}`}
                  >
                    {route.label}
                  </Link>
                ))}
              </nav>
            </SheetContent>
          </Sheet>

<Link href="/" className="flex items-center gap-2 ml-4 md:ml-0">
            <div className="bg-red-600 text-white p-1 rounded">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M8 16a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2" />
                <path d="M10 10a2 2 0 1 1 4 0" />
                <path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
              </svg>
            </div>
            <span className="font-bold text-xl">FireSafe</span>
          </Link>
        </div>

<nav className="hidden md:flex items-center gap-6">
          {routes.map((route) => (
            <Link
              key={route.href}
              href={route.href}
              className={`text-sm font-medium transition-colors hover:text-red-600 ${
                pathname === route.href ? "text-red-600" : "text-foreground"
              }`}
            >
              {route.label}
            </Link>
          ))}

<DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="flex items-center gap-1 text-sm font-medium">
                Resources
                <ChevronDown className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem>
                <Link href="#" className="w-full">
                  Fire Safety Tips
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link href="#" className="w-full">
                  Blog
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link href="#" className="w-full">
                  Downloads
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link href="#" className="w-full">
                  FAQs
                </Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </nav>

<div className="flex items-center gap-2">
          {isSearchOpen ? (
            <div className="flex items-center">
              <Input
                type="text"
                placeholder="Search products..."
                className="w-[200px] h-9"
                autoFocus
                onBlur={() => setIsSearchOpen(false)}
              />
              <Button variant="ghost" size="icon" onClick={() => setIsSearchOpen(false)}>
                <X className="h-5 w-5" />
              </Button>
            </div>
          ) : (
            <Button variant="ghost" size="icon" onClick={() => setIsSearchOpen(true)}>
              <Search className="h-5 w-5" />
              <span className="sr-only">Search</span>
            </Button>
          )}

<Button className="hidden sm:flex bg-red-600 hover:bg-red-700">Get a Quote</Button>
        </div>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/layout/footer.tsx"
import Link from "next/link"
import { Mail, Phone, MapPin, Facebook, Twitter, Instagram, Linkedin, Youtube } from "lucide-react"

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

export default function Footer() {
  return (
    <footer className="bg-muted pt-16 border-t">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
          <div>
            <div className="flex items-center gap-2 mb-4">
              <div className="bg-red-600 text-white p-1 rounded">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="M8 16a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2" />
                  <path d="M10 10a2 2 0 1 1 4 0" />
                  <path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>
              </div>
              <span className="font-bold text-xl">FireSafe</span>
            </div>
            <p className="text-muted-foreground mb-4">
              India's leading provider of fire safety equipment and services. Protecting lives and property since 2005.
            </p>
            <div className="space-y-2">
              <div className="flex items-center">
                <Phone className="h-4 w-4 mr-2 text-red-600" />
                <span>+91 1234 567 890</span>
              </div>
              <div className="flex items-center">
                <Mail className="h-4 w-4 mr-2 text-red-600" />
                <span>info@firesafe.com</span>
              </div>
              <div className="flex items-start">
                <MapPin className="h-4 w-4 mr-2 text-red-600 mt-1" />
                <span>
                  123 Business Park, Andheri East
                  <br />
                  Mumbai, Maharashtra 400069
                </span>
              </div>
            </div>
          </div>

<div>
            <h3 className="font-semibold text-lg mb-4">Quick Links</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/" className="text-muted-foreground hover:text-red-600 transition-colors">
                  Home
                </Link>
              </li>
              <li>
                <Link href="/about" className="text-muted-foreground hover:text-red-600 transition-colors">
                  About Us
                </Link>
              </li>
              <li>
                <Link href="/products" className="text-muted-foreground hover:text-red-600 transition-colors">
                  Products
                </Link>
              </li>
              <li>
                <Link href="/services" className="text-muted-foreground hover:text-red-600 transition-colors">
                  Services
                </Link>
              </li>
              <li>
                <Link href="/contact" className="text-muted-foreground hover:text-red-600 transition-colors">
                  Contact Us
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-red-600 transition-colors">
                  Blog
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-red-600 transition-colors">
                  Careers
                </Link>
              </li>
            </ul>
          </div>

<div>
            <h3 className="font-semibold text-lg mb-4">Products</h3>
            <ul className="space-y-2">
              <li>
                <Link href="#" className="text-muted-foreground hover:text-red-600 transition-colors">
                  ABC Fire Extinguishers
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-red-600 transition-colors">
                  CO2 Fire Extinguishers
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-red-600 transition-colors">
                  Foam Fire Extinguishers
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-red-600 transition-colors">
                  Water Fire Extinguishers
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-red-600 transition-colors">
                  Powder Fire Extinguishers
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-red-600 transition-colors">
                  Automatic Systems
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-red-600 transition-colors">
                  Fire Safety Accessories
                </Link>
              </li>
            </ul>
          </div>

<div>
            <h3 className="font-semibold text-lg mb-4">Newsletter</h3>
            <p className="text-muted-foreground mb-4">
              Subscribe to our newsletter for the latest updates on fire safety products, tips, and regulations.
            </p>
            <div className="space-y-2">
              <Input type="email" placeholder="Your email address" />
              <Button className="w-full bg-red-600 hover:bg-red-700">Subscribe</Button>
            </div>
            <div className="mt-6">
              <h4 className="font-medium mb-2">Follow Us</h4>
              <div className="flex gap-4">
                <Link href="#" className="text-muted-foreground hover:text-red-600 transition-colors">
                  <Facebook className="h-5 w-5" />
                </Link>
                <Link href="#" className="text-muted-foreground hover:text-red-600 transition-colors">
                  <Twitter className="h-5 w-5" />
                </Link>
                <Link href="#" className="text-muted-foreground hover:text-red-600 transition-colors">
                  <Instagram className="h-5 w-5" />
                </Link>
                <Link href="#" className="text-muted-foreground hover:text-red-600 transition-colors">
                  <Linkedin className="h-5 w-5" />
                </Link>
                <Link href="#" className="text-muted-foreground hover:text-red-600 transition-colors">
                  <Youtube className="h-5 w-5" />
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>

<div className="border-t py-6">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="text-sm text-muted-foreground mb-4 md:mb-0">
              © {new Date().getFullYear()} FireSafe. All rights reserved. Developed by{" "}
              <span className="font-medium">Alberow</span>
            </div>
            <div className="flex gap-4">
              <Link href="#" className="text-sm text-muted-foreground hover:text-red-600 transition-colors">
                Privacy Policy
              </Link>
              <Link href="#" className="text-sm text-muted-foreground hover:text-red-600 transition-colors">
                Terms of Service
              </Link>
              <Link href="#" className="text-sm text-muted-foreground hover:text-red-600 transition-colors">
                Sitemap
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"

import { ThemeProvider } from "@/components/theme-provider"
import Header from "@/components/layout/header"
import Footer from "@/components/layout/footer"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "FireSafe - India's Leading Fire Extinguisher Provider",
  description:
    "FireSafe offers high-quality fire extinguishers and safety equipment for homes, businesses, and industrial facilities across India.",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
          <Header />
          <main>{children}</main>
          <Footer />
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="tailwind.config.ts"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  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))",
        },
        red: {
          50: "#fef2f2",
          100: "#fee2e2",
          200: "#fecaca",
          300: "#fca5a5",
          400: "#f87171",
          500: "#ef4444",
          600: "#dc2626",
          700: "#b91c1c",
          800: "#991b1b",
          900: "#7f1d1d",
          950: "#450a0a",
        },
      },
      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")],
} satisfies Config

export default config
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This