feat(landing): make hero com responsive

Author: ishaksebsib

apps/docs/components/hero.tsx

@@ -25,7 +25,7 @@ export function Hero() {
 		: "radial-gradient(ellipse 120% 100% at 50% 0%, transparent 0%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0.7) 100%)";
 
 	return (
-		<div className="relative flex flex-col items-center justify-center min-h-[calc(100vh-64px)] w-full overflow-hidden p-4 md:p-8">
+		<div className="relative flex flex-col items-center justify-center min-h-screen w-full overflow-hidden pt-24 p-4 md:pt-32 lg:p-8 ">
 			{/* Background Grid with Gradient Overlay */}
 			<div className="absolute inset-0 pointer-events-none">
 				{/* Grid Pattern */}
@@ -49,25 +49,25 @@ export function Hero() {
 				/>
 			</div>
 
-			<div className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-7xl w-full items-center">
+			<div className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-12 max-w-7xl w-full items-center mt-8">
 				{/* Left Column */}
-				<div className="flex flex-col items-start text-left space-y-6">
-					<div className="flex items-center gap-2 mb-2 text-xs text-gray-600 dark:text-gray-400">
+				<div className="flex flex-col items-start text-left space-y-4 sm:space-y-6">
+					<div className="flex items-center gap-2 mb-1 sm:mb-2 text-xs sm:text-sm text-gray-600 dark:text-gray-400">
 						<div className="w-2 h-2 rounded-full bg-black/50 dark:bg-white/50" />
 						<span>Blazingly Fast :)</span>
 					</div>
 
-					<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-black dark:text-white leading-tight">
+					<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold tracking-tight text-black dark:text-white leading-tight">
 						The AI Toolkit for <span className="text-orange-500">Rust</span>
 					</h1>
 
-					<p className="text-base text-gray-600 dark:text-gray-400 max-w-xl">
+					<p className="text-sm sm:text-base text-gray-600 dark:text-gray-400 max-w-full sm:max-w-xl">
 						An open-source Rust library for building AI-powered applications,
 						inspired by the Vercel AI SDK.
 					</p>
 
 					{/* Command Snippet */}
-					<div className="w-full rounded-xs max-w-md bg-white border border-black/10 dark:bg-black dark:border-white/10 p-2.5 flex items-center gap-2.5 font-mono text-xs">
+					<div className="w-full rounded-xs max-w-full sm:max-w-md bg-white border border-black/10 dark:bg-black dark:border-white/10 p-2.5 flex items-center gap-2.5 font-mono text-xs">
 						<span className="text-black dark:text-white font-semibold">
 							<span className="text-red-500 dark:text-red-400"> cargo </span>add{" "}
 							<span className="text-orange-500">aisdk</span>
@@ -81,16 +81,16 @@ export function Hero() {
 					<div className="flex flex-wrap gap-3">
 						<Button
 							asChild
-							size="default"
-							className="bg-black dark:bg-white rounded-xs font-semibold text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200 px-6"
+							size="sm"
+							className="bg-black dark:bg-white rounded-xs font-semibold text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200 px-4 sm:px-6"
 						>
 							<Link href="/docs">GET STARTED</Link>
 						</Button>
 						<Button
 							variant="outline"
-							size="default"
+							size="sm"
 							asChild
-							className="px-5 rounded-xs border-black/10 dark:border-white/10 bg-transparent text-black dark:text-white hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white"
+							className="px-3 sm:px-5 rounded-xs border-black/10 dark:border-white/10 bg-transparent text-black dark:text-white hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white"
 						>
 							<Link href="https://github.com/lazy-hq/aisdk" target="_blank">
 								<SquareArrowOutUpRight className="mr-1 h-4 w-4" />