From dbaae0ab2bc39de87dd4719e37f48e4b94ea2262 Mon Sep 17 00:00:00 2001
From: KinfeMichael Tariku <65047246+Kinfe123@users.noreply.github.com>
Date: Fri, 15 Aug 2025 04:45:57 +0300
Subject: [PATCH] docs: hero section alignment with feature section on big
 screens (#4018)

* fix: hero section alignment with feature section on big screens

* fix

---------

Co-authored-by: Bereket Engida <Bekacru@gmail.com>
---
 docs/components/features.tsx     |  6 +++---
 docs/components/landing/hero.tsx | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/components/features.tsx b/docs/components/features.tsx
index 340c2805ae..a650c63c18 100644
--- a/docs/components/features.tsx
+++ b/docs/components/features.tsx
@@ -71,7 +71,7 @@ const features = [
 
 export default function Features({ stars }: { stars: string | null }) {
 	return (
-		<div className="md:w-10/12 mt-10 mx-auto font-geist relative md:border-l-0 md:border-b-0 md:border-[1.2px] rounded-none -pr-2 dark:bg-black/[0.95]">
+		<div className="md:w-10/12 mt-10 mx-auto font-geist relative md:border-l-0 md:border-b-0 md:border-[1.2px] rounded-none -pr-2 dark:bg-black/[0.95] ">
 			<div className="w-full md:mx-0">
 				<div className="grid grid-cols-1 relative md:grid-rows-2 md:grid-cols-3 border-b-[1.2px]">
 					<div className="hidden md:grid top-1/2 left-0 -translate-y-1/2 w-full grid-cols-3 z-10 pointer-events-none select-none absolute">
@@ -82,7 +82,7 @@ export default function Features({ stars }: { stars: string | null }) {
 						<div
 							key={feature.id}
 							className={cn(
-								"justify-center border-l-[1.2px] md:min-h-[240px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10",
+								"justify-center border-l-[1.2px] md:min-h-[240px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10 2xl:p-12",
 								index >= 3 && "md:border-t-[1.2px]",
 							)}
 						>
@@ -117,7 +117,7 @@ export default function Features({ stars }: { stars: string | null }) {
 					<Testimonial />
 				</div>
 				<div className="relative col-span-3 border-t-[1.2px] border-l-[1.2px] md:border-b-[1.2px] dark:border-b-0  h-full py-20">
-					<div className="w-full h-full p-16 pt-10 md:px-10">
+					<div className="w-full h-full p-16 pt-10 md:px-10 2xl:px-16">
 						<div className="flex flex-col items-center justify-center w-full h-full gap-3">
 							<div className="flex items-center gap-2">
 								<Globe2Icon className="w-4 h-4" />
diff --git a/docs/components/landing/hero.tsx b/docs/components/landing/hero.tsx
index 70312fbce4..7d3e3fd195 100644
--- a/docs/components/landing/hero.tsx
+++ b/docs/components/landing/hero.tsx
@@ -49,13 +49,13 @@ function TrafficLightsIcon(props: React.ComponentPropsWithoutRef<"svg">) {
 
 export default function Hero() {
 	return (
-		<section className="max-h-[40rem] relative w-full md:w-11/12 md:mx-auto flex md:items-center md:justify-center dark:bg-black/[0.96] antialiased bg-grid-white/[0.02] overflow-hidden md:min-h-[40rem]">
+		<section className="max-h-[40rem] relative w-full flex md:items-center md:justify-center dark:bg-black/[0.96] antialiased bg-grid-white/[0.02] overflow-hidden md:min-h-[40rem]">
 			<Spotlight />
-			<div className="overflow-hidden bg-transparent md:px-10 dark:-mb-32 dark:mt-[-4.75rem] dark:pb-32 dark:pt-[4.75rem]">
-				<div className="lg:max-w-8xl mx-auto grid max-w-full grid-cols-1 items-center gap-x-8 gap-y-16 px-4 py-2 lg:grid-cols-2 lg:px-8 lg:py-4 xl:gap-x-16 xl:px-12">
-					<div className="relative z-10 md:text-center lg:text-left">
+			<div className="overflow-hidden px-2 bg-transparent dark:-mb-32 dark:mt-[-4.75rem] dark:pb-32 dark:pt-[4.75rem] md:w-10/12 mx-auto">
+				<div className="mx-auto grid lg:max-w-8xl xl:max-w-full grid-cols-1 items-center gap-x-8 gap-y-16 px-4 py-2 lg:grid-cols-2 lg:px-8 lg:py-4 xl:gap-x-16 xl:px-0">
+					<div className="relative z-10 text-left mt-0 sm:mt-2 md:mt-8 lg:mt-0 md:text-center lg:text-left">
 						<div className="relative">
-							<div className="flex flex-col items-start gap-2">
+							<div className="flex flex-col items-center lg:items-start gap-2">
 								<div className="flex items-end gap-1 mt-2 ">
 									<div className="flex items-center gap-1">
 										<svg