38892-vm/frontend/src/components/Beka/About.tsx

import React from 'react';
import { mdiCheckBold, mdiShieldCheck, mdiLightbulbOn, mdiStar } from '@mdi/js';
import BaseIcon from '../BaseIcon';
import ScrollReveal from './ScrollReveal';

const features = [
  {
    title: 'Garantili İşçilik',
    description: 'Tüm uygulamalarımızda uzun ömürlü ve garantili işçilik sunuyoruz.',
    icon: mdiShieldCheck
  },
  {
    title: 'Modern Tasarımlar',
    description: 'En son trendlere uygun, estetik ve modern mekanlar tasarlıyoruz.',
    icon: mdiLightbulbOn
  },
  {
    title: 'En İyi Malzeme',
    description: 'Sektördeki en kaliteli ve dayanıklı malzemeleri kullanıyoruz.',
    icon: mdiStar
  }
];

const About = () => {
  return (
    <section id="hakkimizda" className="py-24 bg-white overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col lg:flex-row items-center gap-16 lg:gap-24">
          <div className="lg:w-1/2 relative">
            <ScrollReveal animation="fade-in-left">
              <div className="relative z-10 rounded-3xl overflow-hidden shadow-2xl group">
                <img 
                  src="https://images.pexels.com/photos/1571470/pexels-photo-1571470.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" 
                  alt="Beka Kaplama Hakkımızda" 
                  className="w-full h-full object-cover aspect-[4/5] group-hover:scale-105 transition-transform duration-700"
                />
              </div>
            </ScrollReveal>

            {/* Experience Badge */}
            <ScrollReveal animation="scale-in" delay={300}>
              <div className="absolute -bottom-10 -right-10 bg-amber-600 p-10 rounded-3xl shadow-2xl z-20 hidden md:block border-8 border-white hover:scale-110 transition-transform duration-500">
                <div className="text-5xl font-black text-white mb-2 tracking-tighter animate-pulse font-sans">15+</div>
                <div className="text-sm font-bold text-amber-100 uppercase tracking-widest leading-tight font-body">Yıllık Sektörel<br />Tecrübe</div>
              </div>
            </ScrollReveal>

            {/* Background Decoration */}
            <div className="absolute -top-10 -left-10 w-40 h-40 bg-amber-100 rounded-full blur-3xl opacity-50 -z-10 animate-pulse"></div>
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full border-2 border-amber-600/10 rounded-3xl -rotate-6 -z-10"></div>
          </div>

          <div className="lg:w-1/2">
            <ScrollReveal animation="fade-in-up" delay={100}>
              <h2 className="text-xs font-black text-amber-600 uppercase tracking-[0.2em] mb-4 font-sans">Biz Kimiz?</h2>
              <h3 className="text-4xl md:text-5xl font-black text-gray-900 mb-8 leading-tight font-sans">Mekanlarınıza Değer <br />Katan Vizyon</h3>
            </ScrollReveal>
            
            <ScrollReveal animation="fade-in-up" delay={200}>
              <p className="text-xl text-gray-500 mb-10 leading-relaxed font-medium italic border-l-4 border-amber-600 pl-6 bg-amber-50 py-4 pr-4 rounded-r-xl font-serif">
                &quot;Beka Kaplama olarak, sadece duvarları kaplamıyor, yaşam alanlarınızın ruhunu değiştiriyoruz.&quot;
              </p>
            </ScrollReveal>

            <ScrollReveal animation="fade-in-up" delay={300}>
              <p className="text-gray-600 mb-10 leading-relaxed font-body">
                Kurulduğumuz günden bu yana, modern mimari trendlerini takip ederek müşterilerimize en kaliteli kaplama çözümlerini sunuyoruz. Akustik panel sistemlerinden PU cephe lambri uygulamalarına kadar geniş ürün yelpazemiz ve uzman ekibimizle projelerinize estetik ve dayanıklılık katıyoruz.
              </p>
            </ScrollReveal>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
              <ScrollReveal animation="fade-in-up" delay={400} className="space-y-4">
                {['Müşteri Odaklılık', 'Kaliteli Malzeme', 'Hızlı Uygulama'].map((item, i) => (
                  <div key={i} className="flex items-center space-x-3 text-gray-800 font-bold hover:translate-x-2 transition-transform cursor-default font-body">
                    <div className="p-1 bg-green-100 rounded-full group">
                      <BaseIcon path={mdiCheckBold} size={18} className="text-green-600" />
                    </div>
                    <span>{item}</span>
                  </div>
                ))}
              </ScrollReveal>
              <ScrollReveal animation="fade-in-up" delay={500} className="space-y-4">
                {['Estetik Tasarım', 'Ekonomik Çözümler', 'Uzman Kadro'].map((item, i) => (
                  <div key={i} className="flex items-center space-x-3 text-gray-800 font-bold hover:translate-x-2 transition-transform cursor-default font-body">
                    <div className="p-1 bg-green-100 rounded-full">
                      <BaseIcon path={mdiCheckBold} size={18} className="text-green-600" />
                    </div>
                    <span>{item}</span>
                  </div>
                ))}
              </ScrollReveal>
            </div>

            <ScrollReveal animation="fade-in-up" delay={600} className="grid grid-cols-3 gap-6">
              {features.map((feature, index) => (
                <div key={index} className="text-center group cursor-default">
                  <div className="inline-flex p-3 bg-gray-50 rounded-2xl group-hover:bg-amber-600 group-hover:scale-110 transition-all duration-300 mb-4 border border-gray-100">
                    <BaseIcon path={feature.icon} size={24} className="text-amber-600 group-hover:text-white transition-colors" />
                  </div>
                  <h4 className="text-xs font-black text-gray-900 uppercase tracking-widest font-sans">{feature.title}</h4>
                </div>
              ))}
            </ScrollReveal>
          </div>
        </div>
      </div>
    </section>
  );
};

export default About;