wip

Author: Kampouse

package.json

@@ -91,6 +91,7 @@
   },
   "nx": {},
   "dependencies": {
+    "@tailwindcss/typography": "^0.5.16",
     "better-sqlite3": "^11.3.0",
     "test": "^3.3.0"
   }

pnpm-lock.yaml

@@ -149,7 +149,7 @@ export const EventCard = component$((props: EventCardProps) => {
         <div class="flex flex-1 flex-col justify-between">
           <Link
             href={props.link}
-            class="transition-all duration-300 hover:scale-[1.02] hover:opacity-90 active:scale-[1.01]"
+            class="transition-all duration-300  hover:opacity-90 active:scale-[1.01]"
           >
             <div class="flex flex-row gap-3 px-3 pt-4">
               <h1 class="flex items-center gap-2 text-sm font-medium text-gray-700">

src/components/app/eventCard/EventCard.tsx

@@ -14,7 +14,7 @@ export default component$(() => {
     { label: "Home Page", disabled: false, path: "/landing" },
   ];
   return (
-    <Dropdown.Root class="pr-12">
+    <Dropdown.Root>
       <Dropdown.Trigger class="">
         <div class="h-[50px] w-[50px] lg:h-full lg:w-full">
           <img class="rounded-full" width={50} height={50} src={img} />

src/components/dropdown/index.tsx

@@ -46,31 +46,31 @@ export default component$(() => {
         : "/home";
   });
   return (
-    <header class="fixed top-0 z-50 h-fit w-full bg-white/80 backdrop-blur-sm">
+    <header class="fixed top-0 z-50 h-fit w-full border-b border-border/40 bg-background/80 backdrop-blur-sm">
       <nav
-        class="container mx-auto flex w-full items-center justify-between px-4 py-3"
+        class=" mx-auto flex w-full items-center justify-between px-4 py-3"
         role="navigation"
       >
         <div class="flex items-center gap-4">
           <Link
             href={session.value ? "/home" : "/landing"}
-            class="hidden bg-gradient-to-r from-neutral-700 to-neutral-900 bg-clip-text text-xl font-semibold text-transparent transition-colors hover:from-neutral-800 hover:to-neutral-950 md:block"
+            class="hidden bg-gradient-to-r from-primary to-primary bg-clip-text px-1 text-xl font-bold text-transparent transition-colors hover:from-primary/90 hover:to-primary/90 md:block"
           >
-            Justd R&D
+            Just R&D
           </Link>
 
           {location.url.pathname === "/home" && (
             <Link
               href="/new"
-              class="rounded-2xl bg-gradient-to-br from-neutral-700 to-neutral-800 px-4 py-2 text-sm font-medium text-white shadow-sm transition-all duration-300 hover:from-neutral-800 hover:to-neutral-900 hover:shadow-md md:hidden"
+              class="rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg md:hidden"
             >
-              New Session
+              Start New Session
             </Link>
           )}
           {session.value && location.url.pathname !== "/home" && (
             <Link
               href="/home"
-              class="rounded-2xl bg-gradient-to-br from-neutral-700 to-neutral-800 p-2 text-white shadow-sm transition-all duration-300 hover:from-neutral-800 hover:to-neutral-900 hover:shadow-md md:hidden"
+              class="rounded-lg bg-secondary p-2 text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg md:hidden"
             >
               <ArrowLeftIcon size={20} />
             </Link>
@@ -83,14 +83,14 @@ export default component$(() => {
               {location.url.href.includes("home") ? (
                 <Link
                   href="/new"
-                  class="hidden rounded-2xl bg-gradient-to-br from-neutral-700 to-neutral-800 px-4 py-2 text-sm font-medium text-white shadow-sm transition-all duration-300 hover:from-neutral-800 hover:to-neutral-900 hover:shadow-md md:block"
+                  class="hidden rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg md:block"
                 >
-                  New Session
+                  Start New Session
                 </Link>
               ) : (
                 <Link
                   href="/home"
-                  class="hidden rounded-2xl bg-gradient-to-br from-neutral-700 to-neutral-800 p-2 text-white shadow-sm transition-all duration-300 hover:from-neutral-800 hover:to-neutral-900 hover:shadow-md md:block"
+                  class="hidden rounded-lg bg-secondary p-2 text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg md:block"
                 >
                   <ArrowLeftIcon size={20} />
                 </Link>
@@ -99,19 +99,19 @@ export default component$(() => {
                 <Link
                   prefetch="js"
                   href="/profile"
-                  class="rounded-2xl bg-gradient-to-br from-neutral-700 to-neutral-800 px-4 py-2 text-sm font-medium text-white shadow-sm transition-all duration-300 hover:from-neutral-800 hover:to-neutral-900 hover:shadow-md"
+                  class="rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg"
                 >
-                  Profile
+                  My Profile
                 </Link>
               )}
               <Dropdown />
             </>
           ) : (
             <Link
               href="/login"
-              class="rounded-2xl bg-gradient-to-br from-neutral-700 to-neutral-800 px-4 py-2 text-sm font-medium text-white shadow-sm transition-all duration-300 hover:from-neutral-800 hover:to-neutral-900 hover:shadow-md"
+              class="rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg"
             >
-              Sign In
+              Get Started
             </Link>
           )}
         </div>

src/components/header/Mainheader.tsx

@@ -62,7 +62,7 @@ export default component$<FormProps>(({ data, active }) => {
               {data.interests.map((interest, index) => (
                 <span
                   key={index}
-                  class="group flex items-center gap-2 rounded-full bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700"
+                  class="flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-300"
                 >
                   {interest}
                   <button
@@ -88,7 +88,7 @@ export default component$<FormProps>(({ data, active }) => {
               <div class="relative">
                 <input
                   type="text"
-                  class="w-40 rounded-full border border-gray-300 bg-white px-3 py-1.5 text-sm placeholder:text-gray-400"
+                  class="flex w-32 items-center rounded-full bg-gray-100 px-2.5 py-2 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-300"
                   placeholder="Add interest..."
                   onKeyDown$={(e) => {
                     if (e.key === "Enter") {