Website-Generation-Request (1)/src/app/about/page.tsx

import Image from 'next/image'
import { Shield, Users, Award, CheckCircle, TrendingUp, Sun, Thermometer, Zap } from 'lucide-react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-black text-white">
      {/* Hero Section */}
      <section className="relative py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="text-center">
            <h1 className="text-4xl md:text-6xl font-bold mb-6">
              Leading Heat Rejection
              <span className="block text-red-600">Film Experts</span>
            </h1>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto mb-8">
              With over two decades of expertise in advanced heat rejection technology, we deliver premium window film solutions that transform comfort, efficiency, and performance.
            </p>
            <div className="flex flex-wrap justify-center gap-4 mb-12">
              <Badge variant="outline" className="px-4 py-2 text-sm border-red-600 text-red-600">
                20+ Years Experience
              </Badge>
              <Badge variant="outline" className="px-4 py-2 text-sm border-red-600 text-red-600">
                5000+ Installations
              </Badge>
              <Badge variant="outline" className="px-4 py-2 text-sm border-red-600 text-red-600">
                Industry Certified
              </Badge>
            </div>
          </div>
        </div>
      </section>

      {/* Company Overview */}
      <section className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6">
                Our <span className="text-red-600">Expertise</span>
              </h2>
              <p className="text-gray-300 text-lg mb-6">
                We specialize in cutting-edge heat rejection window films that provide superior solar control, UV protection, and energy efficiency. Our advanced ceramic and multi-layer technologies deliver exceptional performance while maintaining optical clarity.
              </p>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div className="flex items-start space-x-3">
                  <Sun className="text-red-600 mt-1 h-5 w-5 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold mb-1">Solar Control</h3>
                    <p className="text-sm text-gray-400">Up to 99% heat rejection efficiency</p>
                  </div>
                </div>
                <div className="flex items-start space-x-3">
                  <Shield className="text-red-600 mt-1 h-5 w-5 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold mb-1">UV Protection</h3>
                    <p className="text-sm text-gray-400">Blocks 99.9% of harmful UV rays</p>
                  </div>
                </div>
                <div className="flex items-start space-x-3">
                  <Thermometer className="text-red-600 mt-1 h-5 w-5 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold mb-1">Energy Savings</h3>
                    <p className="text-sm text-gray-400">Reduce cooling costs by 30-50%</p>
                  </div>
                </div>
                <div className="flex items-start space-x-3">
                  <Zap className="text-red-600 mt-1 h-5 w-5 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold mb-1">Clarity</h3>
                    <p className="text-sm text-gray-400">Maintains 90%+ visible light transmission</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="relative">
              <div className="bg-gray-900 rounded-lg p-8">
                <div className="grid grid-cols-2 gap-8">
                  <div className="text-center">
                    <div className="text-3xl font-bold text-red-600 mb-2">20+</div>
                    <div className="text-sm text-gray-400">Years Experience</div>
                  </div>
                  <div className="text-center">
                    <div className="text-3xl font-bold text-red-600 mb-2">5000+</div>
                    <div className="text-sm text-gray-400">Installations</div>
                  </div>
                  <div className="text-center">
                    <div className="text-3xl font-bold text-red-600 mb-2">99%</div>
                    <div className="text-sm text-gray-400">Heat Rejection</div>
                  </div>
                  <div className="text-center">
                    <div className="text-3xl font-bold text-red-600 mb-2">10</div>
                    <div className="text-sm text-gray-400">Year Warranty</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Film Technology */}
      <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">
              Advanced <span className="text-red-600">Film Technology</span>
            </h2>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto">
              Our heat rejection films utilize the latest in nanotechnology and multi-layer construction to deliver unmatched performance and durability.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="bg-black border-gray-800">
              <CardHeader>
                <CardTitle className="text-white">Ceramic Technology</CardTitle>
                <CardDescription className="text-gray-400">
                  Advanced ceramic particles for superior heat rejection
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-gray-300">
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-red-600 mr-2" />
                    Non-metallic construction
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-red-600 mr-2" />
                    No signal interference
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-red-600 mr-2" />
                    Fade-resistant technology
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-red-600 mr-2" />
                    Excellent heat rejection
                  </li>
                </ul>
              </CardContent>
            </Card>

            <Card className="bg-black border-gray-800">
              <CardHeader>
                <CardTitle className="text-white">Multi-Layer Films</CardTitle>
                <CardDescription className="text-gray-400">
                  Precision-engineered layers for optimal performance
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-gray-300">
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-red-600 mr-2" />
                    200+ ultra-thin layers
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-red-600 mr-2" />
                    Precise light control
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-red-600 mr-2" />
                    Enhanced durability
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-red-600 mr-2" />
                    Superior optical clarity
                  </li>
                </ul>
              </CardContent>
            </Card>

            <Card className="bg-black border-gray-800">
              <CardHeader>
                <CardTitle className="text-white">Spectrally Selective</CardTitle>
                <CardDescription className="text-gray-400">
                  Targets specific wavelengths for maximum efficiency
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-gray-300">
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-red-600 mr-2" />
                    Blocks infrared radiation
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-red-600 mr-2" />
                    Preserves visible light
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-red-600 mr-2" />
                    Maximum energy savings
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-red-600 mr-2" />
                    Maintains natural lighting
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Installation Process */}
      <section className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">
              Professional <span className="text-red-600">Installation Process</span>
            </h2>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto">
              Our certified technicians follow a meticulous installation process to ensure perfect results and maximum performance.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="text-center">
              <div className="bg-red-600 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-4">
                <span className="text-white font-bold">1</span>
              </div>
              <h3 className="text-xl font-semibold mb-2">Site Assessment</h3>
              <p className="text-gray-400">
                Comprehensive evaluation of windows, glass type, and environmental conditions
              </p>
            </div>
            
            <div className="text-center">
              <div className="bg-red-600 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-4">
                <span className="text-white font-bold">2</span>
              </div>
              <h3 className="text-xl font-semibold mb-2">Surface Preparation</h3>
              <p className="text-gray-400">
                Thorough cleaning and preparation of glass surfaces for optimal adhesion
              </p>
            </div>
            
            <div className="text-center">
              <div className="bg-red-600 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-4">
                <span className="text-white font-bold">3</span>
              </div>
              <h3 className="text-xl font-semibold mb-2">Precision Installation</h3>
              <p className="text-gray-400">
                Expert application using professional tools and techniques
              </p>
            </div>
            
            <div className="text-center">
              <div className="bg-red-600 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-4">
                <span className="text-white font-bold">4</span>
              </div>
              <h3 className="text-xl font-semibold mb-2">Quality Inspection</h3>
              <p className="text-gray-400">
                Final inspection and testing to ensure perfect installation
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Quality Standards */}
      <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6">
                Uncompromising <span className="text-red-600">Quality Standards</span>
              </h2>
              <p className="text-gray-300 text-lg mb-8">
                We maintain the highest standards in film selection, installation practices, and customer service. Our commitment to excellence is reflected in every project we complete.
              </p>
              
              <div className="space-y-6">
                <div className="flex items-start space-x-4">
                  <Award className="text-red-600 mt-1 h-6 w-6 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold text-lg mb-2">Industry Certifications</h3>
                    <p className="text-gray-400">
                      All technicians are certified by leading film manufacturers and maintain ongoing training
                    </p>
                  </div>
                </div>
                
                <div className="flex items-start space-x-4">
                  <Shield className="text-red-600 mt-1 h-6 w-6 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold text-lg mb-2">Warranty Protection</h3>
                    <p className="text-gray-400">
                      Comprehensive warranties covering materials and workmanship for complete peace of mind
                    </p>
                  </div>
                </div>
                
                <div className="flex items-start space-x-4">
                  <TrendingUp className="text-red-600 mt-1 h-6 w-6 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold text-lg mb-2">Performance Guarantee</h3>
                    <p className="text-gray-400">
                      We guarantee the performance specifications of all our heat rejection films
                    </p>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="bg-black rounded-lg p-8">
              <h3 className="text-2xl font-bold mb-6 text-center">Quality Metrics</h3>
              <div className="space-y-6">
                <div className="flex justify-between items-center">
                  <span className="text-gray-300">Customer Satisfaction</span>
                  <span className="text-red-600 font-bold">98%</span>
                </div>
                <div className="w-full bg-gray-800 rounded-full h-2">
                  <div className="bg-red-600 h-2 rounded-full" style={{ width: '98%' }}></div>
                </div>
                
                <div className="flex justify-between items-center">
                  <span className="text-gray-300">Installation Precision</span>
                  <span className="text-red-600 font-bold">99.5%</span>
                </div>
                <div className="w-full bg-gray-800 rounded-full h-2">
                  <div className="bg-red-600 h-2 rounded-full" style={{ width: '99.5%' }}></div>
                </div>
                
                <div className="flex justify-between items-center">
                  <span className="text-gray-300">Warranty Claims</span>
                  <span className="text-red-600 font-bold">0.5%</span>
                </div>
                <div className="w-full bg-gray-800 rounded-full h-2">
                  <div className="bg-red-600 h-2 rounded-full" style={{ width: '0.5%' }}></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Team Section */}
      <section className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            Our Expert <span className="text-red-600">Team</span>
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto mb-12">
            Our team of certified professionals brings decades of combined experience in heat rejection film technology and installation.
          </p>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-gray-900 rounded-lg p-8">
              <div className="w-20 h-20 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <Users className="h-10 w-10 text-white" />
              </div>
              <h3 className="text-xl font-semibold mb-2">Installation Specialists</h3>
              <p className="text-gray-400">
                Factory-trained technicians with extensive experience in precision film installation
              </p>
            </div>
            
            <div className="bg-gray-900 rounded-lg p-8">
              <div className="w-20 h-20 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <Shield className="h-10 w-10 text-white" />
              </div>
              <h3 className="text-xl font-semibold mb-2">Quality Assurance</h3>
              <p className="text-gray-400">
                Dedicated quality control team ensuring every installation meets our high standards
              </p>
            </div>
            
            <div className="bg-gray-900 rounded-lg p-8">
              <div className="w-20 h-20 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <Award className="h-10 w-10 text-white" />
              </div>
              <h3 className="text-xl font-semibold mb-2">Customer Support</h3>
              <p className="text-gray-400">
                Knowledgeable support team providing ongoing assistance and maintenance guidance
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Commitment Section */}
      <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            Our <span className="text-red-600">Commitment</span>
          </h2>
          <p className="text-xl text-gray-300 mb-12">
            We are committed to delivering exceptional heat rejection solutions that exceed expectations and provide lasting value for our customers.
          </p>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-black rounded-lg p-8">
              <h3 className="text-2xl font-bold mb-4">Excellence in Every Project</h3>
              <p className="text-gray-400 mb-6">
                From initial consultation to final installation, we maintain the highest standards of professionalism and quality workmanship.
              </p>
              <div className="flex items-center justify-center">
                <CheckCircle className="h-8 w-8 text-red-600" />
              </div>
            </div>
            
            <div className="bg-black rounded-lg p-8">
              <h3 className="text-2xl font-bold mb-4">Continuous Innovation</h3>
              <p className="text-gray-400 mb-6">
                We stay at the forefront of heat rejection technology, constantly evaluating and adopting the latest advancements in the industry.
              </p>
              <div className="flex items-center justify-center">
                <TrendingUp className="h-8 w-8 text-red-600" />
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}