Analyze this code which is I given & and add testimonials. Else all set don't change any thing just add testimonials on basis of this about page.

import React, { useEffect } from 'react'
import { 
  Clock, 
  Palette, 
  DollarSign, 
  MapPin, 
  Lightbulb, 
  Shield, 
  Users,
  ArrowRight
} from 'lucide-react';
import { motion } from 'framer-motion';

const fadeIn = {
  hidden: { opacity: 0, y: 20 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: { duration: 0.6 }
  }
};

const staggerContainer = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.2
    }
  }
};


const About = () => {
    useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
  
  return (
   <div className="bg-white min-h-screen">
      {/* Hero Section */}
      <motion.section 
        initial="hidden"
        animate="visible"
        variants={fadeIn}
        className="px-6 md:px-10 pt-16 pb-20 max-w-7xl mx-auto"
      >
        <div className="mb-2 text-sm font-medium tracking-wider text-gray-500 uppercase">
          Our Story
        </div>
        <h1 className="text-4xl md:text-6xl font-medium leading-tight mb-6 text-gray-900">
          An aesthetic space is <br />given harmony
        </h1>
        <p className="text-lg md:text-xl text-gray-600 max-w-2xl mb-10">
          Change your view to realize a neat and aesthetic corner of the house and amaze everyone.
          Make every moment in your home a valuable experience with our thoughtful designs.
        </p>
        <motion.button 
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
          className="bg-gray-900 text-white px-8 py-3 rounded-full flex items-center gap-2 hover:bg-gray-800 transition-colors"
        >
          Explore Now <ArrowRight size={18} />
        </motion.button>
      </motion.section>

      {/* Introduction Section */}
      <motion.section 
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        variants={staggerContainer}
        className="px-6 md:px-10 py-16 md:py-20 bg-gray-50"
      >
        <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
          <motion.div variants={fadeIn} className="order-2 md:order-1">
            <div className="text-sm font-medium tracking-wider text-gray-500 uppercase mb-3">
              About Clasika
            </div>
            <h2 className="text-3xl md:text-4xl font-medium mb-6 text-gray-900">
              Decorating homes & offices for more than a decade
            </h2>
            <p className="text-gray-600 mb-6">
              Clasika has been established since 2005 until now. We have handled more than 500 thousand customers who want their home equipment and furniture to be beautiful. With sufficient experience, we have won 2 world awards and trust in various countries around the world.
            </p>
            
            {/* <div className="flex gap-6 pt-4">
              <div className="flex items-center gap-2">
                <img src="https://www.pngitem.com/pimgs/m/21-219268_award-badge-transparent-background-hd-png-download.png" alt="Ultra Premium" className="h-10" />
              </div>
              <div className="flex items-center gap-2">
                <img src="" alt="Hyper Best" className="h-10" />
              </div>
            </div> */}
          </motion.div>
          <motion.div variants={fadeIn} className="order-1 md:order-2">
            <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace" alt="Elegant Interior" className="w-full h-auto rounded-lg shadow-lg" />
          </motion.div>
        </div>
      </motion.section>

      {/* Features Section */}
      <motion.section 
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        variants={staggerContainer}
        className="px-6 md:px-10 py-16 md:py-20 max-w-7xl mx-auto"
      >
        <div className="text-center mb-16">
          <div className="text-sm font-medium tracking-wider text-gray-500 uppercase mb-3">
            What We Offer
          </div>
          <h2 className="text-3xl md:text-4xl font-medium mb-6 text-gray-900">
            Quality and transparency at every step
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            We believe in creating spaces that don't just look beautiful but function beautifully too.
          </p>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-16">
          <motion.div variants={fadeIn} className="flex flex-col">
            <div className="bg-gray-50 w-14 h-14 rounded-full flex items-center justify-center mb-6">
              <Clock className="text-gray-800" size={24} />
            </div>
            <h3 className="text-xl font-medium mb-2 text-gray-900">Experience</h3>
            <p className="text-gray-600">
              With over a decade of experience, we understand what makes a space truly harmonious.
            </p>
          </motion.div>

          <motion.div variants={fadeIn} className="flex flex-col">
            <div className="bg-gray-50 w-14 h-14 rounded-full flex items-center justify-center mb-6">
              <Palette className="text-gray-800" size={24} />
            </div>
            <h3 className="text-xl font-medium mb-2 text-gray-900">Materials</h3>
            <p className="text-gray-600">
              We use only the finest materials: plywood, engineered wood, and metal for durability and aesthetics.
            </p>
          </motion.div>

          <motion.div variants={fadeIn} className="flex flex-col">
            <div className="bg-gray-50 w-14 h-14 rounded-full flex items-center justify-center mb-6">
              <Palette className="text-gray-800" size={24} />
            </div>
            <h3 className="text-xl font-medium mb-2 text-gray-900">Customization</h3>
            <p className="text-gray-600">
              Customization available to meet your style and space requirements, making every project unique.
            </p>
          </motion.div>

          <motion.div variants={fadeIn} className="flex flex-col">
            <div className="bg-gray-50 w-14 h-14 rounded-full flex items-center justify-center mb-6">
              <DollarSign className="text-gray-800" size={24} />
            </div>
            <h3 className="text-xl font-medium mb-2 text-gray-900">Transparent Pricing</h3>
            <p className="text-gray-600">
              Fixed-rate pricing from the start—no surprises. We believe in complete transparency.
            </p>
          </motion.div>

          <motion.div variants={fadeIn} className="flex flex-col">
            <div className="bg-gray-50 w-14 h-14 rounded-full flex items-center justify-center mb-6">
              <MapPin className="text-gray-800" size={24} />
            </div>
            <h3 className="text-xl font-medium mb-2 text-gray-900">Locations</h3>
            <p className="text-gray-600">
              Expanding from Gujarat with sample houses in Ahmedabad, Surat, Palanpur & Bangalore.
            </p>
          </motion.div>

          <motion.div variants={fadeIn} className="flex flex-col">
            <div className="bg-gray-50 w-14 h-14 rounded-full flex items-center justify-center mb-6">
              <Lightbulb className="text-gray-800" size={24} />
            </div>
            <h3 className="text-xl font-medium mb-2 text-gray-900">Innovation</h3>
            <p className="text-gray-600">
              Dedicated to innovation, experimenting with modern interiors and functional design.
            </p>
          </motion.div>
        </div>
      </motion.section>

      {/* Vision Section */}
      <motion.section 
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        variants={staggerContainer}
        className="px-6 md:px-10 py-16 md:py-20 bg-gray-50"
      >
        <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
          <motion.div variants={fadeIn}>
            <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c" alt="Modern Interior Design" className="w-full h-auto rounded-lg shadow-lg" />
          </motion.div>
          
          <motion.div variants={fadeIn}>
            <div className="text-sm font-medium tracking-wider text-gray-500 uppercase mb-3">
              Our Vision
            </div>
            <h2 className="text-3xl md:text-4xl font-medium mb-6 text-gray-900">
              Creating spaces that inspire joy
            </h2>
            <p className="text-gray-600 mb-6">
              We believe that a well-designed space can transform daily living. Our vision is to bring harmony and aesthetic beauty to every home and office we touch, making functional spaces that elevate the everyday experience.
            </p>
            
            <div className="space-y-4 mt-8">
              <div className="flex items-start gap-4">
                <div className="bg-white w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
                  <Shield className="text-gray-800" size={20} />
                </div>
                <div>
                  <h4 className="font-medium text-gray-900">Quality Assurance</h4>
                  <p className="text-gray-600">Each project undergoes rigorous quality checks before delivery.</p>
                </div>
              </div>
              
              <div className="flex items-start gap-4">
                <div className="bg-white w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
                  <Users className="text-gray-800" size={20} />
                </div>
                <div>
                  <h4 className="font-medium text-gray-900">Customer Trust</h4>
                  <p className="text-gray-600">Trusted by thousands, committed to craftsmanship & satisfaction.</p>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </motion.section>

      {/* CTA Section */}
      <motion.section 
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        variants={fadeIn}
        className="px-6 md:px-10 py-16 md:py-20 max-w-7xl mx-auto text-center"
      >
        <h2 className="text-3xl md:text-4xl font-medium mb-6 text-gray-900">
          Ready to transform your space?
        </h2>
        <p className="text-lg text-gray-600 max-w-2xl mx-auto mb-10">
          Visit our sample houses or schedule a consultation with our design experts to begin your journey.
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <motion.button 
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="bg-gray-900 text-white px-8 py-3 rounded-full flex items-center justify-center gap-2 hover:bg-gray-800 transition-colors"
          >
            Visit Sample Homes <ArrowRight size={18} />
          </motion.button>
          <motion.button 
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="bg-white text-gray-900 border border-gray-300 px-8 py-3 rounded-full flex items-center justify-center gap-2 hover:bg-gray-50 transition-colors"
          >
            Explore Projects
          </motion.button>
        </div>
      </motion.section>
    </div>
  )
}

export default About