From db854d374a2b8f83a8b296e66873827f56b2b2a7 Mon Sep 17 00:00:00 2001
From: Samrat Malisetti <samratmalisetti@Samrats-MacBook-Pro.local>
Date: Thu, 18 Jul 2024 23:06:28 -0700
Subject: [PATCH] fixed mbile layout

---
 apps/web/app/(landing)/Features/generating.tsx | 2 +-
 apps/web/app/(landing)/Features/index.tsx      | 4 ++--
 apps/web/app/(landing)/Showcase.tsx            | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/(landing)/Features/generating.tsx b/apps/web/app/(landing)/Features/generating.tsx
index 6cd9ad73..6dd0b231 100644
--- a/apps/web/app/(landing)/Features/generating.tsx
+++ b/apps/web/app/(landing)/Features/generating.tsx
@@ -3,7 +3,7 @@ import { Loader, Loader2 } from "lucide-react";
 const Generating = ({ className }: { className?: string }) => {
   return (
     <div
-      className={`flex items-center h-[3.5rem] px-6 bg-n-8/80 rounded-[1.7rem] ${
+      className={`flex items-center md:h-[3.5rem] px-6 bg-n-8/80 rounded-[1.7rem] ${
         className || ""
       } text-base`}
     >
diff --git a/apps/web/app/(landing)/Features/index.tsx b/apps/web/app/(landing)/Features/index.tsx
index ab29d701..d7c606e1 100644
--- a/apps/web/app/(landing)/Features/index.tsx
+++ b/apps/web/app/(landing)/Features/index.tsx
@@ -16,7 +16,7 @@ const Services = () => {
         </div>
 
         <div className="relative bg-page-gradient">
-          <div className="flex overflow-hidden relative items-center p-8 mb-5 rounded-3xl border lg:p-20 z-1 h-[39rem] border-white/20 xl:h-[46rem]">
+          <div className="flex overflow-hidden relative items-stretch p-8 mb-5 rounded-3xl border lg:p-20 z-1 h-[55rem] md:h-[45rem] border-white/20 xl:h-[46rem]">
             <img
               src="/images/tailwind-bg-gradient.avif"
               className="absolute top-0 right-0 opacity-100 z-2"
@@ -168,7 +168,7 @@ const Services = () => {
           </div>
 
           <div className="grid relative gap-5 lg:grid-cols-2 z-1">
-            <div className="overflow-hidden relative rounded-3xl border max-h-[20rem] min-h-[33rem] bg-hero-gradient bg-slate-950/10 border-white/10">
+            <div className="overflow-hidden relative rounded-3xl border max-h-[20rem] min-h-[40rem] md:min-h-[33rem] bg-hero-gradient bg-slate-950/10 border-white/10">
               <div className="absolute inset-0">
                 <AnimatedBeamShow />
               </div>
diff --git a/apps/web/app/(landing)/Showcase.tsx b/apps/web/app/(landing)/Showcase.tsx
index 577b9266..c0650742 100644
--- a/apps/web/app/(landing)/Showcase.tsx
+++ b/apps/web/app/(landing)/Showcase.tsx
@@ -155,7 +155,7 @@ function FeaturesMobile() {
           <Feature feature={feature} className="mx-auto max-w-2xl" isActive />
           <div className="relative mt-10 pb-10">
             <div className="absolute -inset-x-4 bottom-0 top-8 bg-page-gradient sm:-inset-x-6" />
-            <div className="relative mx-auto w-[52.75rem] overflow-hidden rounded-xl bg-glass-gradient shadow-lg shadow-gray-200/5 ring-1 ring-slate-500/10">
+            <div className="relative mx-auto lg:w-[52.75rem] md:w-[40rem] overflow-hidden rounded-xl bg-glass-gradient shadow-lg shadow-gray-200/5 ring-1 ring-slate-500/10">
               <img
                 className="w-full"
                 src={`/images/${feature.image}`}