diff --git a/src/components/MainPage.tsx b/src/components/MainPage.tsx
new file mode 100644
index 0000000..ea9797c
--- /dev/null
+++ b/src/components/MainPage.tsx
@@ -0,0 +1,238 @@
+import React from 'react';
+import { Star } from 'lucide-react';
+
+interface TestimonialCardProps {
+  name?: string;
+  role?: string;
+  company?: string;
+  content?: string;
+  rating?: number;
+  avatar?: string;
+}
+
+const TestimonialCardTwelve: React.FC<TestimonialCardProps> = ({
+  name = "John Doe",  role = "Developer",  company = "Tech Corp",  content = "Great service and excellent support!",  rating = 5,
+  avatar = "/images/placeholder.webp"
+}) => {
+  return (
+    <div className="bg-white p-6 rounded-lg shadow-lg">
+      <div className="flex items-center mb-4">
+        <img src={avatar} alt={name} className="w-12 h-12 rounded-full mr-4" />
+        <div>
+          <h3 className="font-semibold">{name}</h3>
+          <p className="text-gray-600">{role} at {company}</p>
+        </div>
+      </div>
+      <div className="flex mb-4">
+        {Array.from({ length: rating }).map((_, i) => (
+          <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
+        ))}
+      </div>
+      <p className="text-gray-700">{content}</p>
+    </div>
+  );
+};
+
+const MainPage: React.FC = () => {
+  const testimonials = [
+    {
+      name: "Sarah Johnson",      role: "Product Manager",      company: "TechStart",      content: "Outstanding quality and professional service. Highly recommended!",      rating: 5
+    },
+    {
+      name: "Mike Chen",      role: "CTO",      company: "InnovateCorp",      content: "Exceeded our expectations in every way. Great team to work with.",      rating: 5
+    },
+    {
+      name: "Emily Davis",      role: "Designer",      company: "Creative Agency",      content: "Fantastic results and smooth collaboration throughout the project.",      rating: 5
+    }
+  ];
+
+  const companies = [
+    { name: "Sanofi", logo: "/images/sanofi.b18c1526-1768995250449.png" },
+    { name: "Adidas", logo: "/images/adidas.718f26f2-1768995250458.svg" },
+    { name: "Mercedes", logo: "/images/mercedes.ee8047a9-1768995250815.png" },
+    { name: "GitLab", logo: "/images/gitlab.4f9d2995-1768995250825.png" },
+    { name: "Decathlon", logo: "/images/decathlon.1f3c4744-1768995250828.png" },
+    { name: "Roche", logo: "/images/roche-logo.979d9061-1768995250830.png" },
+    { name: "Autodesk", logo: "/images/autodesk.a7f2b58e-1768995250846.png" },
+    { name: "Capgemini", logo: "/images/capgemini.a1d43b77-1768995250853.svg" },
+    { name: "Red Hat", logo: "/images/red-hat.c5e6e64a-1768995250854.svg" },
+    { name: "IBM", logo: "/images/ibm.b8c76e06-1768995250854.svg" },
+    { name: "BMW", logo: "/images/bmw.0ce4c05c-1768995250854.svg" },
+    { name: "TotalEnergies", logo: "/images/totalenergies.5a993082-1768995250856.svg" }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <header className="bg-white shadow-sm">
+        <div className="container mx-auto px-4 py-6">
+          <div className="flex items-center justify-between">
+            <img 
+              src="/images/logo-small-gradient.76616405-1768995250058.svg" 
+              alt="Logo" 
+              className="h-8" 
+            />
+            <nav className="hidden md:flex space-x-8">
+              <a href="#home" className="text-gray-700 hover:text-blue-600">Home</a>
+              <a href="#about" className="text-gray-700 hover:text-blue-600">About</a>
+              <a href="#services" className="text-gray-700 hover:text-blue-600">Services</a>
+              <a href="#testimonials" className="text-gray-700 hover:text-blue-600">Testimonials</a>
+              <a href="#contact" className="text-gray-700 hover:text-blue-600">Contact</a>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      {/* Hero Section */}
+      <section id="home" data-section="home" className="py-20 bg-gradient-to-br from-blue-50 to-indigo-100">
+        <div className="container mx-auto px-4 text-center">
+          <h1 className="text-5xl font-bold text-gray-900 mb-6">
+            Build Amazing Digital Experiences
+          </h1>
+          <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
+            We create innovative solutions that help businesses thrive in the digital world.
+          </p>
+          <button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors">
+            Get Started
+          </button>
+        </div>
+      </section>
+
+      {/* Companies Section */}
+      <section className="py-16 bg-white">
+        <div className="container mx-auto px-4">
+          <h2 className="text-center text-gray-600 mb-12">Trusted by industry leaders</h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center">
+            {companies.map((company, index) => (
+              <div key={index} className="flex justify-center">
+                <img 
+                  src={company.logo} 
+                  alt={company.name} 
+                  className="h-8 opacity-60 hover:opacity-100 transition-opacity" 
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Services Section */}
+      <section id="services" data-section="services" className="py-20 bg-gray-50">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-6">Our Services</h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              We offer comprehensive digital solutions to help your business succeed.
+            </p>
+          </div>
+          <div className="grid md:grid-cols-3 gap-8">
+            <div className="bg-white p-8 rounded-lg shadow-sm hover:shadow-lg transition-shadow">
+              <img src="/images/conversation.2689303c-1768995250934.svg" alt="Consulting" className="h-16 mb-6" />
+              <h3 className="text-2xl font-semibold mb-4">Digital Consulting</h3>
+              <p className="text-gray-600">
+                Strategic guidance to help you navigate the digital landscape and make informed decisions.
+              </p>
+            </div>
+            <div className="bg-white p-8 rounded-lg shadow-sm hover:shadow-lg transition-shadow">
+              <img src="/images/big-data.88454030-1768995251151.svg" alt="Development" className="h-16 mb-6" />
+              <h3 className="text-2xl font-semibold mb-4">Web Development</h3>
+              <p className="text-gray-600">
+                Custom web applications built with modern technologies and best practices.
+              </p>
+            </div>
+            <div className="bg-white p-8 rounded-lg shadow-sm hover:shadow-lg transition-shadow">
+              <img src="/images/protect.5939735a-1768995251847.svg" alt="Security" className="h-16 mb-6" />
+              <h3 className="text-2xl font-semibold mb-4">Digital Security</h3>
+              <p className="text-gray-600">
+                Comprehensive security solutions to protect your digital assets and data.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials Section */}
+      <section id="testimonials" data-section="testimonials" className="py-20 bg-white">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-6">What Our Clients Say</h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              Don't just take our word for it - hear from our satisfied customers.
+            </p>
+          </div>
+          <div className="grid md:grid-cols-3 gap-8">
+            {testimonials.map((testimonial, index) => (
+              <TestimonialCardTwelve key={index} {...testimonial} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Contact Section */}
+      <section id="contact" data-section="contact" className="py-20 bg-gray-900 text-white">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold mb-6">Get In Touch</h2>
+            <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+              Ready to start your next project? Let's discuss how we can help you achieve your goals.
+            </p>
+          </div>
+          <div className="max-w-md mx-auto">
+            <form className="space-y-6">
+              <input 
+                type="text" 
+                placeholder="Your Name" 
+                className="w-full px-4 py-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:border-blue-500 focus:outline-none" 
+              />
+              <input 
+                type="email" 
+                placeholder="Your Email" 
+                className="w-full px-4 py-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:border-blue-500 focus:outline-none" 
+              />
+              <textarea 
+                placeholder="Your Message" 
+                rows={4}
+                className="w-full px-4 py-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:border-blue-500 focus:outline-none" 
+              />
+              <button 
+                type="submit" 
+                className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-semibold transition-colors"
+              >
+                Send Message
+              </button>
+            </form>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-black text-white py-12">
+        <div className="container mx-auto px-4">
+          <div className="text-center">
+            <img 
+              src="/images/logo-small-gradient.76616405-1768995250058.svg" 
+              alt="Logo" 
+              className="h-8 mx-auto mb-6" 
+            />
+            <p className="text-gray-400 mb-6">
+              Building the future of digital experiences, one project at a time.
+            </p>
+            <div className="flex justify-center space-x-6">
+              <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                Privacy Policy
+              </a>
+              <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                Terms of Service
+              </a>
+              <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                Contact
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default MainPage;
\ No newline at end of file