feat: move hero into bento grid

reedu-reengineering-education · Apr 11, 2024 · 3643210 · 3643210
1 parent c7386ca
commit 3643210
Showing 1 changed file with 19 additions and 14 deletions.
diff --git a/src/components/pages/home/index.tsx b/src/components/pages/home/index.tsx
@@ -18,38 +18,40 @@ export default function Home() {
 
 	return (
 		<div className="flex flex-col items-center w-full gap-12">
-			<div className="md:h-80 h-40 w-full bg-dot-fuchsia-400/50 relative flex items-center justify-center mt-12">
-				<div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]" />
-				<H1 className="bg-clip-text text-transparent bg-gradient-to-b from-muted-foreground to-foreground">
-					Atrai Bikes
-				</H1>
-			</div>
 			<div className="max-w-6xl mx-auto w-full">
 				<div className="grid md:auto-rows-[18rem] grid-cols-2 md:grid-cols-3 gap-4 max-w-7xl mx-auto auto-rows-[10rem]">
+					<div className="h-full w-full col-span-2 bg-dot-fuchsia-400/50 relative flex items-center justify-center">
+						<div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_45%,black)]" />
+						<H1 className="bg-clip-text text-transparent bg-gradient-to-b from-muted-foreground to-foreground">
+							Atrai Bikes
+						</H1>
+					</div>
 					<BentoCard href={"/about"} animatedBackground="beams">
 						<div className="absolute bottom-0 left-0 p-4">
 							<h2 className="text-2xl font-bold">{i18n[lng].about}</h2>
 						</div>
 					</BentoCard>
-					<BentoCard href={"/analytics"} image={DataAnalyticsImage}>
+					<BentoCard
+						href={"/analytics"}
+						image={DataAnalyticsImage}
+						size="large"
+					>
 						<h2 className="text-2xl font-bold">{i18n[lng].analytics}</h2>
 					</BentoCard>
 					<BentoCard href={"/results"} animatedBackground="glowing-stars">
 						<h2 className="text-2xl font-bold">{i18n[lng].results}</h2>
 					</BentoCard>
-					<BentoCard size="large" image={HardwareImage} href={"/hardware"}>
-						<div className="absolute top-0 right-0 p-4">
-							<h2 className="text-2xl font-bold">{i18n[lng].hardware}</h2>
-						</div>
-					</BentoCard>
 					<BentoCard href={"/blog"} animatedBackground="grid">
 						<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center p-4">
 							<h2 className="text-2xl font-bold">{i18n[lng].blog}</h2>
 						</div>
 					</BentoCard>
-					<BentoCard href={"/faq"} animatedBackground="glowing-stars">
-						<h2 className="text-2xl font-bold">{i18n[lng].faq}</h2>
+					<BentoCard size="large" image={HardwareImage} href={"/hardware"}>
+						<div className="absolute top-0 right-0 p-4">
+							<h2 className="text-2xl font-bold">{i18n[lng].hardware}</h2>
+						</div>
 					</BentoCard>
+
 					<BentoCard href={"/partner"} size="large" animatedBackground="beams">
 						<div className="w-full h-full flex flex-col">
 							<h2 className="text-2xl font-bold">{i18n[lng].partner}</h2>
@@ -82,6 +84,9 @@ export default function Home() {
 							</div>
 						</div>
 					</BentoCard>
+					<BentoCard href={"/faq"} animatedBackground="glowing-stars">
+						<h2 className="text-2xl font-bold">{i18n[lng].faq}</h2>
+					</BentoCard>
 				</div>
 			</div>
 		</div>