UI Enhanced

nabinkhair42 · Feb 23, 2025 · cd69273 · cd69273
1 parent 54d0aa1
commit cd69273
Show file tree

Hide file tree

Showing 6 changed files with 161 additions and 69 deletions.
diff --git a/www/app/layout.tsx b/www/app/layout.tsx
@@ -3,11 +3,18 @@ import { ThemeProvider } from "@/components/contexts/theme-provider";
 import { Navbar } from "@/components/navbar";
 import { Footer } from "@/components/footer";
 import "@/styles/globals.css";
-import { Inter } from "next/font/google";
+import { Inter, JetBrains_Mono } from "next/font/google";
 import { Toaster } from "@/components/ui/sonner";
 
 const inter = Inter({
-  subsets: ["latin"]});
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-jetbrains-mono",
+});
 
 export const metadata: Metadata = {
   title: "PEST.js - Progressive Express Starter Template",
@@ -25,7 +32,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body
         suppressHydrationWarning
-        className={`${inter.className} `}
+        className={`${inter.variable} ${jetbrainsMono.variable} font-sans`}
       >
         <ThemeProvider
           attribute="class"

diff --git a/www/app/page.tsx b/www/app/page.tsx
@@ -2,29 +2,52 @@ import CreateAppComponent from "@/components/create-app";
 import { buttonVariants } from "@/components/ui/button";
 import { page_routes } from "@/lib/routes-config";
 import Link from "next/link";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "PEST.js - Progressive Express Starter Template",
+  description: "Unopinionated Express.js template engine that enables seamless scalability, enterprise security, and modern development practices."
+};
 
 export default function Home() {
   const title = "PEST.js";
+  const subtitle = "Progressive Express Starter Template";
   const description = "Unopinionated Express.js template engine that enables seamless scalability, enterprise security, and modern development practices.";
 
   return (
     <div className="flex sm:min-h-[85.5vh] min-h-[85vh] flex-col items-center justify-center text-center px-2 sm:py-8 py-12">
-      <h1 className="text-3xl font-bold mb-4 sm:text-6xl">{title}</h1>
-      <p className="mb-8 sm:text-lg max-w-[800px] text-muted-foreground">{description}</p>
-      <div className="flex flex-row items-center gap-5">
+      <div className="space-y-4">
+        <h1 className="text-3xl font-bold mb-2 sm:text-6xl bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-orange-500">
+          {title}
+        </h1>
+        <p className="text-xl text-muted-foreground font-medium">{subtitle}</p>
+        <p className="mb-8 sm:text-lg max-w-[800px] text-muted-foreground leading-relaxed">
+          {description}
+        </p>
+      </div>
+
+      <div className="flex flex-col sm:flex-row items-center gap-5 mb-12">
         <Link
           href={`/docs${page_routes[0]?.href || ""}`}
-          className={buttonVariants({ className: "px-6", size: "lg" })}
+          className={buttonVariants({ 
+            className: "px-8 py-6 text-lg shadow-lg hover:shadow-xl transition-all",
+            size: "lg"
+          })}
         >
           Get Started
         </Link>
         <Link
           href="/blog"
-          className={buttonVariants({ variant: "secondary", className: "px-6", size: "lg" })}
+          className={buttonVariants({ 
+            variant: "secondary", 
+            className: "px-8 py-6 text-lg shadow hover:shadow-md transition-all",
+            size: "lg"
+          })}
         >
           Read Blog
         </Link>
       </div>
+
       <CreateAppComponent />
     </div>
   );

diff --git a/www/components/navbar.tsx b/www/components/navbar.tsx
@@ -23,7 +23,7 @@ export const NAVLINKS = [
 
 export function Navbar() {
   return (
-    <nav className="w-full border-b h-16 sticky top-0 z-50 bg-background">
+    <nav className="w-full border-b h-16 sticky top-0 z-50 bg-background/80 backdrop-blur-sm backdrop-saturate-150 supports-[backdrop-filter]:bg-background/60">
       <div className="sm:container mx-auto w-[95vw] h-full flex items-center justify-between md:gap-2">
         <div className="flex items-center gap-5">
           <SheetLeftbar />

diff --git a/www/components/ui/sheet.tsx b/www/components/ui/sheet.tsx
@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm backdrop-saturate-150 supports-[backdrop-filter]:bg-background/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-50 gap-4 bg-background/80 backdrop-blur-sm backdrop-saturate-150 supports-[backdrop-filter]:bg-background/60 p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
       side: {

diff --git a/www/styles/globals.css b/www/styles/globals.css
@@ -4,65 +4,92 @@
 @tailwind components;
 @tailwind utilities;
 
+/* 
+  Root CSS Variables
+  Light mode theme colors and values
+*/
 @layer base {
   :root {
+    /* Core colors */
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
+
+    /* Component colors */
     --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
+
+    /* Brand colors */
+    --primary: 45 93% 47%;  /* Bright yellow */
+    --primary-foreground: 240 10% 3.9%;
+    --secondary: 45 93% 96%;  /* Light yellow */
+    --secondary-foreground: 45 93% 20%;
+
+    /* UI colors */
+    --muted: 45 20% 95.9%;
+    --muted-foreground: 45 5% 45%;
+    --accent: 45 93% 96%;
+    --accent-foreground: 45 93% 20%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
+
+    /* Border & Input colors */
+    --border: 45 10% 90%;
+    --input: 45 10% 90%;
+    --ring: 45 93% 47%;
+
+    /* Other variables */
     --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
+
+    /* Chart colors */
+    --chart-1: 45 93% 47%;  /* Yellow */
+    --chart-2: 200 95% 39%; /* Cyan */
+    --chart-3: 280 95% 45%; /* Purple */
+    --chart-4: 150 95% 35%; /* Green */
+    --chart-5: 0 95% 45%;   /* Red */
   }
 
+  /* Dark mode theme colors */
   .dark {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
+
+    /* Component colors */
     --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
+
+    /* Brand colors */
+    --primary: 45 93% 47%;  /* Bright yellow */
+    --primary-foreground: 240 10% 3.9%;
+    --secondary: 45 30% 15.9%;
+    --secondary-foreground: 45 93% 85%;
+
+    /* UI colors */
+    --muted: 45 15% 15.9%;
+    --muted-foreground: 45 20% 65%;
+    --accent: 45 30% 15.9%;
+    --accent-foreground: 45 93% 85%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+
+    /* Border & Input colors */
+    --border: 45 15% 15.9%;
+    --input: 45 15% 15.9%;
+    --ring: 45 93% 47%;
+
+    /* Chart colors - Dark mode variants */
+    --chart-1: 45 93% 47%;  /* Yellow */
+    --chart-2: 200 80% 50%; /* Cyan */
+    --chart-3: 280 75% 60%; /* Purple */
+    --chart-4: 150 70% 45%; /* Green */ 
+    --chart-5: 0 80% 55%;   /* Red */
   }
 }
 
-
-
+/* Base styles */
 @layer base {
   * {
     @apply border-border;
@@ -73,27 +100,31 @@
   }
 }
 
+/* Prose & Code block styles */
 .prose {
   margin: 0 !important;
 }
 
+/* Code block styling */
 pre {
   padding: 2px 0 !important;
   width: inherit !important;
   overflow-x: auto;
 }
 
-pre>code {
+pre > code {
   display: grid;
   max-width: inherit !important;
   padding: 14px 0 !important;
 }
 
+/* Code line styling */
 .code-line {
   padding: 0.75px 16px;
   @apply border-l-2 border-transparent;
 }
 
+/* Line number styling */
 .line-number::before {
   display: inline-block;
   width: 1rem;
@@ -105,63 +136,61 @@ pre>code {
   text-align: right;
 }
 
+/* Highlighted line styling */
 .highlight-line {
   @apply bg-primary/5 border-l-2 border-primary/30;
 }
 
+/* Code title styling */
 .rehype-code-title {
   @apply px-2 -mb-8 w-full text-sm pb-5 font-medium mt-5 font-code;
 }
 
-.highlight-comp>code {
+.highlight-comp > code {
   background-color: transparent !important;
 }
 
-/* Global Custom Scrollbar */
+/* Custom Scrollbar Styling */
 :root {
-  --scrollbar-thumb: rgba(113,
-      113,
-      122,
-      0.6);
-  /* Subtle dark gray for light mode thumb */
+  --scrollbar-thumb: rgba(113, 113, 122, 0.6);
 }
 
 [data-theme="dark"],
 [class*="dark"] {
-  --scrollbar-thumb: rgba(160,
-      160,
-      160,
-      0.4);
-  /* Softer gray for dark mode thumb */
+  --scrollbar-thumb: rgba(160, 160, 160, 0.4);
 }
 
-/* Apply globally */
+/* Global scrollbar styles */
 * {
   scrollbar-width: thin;
-  /* Firefox thin scrollbar */
   scrollbar-color: var(--scrollbar-thumb) transparent;
-  /* Thumb color with transparent track */
 }
 
+/* Webkit scrollbar styles */
 *::-webkit-scrollbar {
   width: 8px;
-  /* Vertical scrollbar width */
   height: 8px;
-  /* Horizontal scrollbar height */
 }
 
 *::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar-thumb);
-  /* Thumb color */
   border-radius: 9999px;
-  /* Fully rounded thumb */
   border: 2px solid transparent;
-  /* Thin padding effect */
   background-clip: content-box;
-  /* Smooth thumb edges */
 }
 
 *::-webkit-scrollbar-track {
   background-color: transparent;
-  /* Transparent track */
+}
+
+/* Body background with gradient */
+body {
+  @apply bg-background text-foreground;
+  background-image:
+    radial-gradient(
+      100% 50% at 50% 0%,
+      rgba(255, 230, 0, 0.137) 5%,
+      rgba(255, 221, 0, 0.048) 50%,
+      rgba(255, 238, 0, 0) 100%
+    );
 }