Merge pull request #102 from autonomous-testing/feat/make-vibe-hero-section-responsive

feat: make vibe hero section responsive

Author: fotyG

src/components/home-page/HomeHeroVibe.tsx

@@ -80,9 +80,9 @@ const HomeHeroVibe = () => {
     setAppUrl(e.target.value);
   };
   return (
-    <div className="min-h-[50vh] flex flex-col justify-center items-center gap-10 mx-5">
+    <div className="min-h-[50vh] flex flex-col justify-center items-center gap-5 md:gap-10 mx-5">
       <section>
-        <h1 className="font-bold text-center text-5xl sm:text-5xl md:text-6xl text-pretty">
+        <h1 className="font-bold text-center text-4xl sm:text-5xl md:text-6xl text-pretty">
           Which web app do you want to test?
         </h1>
         <h6 className="text-secondary-wopee dark:text-primary-wopee text-center text-md sm:text-lg md:text-xl text-pretty">
@@ -92,15 +92,15 @@ const HomeHeroVibe = () => {
       </section>
 
       <div className="border-2 border-solid border-secondary-wopee dark:border-primary-wopee rounded-md p-3 w-full max-w-6xl flex flex-col gap-3">
-        <div className="opacity-65 flex items-center text-xs">
+        <div className="opacity-65 flex flex-col md:flex-row items-center text-xs">
           Test environment URL:{" "}
           <div className="relative">
             <input
               ref={urlInputRef}
               type="url"
               value={appUrl}
               size={parseSize}
-              className="border-none ml-1 pl-2 pr-5 py-1 bg-gray-300 dark:bg-gray-700 rounded-md"
+              className="border-none ml-1 pl-2 pr-5 py-1 bg-gray-300 dark:bg-gray-700 rounded-md max-w-[300px] sm:max-w-none"
               onChange={handleUrlChange}
             />
             {appType === AppType.YOUR_APPLICATION && <LockTooltip />}

src/components/home-page/vibe/ApplicationTypeSwitch.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { cn } from "@/lib/utils";
 import { AppType } from "./enums";
 import LockTooltip from "./LockTooltip";
+import { AppWindow, Globe, Landmark, ShoppingCart } from "lucide-react";
 
 const APP_TYPE_BUTTONS = [
   {
@@ -36,16 +37,19 @@ const ApplicationTypeSwitch = ({
         <div
           key={app.label}
           className={cn(
-            "px-3 py-2 bg-gray-300 rounded-md w-[130px] hover:cursor-pointer flex justify-center items-center gap-1 relative",
+            "p-2 bg-gray-300 rounded-md md:w-[150px] hover:cursor-pointer flex justify-center items-center gap-1 relative",
             app.value === appType
               ? "bg-secondary-wopee dark:bg-primary-wopee text-white dark:text-black"
               : "dark:bg-gray-700 "
           )}
           onClick={() => handleAppTypeChange(app.value)}
         >
           {app.value === AppType.YOUR_APPLICATION && <LockTooltip size={4} />}
-
-          {app.label}
+          {app.value === AppType.WEBSITE && <Globe size={16} />}
+          {app.value === AppType.E_COMMERCE && <ShoppingCart size={16} />}
+          {app.value === AppType.BANKING && <Landmark size={16} />}
+          {app.value === AppType.YOUR_APPLICATION && <AppWindow size={16} />}
+          <span className="hidden md:block">{app.label}</span>
         </div>
       ))}
     </section>