Please recreate the webpage as it is attached in the images

index.html

@@ -42,69 +42,80 @@
     </nav>
 
     <!-- Hero Section -->
-    <section class="hero-gradient text-white py-20">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <h1 class="text-5xl font-bold mb-6">Design. Prototype. Collaborate.</h1>
-            <p class="text-xl mb-8 max-w-2xl mx-auto">The modern way to design and build products together</p>
-            <button class="px-8 py-3 rounded-md text-indigo-600 bg-white hover:bg-gray-100 font-semibold text-lg">Get Started</button>
-            <div class="mt-12">
-                <img src="http://static.photos/technology/1024x576/42" alt="Figma interface" class="rounded-lg shadow-2xl mx-auto">
+    <section class="hero-gradient text-white py-32">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-12 md:mb-0">
+                    <h1 class="text-5xl font-bold mb-6 leading-tight">The collaborative interface design tool</h1>
+                    <p class="text-xl mb-8">Create, share, and test designs for websites, mobile apps, and more - all in one place.</p>
+                    <div class="flex space-x-4">
+                        <button class="px-6 py-3 rounded-md text-indigo-600 bg-white hover:bg-gray-100 font-semibold">Try Figma for free</button>
+                        <button class="px-6 py-3 rounded-md text-white border-2 border-white hover:bg-white hover:text-indigo-600 font-semibold">Watch demo</button>
+                    </div>
+                </div>
+                <div class="md:w-1/2">
+                    <img src="https://huggingface.co/spaces/RoxyJune/figmasavvy-design-explorer/resolve/main/images/Screenshot%202025-10-07%20at%2015.39.37.png" alt="Figma interface" class="rounded-lg shadow-2xl">
+                </div>
             </div>
         </div>
     </section>
 
     <!-- Features Section -->
-    <section class="py-20 bg-gray-50">
+    <section class="py-24 bg-white">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h2 class="text-3xl font-bold text-center mb-12">Powerful Features</h2>
-            <div class="grid md:grid-cols-3 gap-8">
-                <div class="feature-card bg-white p-8 rounded-lg shadow-md">
-                    <div class="text-indigo-600 mb-4">
-                        <i data-feather="layout" class="w-12 h-12"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3">Design Tools</h3>
-                    <p class="text-gray-600">Professional vector editing, prototyping, and design systems.</p>
+            <div class="text-center mb-16">
+                <h2 class="text-3xl font-bold mb-4">Design without limits</h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">Figma helps teams create, test, and ship better designs from start to finish.</p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-12">
+                <div class="feature-card bg-gray-50 p-8 rounded-xl">
+                    <img src="https://huggingface.co/spaces/RoxyJune/figmasavvy-design-explorer/resolve/main/images/Screenshot%202025-10-07%20at%2015.39.40.png" alt="Design Tools" class="rounded-lg mb-6">
+                    <h3 class="text-2xl font-bold mb-3">Professional design tools</h3>
+                    <p class="text-gray-600">Create beautiful interfaces with a powerful yet intuitive vector editing toolset.</p>
                 </div>
-                <div class="feature-card bg-white p-8 rounded-lg shadow-md">
-                    <div class="text-indigo-600 mb-4">
-                        <i data-feather="users" class="w-12 h-12"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3">Real-time Collaboration</h3>
-                    <p class="text-gray-600">Work together in the same file at the same time, no save required.</p>
+                <div class="feature-card bg-gray-50 p-8 rounded-xl">
+                    <img src="https://huggingface.co/spaces/RoxyJune/figmasavvy-design-explorer/resolve/main/images/Screenshot%202025-10-07%20at%2015.39.44.png" alt="Collaboration" class="rounded-lg mb-6">
+                    <h3 class="text-2xl font-bold mb-3">Real-time collaboration</h3>
+                    <p class="text-gray-600">See changes and comments from teammates as they happen, live in the canvas.</p>
                 </div>
-                <div class="feature-card bg-white p-8 rounded-lg shadow-md">
-                    <div class="text-indigo-600 mb-4">
-                        <i data-feather="code" class="w-12 h-12"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3">Developer Handoff</h3>
-                    <p class="text-gray-600">Generate CSS, iOS, and Android code from your designs.</p>
+                <div class="feature-card bg-gray-50 p-8 rounded-xl">
+                    <img src="https://huggingface.co/spaces/RoxyJune/figmasavvy-design-explorer/resolve/main/images/Screenshot%202025-10-07%20at%2015.39.48.png" alt="Prototyping" class="rounded-lg mb-6">
+                    <h3 class="text-2xl font-bold mb-3">Interactive prototypes</h3>
+                    <p class="text-gray-600">Create clickable prototypes that feel like the real thing, no coding required.</p>
                 </div>
             </div>
         </div>
     </section>
 
     <!-- Testimonials -->
-    <section class="py-20 bg-white">
+    <section class="py-24 bg-gray-50">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h2 class="text-3xl font-bold text-center mb-12">Trusted by teams worldwide</h2>
-            <div class="grid md:grid-cols-2 gap-8">
-                <div class="bg-gray-50 p-8 rounded-lg">
-                    <p class="text-gray-700 italic mb-4">"Figma has transformed how our design team works together. The real-time collaboration is game-changing."</p>
+            <div class="text-center mb-16">
+                <h2 class="text-3xl font-bold mb-4">Loved by designers at</h2>
+                <div class="flex flex-wrap justify-center gap-8 items-center">
+                    <img src="https://huggingface.co/spaces/RoxyJune/figmasavvy-design-explorer/resolve/main/images/Screenshot%202025-10-07%20at%2015.39.51.png" alt="Uber logo" class="h-8">
+                    <img src="https://huggingface.co/spaces/RoxyJune/figmasavvy-design-explorer/resolve/main/images/Screenshot%202025-10-07%20at%2015.39.54.png" alt="Twitter logo" class="h-8">
+                    <img src="https://huggingface.co/spaces/RoxyJune/figmasavvy-design-explorer/resolve/main/images/Screenshot%202025-10-07%20at%2015.39.44.png" alt="Microsoft logo" class="h-8">
+                </div>
+            </div>
+            <div class="grid md:grid-cols-2 gap-12">
+                <div class="bg-white p-10 rounded-xl shadow-sm">
+                    <p class="text-xl italic mb-6">"Figma has revolutionized how we design as a team. Being able to collaborate in real-time has cut our design process in half."</p>
                     <div class="flex items-center">
-                        <img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full mr-4">
+                        <img src="http://static.photos/people/200x200/1" alt="User" class="w-14 h-14 rounded-full mr-4">
                         <div>
-                            <p class="font-semibold">Sarah Johnson</p>
-                            <p class="text-gray-600">Design Lead at TechCorp</p>
+                            <p class="font-bold text-lg">Sarah Johnson</p>
+                            <p class="text-gray-600">Head of Design, TechCorp</p>
                         </div>
                     </div>
                 </div>
-                <div class="bg-gray-50 p-8 rounded-lg">
-                    <p class="text-gray-700 italic mb-4">"As a developer, the handoff features save me hours of work. Everything is perfectly specified."</p>
+                <div class="bg-white p-10 rounded-xl shadow-sm">
+                    <p class="text-xl italic mb-6">"The developer handoff tools in Figma have saved our team countless hours. Everything we need is right there."</p>
                     <div class="flex items-center">
-                        <img src="http://static.photos/people/200x200/2" alt="User" class="w-12 h-12 rounded-full mr-4">
+                        <img src="http://static.photos/people/200x200/2" alt="User" class="w-14 h-14 rounded-full mr-4">
                         <div>
-                            <p class="font-semibold">Michael Chen</p>
-                            <p class="text-gray-600">Senior Developer at AppWorks</p>
+                            <p class="font-bold text-lg">Michael Chen</p>
+                            <p class="text-gray-600">Engineering Manager, AppWorks</p>
                         </div>
                     </div>
                 </div>