feat: add hero section and make responsive

Author: samoina

src/assets/Astronaut-herosection.png

@@ -7,16 +7,24 @@ export function LandingPageNavbar({}: LandingPageNavbarProps) {
   const isLoading = useRouterState({ select: (s) => s.status === "pending" });
 
   return (
-    <header className="sticky top-0 z-30 flex  w-full flex-col items-center justify-between bg-base-200/520">
-      <nav className="flex h-full w-full items-center justify-between gap-5 px-5 p-2">
+    <header className="bg-base-200/520 sticky top-0 z-30 flex w-full flex-col items-center justify-between">
+      <nav className="flex h-full w-full items-center justify-between gap-5 p-2 px-5">
         <Link to="/" className="btn btn-link btn-sm">
           <img src="/colabs.png" alt="logo" className="h-8 w-fit" />
         </Link>
         <div className="flex items-center gap-5">
-          <Link to="/auth" search={{ returnTo: "/dashboard" }} className="btn  btn-sm">
+          <Link
+            to="/auth"
+            search={{ returnTo: "/dashboard" }}
+            className="btn btn-sm"
+          >
             Login
           </Link>
-          <Link to="/auth/signup" search={{ returnTo: "/dashboard" }} className="btn btn-primary btn-sm">
+          <Link
+            to="/auth/signup"
+            search={{ returnTo: "/dashboard" }}
+            className="btn btn-primary btn-sm"
+          >
             Sign up
           </Link>
         </div>

src/components/navigation/LandingPageNavbar.tsx

@@ -9,7 +9,7 @@ export const FooterCTA = () => {
       className="relative flex flex-col items-center gap-4 p-4 md:gap-10 md:p-10 lg:flex lg:flex-row lg:pl-[20%]"
     >
       <div className="z-10 lg:flex lg:w-1/2 lg:flex-col lg:gap-6">
-        <p className="text-[32px] font-bold text-white lg:text-[55px] lg:leading-[60.5px]">
+        <p className="text-[32px] font-bold text-heading lg:text-[55px] lg:leading-[60.5px]">
           Experience counts. Get it on Colabs.
         </p>
         <p className="font-ff-inconsolata text-lg font-bold leading-6 text-[#9f9c9c] lg:text-xl">

src/routes/-components/FooterCTA.tsx

@@ -0,0 +1,44 @@
+import astronaut from "../../assets/Astronaut-herosection.png";
+import rocketIcon from "../../assets/rocket.png";
+import { Link } from "@tanstack/react-router";
+
+export const HeroSection = () => {
+  return (
+    <div
+      data-test="HeroSection"
+      className="flex flex-col items-center gap-4 p-4 md:gap-1 md:p-4 lg:flex lg:flex-row lg:justify-around"
+    >
+      <div className="lg:flex-0 p-4 lg:flex lg:w-1/2 lg:flex-col lg:gap-6">
+        <h1 className="pb-2 text-[25px] font-bold text-heading md:text-[30px] lg:text-[55px] lg:leading-[60.5px]">
+          Making open-source contribution fun again
+        </h1>
+        <p className="font-ff-inconsolata text-lg font-bold leading-6 text-brand-gray-8 lg:text-xl">
+          Open-source is the fastest way to get the job experience you need.
+          Colabs is the platform that makes open-source contribution fun and
+          competitive.
+        </p>
+        <div className="mt-5 flex flex-col gap-2 md:flex-row md:justify-around lg:justify-start lg:gap-4">
+          <Link
+            to="/auth/signup"
+            search={{ returnTo: "/dashboard" }}
+            className="btn bg-brand-green-6 px-4 py-2 text-white md:w-[40%] lg:w-auto lg:text-lg"
+          >
+            Join Colabs
+          </Link>
+          <Link
+            to="/dashboard/hackathons"
+            className="btn bg-brand-green-8 px-4 py-2 text-brand-green-7 outline outline-1 outline-brand-green-8 md:w-[40%] lg:w-auto lg:text-lg"
+          >
+            Launch a Hackathon <img src={rocketIcon} alt="Rocket icon" />
+          </Link>
+        </div>
+      </div>
+
+      <img
+        src={astronaut}
+        alt="Standing robot"
+        className="mt-4 md:mt-6 lg:h-auto lg:max-w-[30%] lg:flex-1 lg:items-center lg:justify-center lg:object-contain"
+      />
+    </div>
+  );
+};

src/routes/-components/HeroSection.tsx

@@ -1,4 +1,5 @@
 import { LandingPageNavbar } from "@/components/navigation/LandingPageNavbar";
+import { HeroSection } from "./HeroSection";
 import { Link } from "@tanstack/react-router";
 import RepositoriesSection from "./RepositoriesSection";
 
@@ -12,6 +13,7 @@ export function HomePage() {
     <div className="flex h-full min-h-screen w-full flex-col">
       <LandingPageNavbar />
       <div className="flex h-full min-h-screen w-full flex-col items-center justify-center gap-3 font-ff-poppins">
+        <HeroSection />
         {/* landing page goes here  */}
         <p className="rounded-2xl border border-primary p-5 text-3xl">
           Landing page goes here