[9:15 am, 25/12/2025] Protech Solutionzz: import React from 'react';
import { Camera, Fingerprint, Wifi, Home, Sun, Phone, MapPin, ShieldCheck, Wrench, Shield } from 'lucide-react';

const App = () => {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center p-4 font-sans">
    {/* Flyer Container */}
    <div className="bg-white max-w-md w-full rounded-3xl shadow-2xl overflow-hidden border border-gray-200">

        {/* Header Section with Logo */}
        <div className="bg-slate-900 text-white p-8 text-center relative overflow-hidden">
            {/* Decorative background element */}
            <div className="absolute -top-10 -right-10 w-32 h-32 bg-blue-600 rounded-full blur-3xl opacity-20"></div>

            <div className="flex justify-center mb-4">
                {/* Custom Logo Composition */}
                <div className="relative group">
                    <div
                        className="absolute inset-0 bg-blue-500 rounded-2xl blur-lg opacity-40 group-hover:opacity-60 transition-opacity">
                    </div>
                    <div
                        className="relative bg-gradient-to-br from-blue-600 to-blue-800 p-4 rounded-2xl border border-blue-400 shadow-xl flex items-center justify-center">
                        <div className="relative">
                            <Shield size={48} className="text-white opacity-20" strokeWidth={1} />
                            <div className="absolute inset-0 flex items-center justify-center">
                                <Camera size={32} className="text-white drop-shadow-md" strokeWidth={2.5} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <h1 className="text-3xl font-black tracking-tighter uppercase">
                Protech <span className="text-blue-500">Solutionzz</span>
            </h1>
            <div className="flex items-center justify-center gap-2 mt-2">
                <div className="h-px w-8 bg-blue-500"></div>
                <p className="text-blue-300 font-bold text-xs uppercase tracking-widest">The Surveillance Under One Roof
                </p>
                <div className="h-px w-8 bg-blue-500"></div>
            </div>
        </div>

        {/* Hero Message */}
        <div className="bg-gradient-to-b from-blue-50 to-white p-6 text-center">
            <h2 className="text-xl font-extrabold text-slate-800 flex items-center justify-center gap-2">
                Complete Security Solutions
                <ShieldCheck size={20} className="text-blue-600" />
            </h2>
            <p className="text-slate-600 text-sm mt-2 max-w-xs mx-auto">
                Professional protection for your home and business in Coimbatore.
            </p>
        </div>

        {/* Services Grid */}
        <div className="px-6 pb-6 grid grid-cols-1 gap-3">
            <ServiceItem icon={<Camera size={18} className="text-blue-600" />}
            title="CCTV Solutions"
            desc="Advanced Analog & IP Camera systems."
            />
            <ServiceItem icon={<Fingerprint size={18} className="text-blue-600" />}
            title="Biometrics & Access"
            desc="Fingerprint & facial recognition security."
            />
            <ServiceItem icon={<Wifi size={18} className="text-blue-600" />}
            title="Networking"
            desc="Robust wired & wireless infrastructure."
            />
            <ServiceItem icon={<Home size={18} className="text-blue-600" />}
            title="Smart Automation"
            desc="Control your property from your phone."
            />
            <ServiceItem icon={<Sun size={18} className="text-blue-600" />}
            title="Solar Energy"
            desc="Power your life with sustainable energy."
            />
            <ServiceItem icon={<Phone size={18} className="text-blue-600" />}
            title="Intercom Systems"
            desc="Seamless Analog & IP communication."
            />
        </div>

        {/* Service Guarantee */}
        <div className="px-6">
            <div className="bg-slate-50 border-2 border-dashed border-blue-200 rounded-xl p-4 flex items-center justify-center
[9:18 am, 25/12/2025] Protech Solutionzz: import React from 'react';
import { Camera, Fingerprint, Wifi, Home, Sun, Phone, MapPin, ShieldCheck, Wrench, Shield } from 'lucide-react';

const App = () => {
  return (
    <div className=" min-h-screen bg-gray-100 flex items-center justify-center p-4 font-sans">
                {/* Flyer Container */}
                <div className="bg-white max-w-md w-full rounded-3xl shadow-2xl overflow-hidden border border-gray-200">

                    {/* Header Section with Logo */}
                    <div className="bg-slate-900 text-white p-8 text-center relative overflow-hidden">
                        {/* Decorative background element */}
                        <div
                            className="absolute -top-10 -right-10 w-32 h-32 bg-blue-600 rounded-full blur-3xl opacity-20">
                        </div>

                        <div className="flex justify-center mb-4">
                            {/* Custom Logo Composition */}
                            <div className="relative group">
                                <div
                                    className="absolute inset-0 bg-blue-500 rounded-2xl blur-lg opacity-40 group-hover:opacity-60 transition-opacity">
                                </div>
                                <div
                                    className="relative bg-gradient-to-br from-blue-600 to-blue-800 p-4 rounded-2xl border border-blue-400 shadow-xl flex items-center justify-center">
                                    <div className="relative">
                                        <Shield size={48} className="text-white opacity-20" strokeWidth={1} />
                                        <div className="absolute inset-0 flex items-center justify-center">
                                            <Camera size={32} className="text-white drop-shadow-md" strokeWidth={2.5} />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <h1 className="text-3xl font-black tracking-tighter uppercase">
                            Protech <span className="text-blue-500">Solutionzz</span>
                        </h1>
                        <div className="flex items-center justify-center gap-2 mt-2">
                            <div className="h-px w-8 bg-blue-500"></div>
                            <p className="text-blue-300 font-bold text-xs uppercase tracking-widest">The Surveillance
                                Under One Roof</p>
                            <div className="h-px w-8 bg-blue-500"></div>
                        </div>
                    </div>

                    {/* Hero Message */}
                    <div className="bg-gradient-to-b from-blue-50 to-white p-6 text-center">
                        <h2 className="text-xl font-extrabold text-slate-800 flex items-center justify-center gap-2">
                            Complete Security Solutions
                            <ShieldCheck size={20} className="text-blue-600" />
                        </h2>
                        <p className="text-slate-600 text-sm mt-2 max-w-xs mx-auto">
                            Professional protection for your home and business in Coimbatore.
                        </p>
                    </div>

                    {/* Services Grid */}
                    <div className="px-6 pb-6 grid grid-cols-1 gap-3">
                        <ServiceItem icon={<Camera size={18} className="text-blue-600" />}
                        title="CCTV Solutions"
                        desc="Advanced Analog & IP Camera systems."
                        />
                        <ServiceItem icon={<Fingerprint size={18} className="text-blue-600" />}
                        title="Biometrics & Access"
                        desc="Fingerprint & facial recognition security."
                        />
                        <ServiceItem icon={<Wifi size={18} className="text-blue-600" />}
                        title="Networking"
                        desc="Robust wired & wireless infrastructure."
                        />
                        <ServiceItem icon={<Home size={18} className="text-blue-600" />}
                        title="Smart Automation"
                        desc="Control your property from your phone."
                        />
                        <ServiceItem icon={<Sun size={18} className="text-blue-600" />}
                        title="Solar Energy"
                        desc="Power your life with sustainable energy."
                        />
                        <ServiceItem icon={<Phone size={18} className="text-blue-600" />}
                        title="Intercom Systems"
                        desc="Seamless Analog & IP communication."
                        />
                    </div>

                    {/* Service Guarantee */}
                    <div className="px-6">
                        <div
                            className="bg-slate-50 border-2 border-dashed border-blue-200 rounded-xl p-4 flex items-center justify-center gap-3">
                            <div className="bg-blue-600 p-2 rounded-full">
                                <Wrench className="text-white" size={16} />
                            </div>
                            <span className="text-slate-700 font-bold text-xs uppercase tracking-tight">Full Installation & Maintenance Included</span>
                        </div>
                    </div>

                    {/* Contact Footer */}
                    <div
                        className="bg-slate-900 text-white p-8 mt-6 rounded-t-3xl shadow-[0_-10px_30px_rgba(0,0,0,0.1)]">
                        <div className="flex flex-col gap-6">

                            <div className="flex items-start gap-4">
                                <div className="bg-slate-800 p-2 rounded-lg">
                                    <MapPin className="text-blue-400" size={20} />
                                </div>
                                <p className="text-sm text-gray-300 leading-snug">
                                    <span className="text-white font-bold block mb-1">Our Location:</span>
                                    2/35 Kannamal Nagar, TVS Nagar Road,<br />
                Kovundampalayam, Coimbatore 641030
                                </p>
                            </div>

                            <div className="text-center bg-blue-600/10 p-4 rounded-2xl border border-blue-500/20">
                                <p className="text-blue-400 text-xs font-black uppercase tracking-widest mb-2">Just Call
                                    For Service</p>
                                <a href="tel:9952361817"
                                    className="inline-flex items-center gap-3 text-3xl font-black text-white hover:text-blue-400 transition-colors">
                                    99523 61817
                                </a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            );
            };

            // Helper Component for Service Items
            const ServiceItem = ({ icon, title, desc }) => (
            <div
                className="flex items-center gap-4 p-3 rounded-xl border border-gray-100 bg-white shadow-sm hover:shadow-md hover:border-blue-200 transition-all cursor-default">
                <div className="bg-blue-50 p-2.5 rounded-lg shrink-0">
                    {icon}
                </div>
                <div>
                    <h3 className="font-bold text-slate-800 text-sm leading-none">{title}</h3>
                    <p className="text-slate-500 text-[11px] mt-1">{desc}</p>
                </div>
            </div>
            );

            export default App;