fix: hero section responsibness

apps/nextjs/src/app/_components/contact.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Contact = () => {
+  return <div>Contact</div>;
+};

apps/nextjs/src/app/_components/features.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const KeyFeatures = () => {
+  return <div>KeyFeatures</div>;
+};
+
+export const EssentialFeatures = () => {
+  return <div>EssentialFeatures</div>;
+};

apps/nextjs/src/app/_components/hero.tsx

@@ -11,37 +11,37 @@ export const Hero = ({ className }: { className?: string }) => {
   return (
     <section
       className={cn(
-        "container grid min-h-[calc(100dvh-6rem)] px-12 lg:h-full",
+        "grid py-8 lg:container lg:min-h-[calc(100dvh-6rem)] lg:px-12",
         className,
       )}
     >
-      <div className="relative flex flex-col items-center justify-between lg:flex-row">
-        <div className="flex h-full max-w-[660px] flex-col justify-center gap-8 md:h-fit md:justify-start md:gap-6 lg:h-full lg:justify-center lg:gap-8">
-          <h1 className="max-w-[180px] text-display-small font-bold sm:text-display-medium md:max-w-full md:text-display-large lg:max-w-fit">
+      <div className="flex flex-col gap-12 md:flex-row md:items-center md:justify-between md:py-4">
+        <div className="flex flex-col justify-center gap-6 md:h-fit md:w-4/6 md:justify-between lg:h-full lg:max-w-[660px] lg:justify-center lg:gap-8">
+          <h1 className="text-display-small sm:text-display-medium md:max-w-full md:text-display-large lg:max-w-fit">
             Track. Notify. Simplify.
           </h1>
           <h3 className="text-body-large lg:text-headline-small xl:text-headline-medium">
             Welcome to the IUBAT Bus Tracking System. Access live bus locations,
             schedules, and important updates all in one place.
           </h3>
-          <Link href={"/Dashboard"}>
+          <Link href={"/dashboard"}>
             <Button variant={"withIcon"}>
               Track now
               <RightArrowIcon className="h-5 w-5" />
             </Button>
           </Link>
         </div>
-        <div className="absolute right-0 top-[20%] sm:top-[22%] md:static">
+        <div className="relative flex items-end before:absolute before:inset-0 before:hidden before:h-full before:w-full before:bg-gradient-to-br before:from-background before:via-background/80 before:to-transparent sm:-z-50 sm:-mt-40 before:sm:block md:z-auto md:mt-0 before:md:hidden">
           <Image
-            className="w-48 sm:w-52 md:h-full md:w-full lg:min-w-[509px]"
+            className="min-w-[90dvw] md:min-w-[100%] xl:min-w-[509px]"
             src={"hero-map.svg"}
             height={377}
             width={509}
             alt="map image"
           />
         </div>
       </div>
-      <div className="grid place-items-center">
+      <div className="hidden place-items-center lg:grid">
         <div className="flex animate-bounce items-center justify-center gap-5">
           <MouseIcon className={"fill-on-surface"} />
           <span className="text-headline-small">Scroll Down</span>

apps/nextjs/src/app/_components/navbar.tsx

@@ -51,8 +51,13 @@ export const Navbar = () => {
           </span>
         </Link>
         <div className="flex gap-1.5 md:order-2 rtl:space-x-reverse">
-          <NavLink link={{ href: "sign in", label: "Sign in" }} />
-          <Button variant={"primary"}>Get started</Button>
+          <NavLink
+            className="hidden md:block"
+            link={{ href: "sign in", label: "Sign in" }}
+          />
+          <Button className="hidden md:block" variant={"primary"}>
+            Get started
+          </Button>
           <Button className="md:hidden">
             <span className="sr-only">Open main menu</span>
             <MenuIcon />

apps/nextjs/src/app/_components/our-team.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const OurTeam = () => {
+  return <div>OurTeam</div>;
+};

apps/nextjs/src/app/_components/testimonials.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Testimonials = () => {
+  return <div>Testimonials</div>;
+};

apps/nextjs/src/app/layout.tsx

@@ -14,7 +14,7 @@ import { env } from "~/env";
 import { TailwindIndicator } from "./_components/tailwind-indicator";
 
 export const poppins = Poppins({
-  weight: ["300", "400", "500", "600", "700"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
   subsets: ["latin"],
   variable: "--font-poppins",
 });