💄 UI polish: improved spacing, image alignment, and hover animations in How It Works section

Author: addiiiti

src/components/HowItWorks.tsx

@@ -1,10 +1,10 @@
 import { motion } from "framer-motion";
-import { useState } from "react";
+
 
 const HowItWorks = () => {
   const cards = [
     {
-      title: "01. Smart Prompter Router",
+      title: "01. Smart Prompt Router",
       description:
         "Enter your task. We’ll understand your intent and run the best tools in the right order.",
       image: "/smart-prompter-router-flow.png",
@@ -32,15 +32,16 @@ const HowItWorks = () => {
       </div>
 
       <div className="container mx-auto px-4 md:px-6 relative z-10">
-        <div className="flex flex-col items-center gap-8">
-          <h2 className="text-4xl font-bold text-white">
+        <div className="flex flex-col items-center gap-3">
+          <h2 className="text-3xl md:text-4xl font-bold text-white font-['Space_Grotesk'] text-center leading-none mb-0">
             How it <span className="text-teal-400">Works?</span>
           </h2>
-          <p className="text-white text-center max-w-xl">
+          <p className="text-[1.125rem] leading-tight text-neutral-300 max-w-2xl text-center mt-0">
             Search or Prompt. Either way, iotastudio.ai finds the tools — so you don’t have to.
           </p>
+  
 
-          <div className="w-full flex flex-col gap-6">
+          <div className="w-full flex flex-col gap-6 mt-6">
             {cards.map((card, index) => (
               <motion.div
                 key={index}
@@ -106,4 +107,4 @@ const HowItWorks = () => {
   );
 };
 
-export default HowItWorks;
+export default HowItWorks;

src/components/ModelShowcase.tsx

@@ -24,7 +24,7 @@ const ModelCard: React.FC<ModelCardProps> = ({
   color
 }) => {
   return (
-    <div className="bg-neutral-800 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow border border-neutral-700">
+    <div className="bg-neutral-800 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-out border border-neutral-700 cursor-pointer hover:scale-105">
       <div 
         className="h-48 relative overflow-hidden"
         style={{ backgroundColor: `${color}10` }}
@@ -150,15 +150,15 @@ const ModelShowcase: React.FC = () => {
     >
       {/* Background Grid */}
       <div className="absolute inset-0 opacity-10 z-0">
-    <div
-      className="absolute inset-0"
-      style={{
-        backgroundImage:
-          'linear-gradient(to right, #00B39F 1px, transparent 1px), linear-gradient(to bottom, #00B39F 1px, transparent 1px)',
-        backgroundSize: '44px 44px',
-      }}
-    ></div>
-  </div>
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage:
+              'linear-gradient(to right, #00B39F 1px, transparent 1px), linear-gradient(to bottom, #00B39F 1px, transparent 1px)',
+            backgroundSize: '44px 44px',
+          }}
+        ></div>
+      </div>
 
       <div className="container mx-auto px-4 md:px-6 relative z-10">
         <div className="text-center mb-12">