make the landing page look beautiful 😍😍😍

src/routes/dashboard/index.tsx

@@ -1,9 +1,9 @@
 import { component$, useVisibleTask$ } from "@builder.io/qwik";
 import { routeLoader$, type DocumentHead } from "@builder.io/qwik-city";
-import Controlbar from "~/components/Controlbar";
+import Controlbar from "~/components/dashboard/Controlbar";
 // import Dropzone from "~/components/Dropzone";
-import File from "~/components/File";
-import { SolarUploadLinear, SvgSpinnersBarsRotateFade } from "~/components/Icons";
+import File from "~/components/dashboard/File";
+import { SolarUploadLinear, SvgSpinnersBarsRotateFade } from "~/components/misc/Icons";
 import { useNanostore$ } from "~/hooks/nanostores";
 import { api } from "~/lib/api";
 import { areFilesLoaded, dashboardFiles } from "~/lib/stores";
@@ -12,7 +12,6 @@ import { StereoFile } from "~/lib/types";
 export const useAuthCheck = routeLoader$(({ cookie, redirect: r }) => {
 	const jwt = cookie.get("jwt");
 	if (jwt) return {};
-	
 	throw r(302, "/");
 });
 

src/routes/index.tsx

@@ -1,18 +1,44 @@
+/* eslint-disable qwik/jsx-img */
 import { component$ } from "@builder.io/qwik";
-import { routeLoader$ } from "@builder.io/qwik-city";
-import { OAUTH_LINK } from "~/lib/constants";
+import { DocumentHead, routeLoader$ } from "@builder.io/qwik-city";
+import CallToAction from "~/components/landing/CallToAction";
+import Footer from "~/components/landing/Footer";
+import Hero from "~/components/landing/Hero";
+import Navbar from "~/components/landing/Navbar";
+import Stats from "~/components/landing/Stats";
+import Testimonials from "~/components/landing/Testimonials";
 
-export const useAuthCheck = routeLoader$(({ cookie, redirect: r }) => {
-  const jwt = cookie.get("jwt");
-  if (!jwt) return {};
+export const useAuthCheck = routeLoader$(({ cookie, redirect: r, query }) => {
+    const jwt = cookie.get("jwt");
+    const set = Boolean(query.get("jwt_set"));
 
-  throw r(302, "/dashboard");
+    if (jwt && set) {
+        throw r(302, "/dashboard");
+    }
+    return {};
 });
 
 export default component$(() => {
-  return (
-    <div class="flex flex-col items-center justify-center flex-grow">
-        <a href={OAUTH_LINK} class="bg-white text-black p-2 rounded-lg">clik heir 2 auth!!!!!!</a>
-    </div>
-  );
-});
+    return (
+        <>
+            <Navbar />
+            <div class="flex flex-col flex-grow w-screen items-center mb-24 gap-56">
+                <Hero />
+                <Stats />
+                <Testimonials />
+                <CallToAction />
+            </div>
+            <Footer />
+        </>
+    );
+});
+
+export const head: DocumentHead = {
+    title: "Welcome to Qwik",
+    meta: [
+        {
+            name: "description",
+            content: "Qwik site description",
+        },
+    ],
+};

src/routes/layout.tsx

@@ -1,9 +1,25 @@
-import { component$, Slot } from '@builder.io/qwik';
- 
+import { $, component$, Slot, useOnDocument } from '@builder.io/qwik';
+import AOS from 'aos';
+import 'aos/dist/aos.css';
+
 export default component$(() => {
-  return (
-    <div class="flex flex-col min-h-screen bg-neutral-950 text-white scrollbar-thin overflow-scroll">
-        <Slot />
-    </div>
-  );
+	useOnDocument("DOMContentLoaded", $(() => {
+		AOS.init({
+			once: true,
+			duration: 1000,
+			offset: 100,
+			easing: 'ease-in-out',
+		});
+	}))
+
+	return (
+		<div
+		class="
+			flex flex-col
+			min-h-screen w-full overflow-x-clip
+			bg-neutral-950 text-white
+		">
+			<Slot />
+		</div>
+	);
 });