refactor(v4.0.0-alpha): beginning of a new era

apps/client/src/pages/home/sections/hero/call-to-action.tsx

@@ -0,0 +1,46 @@
+import { Book, SignOut } from "@phosphor-icons/react";
+import { Button } from "@reactive-resume/ui";
+import { Link } from "react-router-dom";
+
+import { useLogout } from "@/client/services/auth";
+import { useAuthStore } from "@/client/stores/auth";
+
+export const HeroCTA = () => {
+  const { logout } = useLogout();
+
+  const isLoggedIn = useAuthStore((state) => !!state.user);
+
+  if (isLoggedIn) {
+    return (
+      <>
+        <Button asChild size="lg">
+          <Link to="/dashboard">Go to Dashboard</Link>
+        </Button>
+
+        <Button size="lg" variant="link" onClick={() => logout()}>
+          <SignOut className="mr-3" />
+          Logout
+        </Button>
+      </>
+    );
+  }
+
+  if (!isLoggedIn) {
+    return (
+      <>
+        <Button asChild size="lg">
+          <Link to="/auth/login">Get started</Link>
+        </Button>
+
+        <Button asChild size="lg" variant="link">
+          <a href="https://docs.rxresu.me" target="_blank" rel="noopener noreferrer nofollow">
+            <Book className="mr-3" />
+            Learn more
+          </a>
+        </Button>
+      </>
+    );
+  }
+
+  return null;
+};

apps/client/src/pages/home/sections/hero/decoration.tsx

@@ -0,0 +1,47 @@
+export const Decoration = {
+  Grid: () => (
+    <svg
+      aria-hidden="true"
+      className="absolute inset-0 -z-10 h-full w-full stroke-foreground/10 opacity-60 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:opacity-40"
+    >
+      <defs>
+        <pattern
+          id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"
+          width={200}
+          height={200}
+          x="50%"
+          y={-1}
+          patternUnits="userSpaceOnUse"
+        >
+          <path d="M.5 200V.5H200" fill="none" />
+        </pattern>
+      </defs>
+      <svg x="50%" y={-1} className="overflow-visible fill-border/20">
+        <path
+          d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
+          strokeWidth={0}
+        />
+      </svg>
+      <rect
+        width="100%"
+        height="100%"
+        strokeWidth={0}
+        fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"
+      />
+    </svg>
+  ),
+  Gradient: () => (
+    <div
+      aria-hidden="true"
+      className="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]"
+    >
+      <div
+        className="aspect-[1108/632] h-96 w-[69.25rem] bg-gradient-to-r from-[#6f8cbb] to-[#c93b37] opacity-40 dark:opacity-20"
+        style={{
+          clipPath:
+            "polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)",
+        }}
+      />
+    </div>
+  ),
+};

apps/client/src/pages/home/sections/hero/index.tsx

@@ -0,0 +1,65 @@
+import { ArrowRight } from "@phosphor-icons/react";
+import { Badge, Button } from "@reactive-resume/ui";
+import { motion } from "framer-motion";
+import Tilt from "react-parallax-tilt";
+
+import { defaultTiltProps } from "@/client/constants/parallax-tilt";
+
+import { HeroCTA } from "./call-to-action";
+import { Decoration } from "./decoration";
+
+export const HeroSection = () => (
+  <section className="relative">
+    <Decoration.Grid />
+    <Decoration.Gradient />
+
+    <div className="mx-auto max-w-7xl px-6 lg:flex lg:h-screen lg:items-center lg:px-12">
+      <motion.div
+        className="mx-auto max-w-3xl shrink-0 lg:mx-0 lg:max-w-xl lg:pt-8"
+        initial={{ opacity: 0, x: -100 }}
+        whileInView={{ opacity: 1, x: 0 }}
+      >
+        <div className="mt-24 flex items-center gap-x-4 sm:mt-32 lg:mt-0">
+          <Badge>Version 4</Badge>
+
+          <Button variant="link" className="space-x-2 text-left">
+            <p>What's new in the latest version</p>
+            <ArrowRight />
+          </Button>
+        </div>
+
+        <div className="mt-10 space-y-2">
+          <h6 className="text-base font-bold tracking-wide">Finally,</h6>
+          <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
+            A free and open-source resume builder.
+          </h1>
+        </div>
+
+        <p className="prose prose-base prose-zinc mt-6 text-lg leading-8 dark:prose-invert">
+          A free and open-source resume builder that simplifies the process of creating, updating,
+          and sharing your resume.
+        </p>
+
+        <div className="mt-10 flex items-center gap-x-8">
+          <HeroCTA />
+        </div>
+      </motion.div>
+
+      <div className="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-20">
+        <div className="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
+          <motion.div initial={{ opacity: 0, x: 100 }} whileInView={{ opacity: 1, x: 0 }}>
+            <Tilt {...defaultTiltProps}>
+              <img
+                width={3600}
+                height={2078}
+                src="/screenshots/builder.png"
+                alt="Reactive Resume - Screenshot - Builder Screen"
+                className="w-[76rem] rounded-lg bg-background/5 shadow-2xl ring-1 ring-foreground/10"
+              />
+            </Tilt>
+          </motion.div>
+        </div>
+      </div>
+    </div>
+  </section>
+);