Feat: Implement Landing Page Design System (#1146)

landing-page/src/App.tsx

@@ -1,5 +1,4 @@
-import { useContext, useEffect } from "react";
-import { ThemeProvider, ThemeContext, ThemeOptions } from "./context/theme-provider";
+import { ThemeProvider } from "./context/theme-provider";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Navbar from "./Pages/Landing page/Navbar";
 import InteractiveDemo from "./Pages/Demo/marqu";

landing-page/src/Pages/pictopy-landing.tsx

@@ -98,9 +98,14 @@ const PictopyLanding: FC = () => {
           xmlns="http://www.w3.org/2000/svg"
           preserveAspectRatio="none"
         >
+          <defs>
+            <linearGradient id="wave-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" style={{ stopColor: 'rgb(34, 197, 94)', stopOpacity: 0.1 }} />
+              <stop offset="100%" style={{ stopColor: 'rgb(250, 204, 21)', stopOpacity: 0.1 }} />
+            </linearGradient>
+          </defs>
           <path
-            fill="#00FF00"
-            fillOpacity="0.1"
+            fill="url(#wave-gradient)"
             d="M0,192L48,160C96,128,192,64,288,58.7C384,53,480,107,576,128C672,149,768,128,864,101.3C960,75,1056,53,1152,69.3C1248,85,1344,139,1392,192L1440,256V0H1392C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
           >
             <animate
@@ -126,13 +131,13 @@ const PictopyLanding: FC = () => {
               alt="Pictopy Logo"
               className="h-16 w-16 object-contain"
             />
-            <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 to-green-500 transition-all duration-300">
+            <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-yellow-400 dark:from-yellow-400 dark:to-green-500 transition-all duration-300">
               PictoPy
             </h1>
           </div>
 
           {/* Subheading */}
-          <p className="text-xl md:text-2xl text-green-700 dark:text-yellow-300 max-w-3xl mb-8 transition-colors duration-300">
+          <p className="text-xl md:text-2xl text-gray-700 dark:text-gray-300 max-w-3xl mb-8 transition-colors duration-300 font-medium">
             Organize your photos effortlessly. Available for Mac, Windows, and
             Linux.
           </p>
@@ -147,9 +152,8 @@ const PictopyLanding: FC = () => {
           {/* Download Buttons */}
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <Button
-              className="bg-black text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200 h-12 px-8 transition-all duration-300 
-                         border-2 border-transparent hover:border-black dark:hover:border-white 
-                         transform hover:-translate-y-1 hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+              className="bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 dark:from-green-500 dark:to-green-600 dark:hover:from-green-600 dark:hover:to-green-700 h-12 px-8 transition-all duration-300 
+                         border-2 border-transparent hover:shadow-lg hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
               size="lg"
               onClick={() => handleDownloadClick("Mac", downloadLinks.mac)}
               disabled={loading || !downloadLinks.mac}
@@ -158,9 +162,8 @@ const PictopyLanding: FC = () => {
               Download for Mac
             </Button>
             <Button
-              className="bg-black text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200 h-12 px-8 transition-all duration-300 
-                         border-2 border-transparent hover:border-black dark:hover:border-white 
-                         transform hover:-translate-y-1 hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+              className="bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 dark:from-green-500 dark:to-green-600 dark:hover:from-green-600 dark:hover:to-green-700 h-12 px-8 transition-all duration-300 
+                         border-2 border-transparent hover:shadow-lg hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
               size="lg"
               variant="outline"
               onClick={() =>
@@ -172,9 +175,8 @@ const PictopyLanding: FC = () => {
               Download for Windows
             </Button>
             <Button
-              className="bg-black text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200 h-12 px-8 transition-all duration-300 
-                         border-2 border-transparent hover:border-black dark:hover:border-white 
-                         transform hover:-translate-y-1 hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+              className="bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 dark:from-green-500 dark:to-green-600 dark:hover:from-green-600 dark:hover:to-green-700 h-12 px-8 transition-all duration-300 
+                         border-2 border-transparent hover:shadow-lg hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
               size="lg"
               variant="outline"
               onClick={() => handleDownloadClick("Linux", downloadLinks.linux)}

landing-page/src/context/theme-provider.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 
 // Export the ThemeOptions enum
 export enum ThemeOptions {
@@ -13,7 +13,7 @@ interface ThemeContextStructure {
 
 const defaultThemeContext: ThemeContextStructure = {
     theme: ThemeOptions.Light,
-    toggleTheme: () => {},
+    toggleTheme: () => { },
 };
 
 export const ThemeContext = React.createContext<ThemeContextStructure>(defaultThemeContext);
@@ -25,7 +25,7 @@ function validateThemeCode(themeCode: number): boolean {
 
 function getInitialTheme(): ThemeOptions {
     const storedTheme = '';
-    
+
     if (storedTheme) {
         const themeCode = parseInt(storedTheme, 10);
         if (validateThemeCode(themeCode)) {

landing-page/src/index.css

@@ -4,6 +4,39 @@
 
 @layer base {
   :root {
+    /* Design System - Typography */
+    --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+
+    /* Font Sizes - Type Scale */
+    --text-xs: 0.75rem;    /* 12px */
+    --text-sm: 0.875rem;   /* 14px */ 
+    --text-base: 1rem;     /* 16px */
+    --text-lg: 1.125rem;   /* 18px */
+    --text-xl: 1.25rem;    /* 20px */
+    --text-2xl: 1.5rem;    /* 24px */
+    --text-3xl: 1.875rem;  /* 30px */
+    --text-4xl: 2.25rem;   /* 36px */
+    --text-5xl: 3rem;      /* 48px */
+    --text-6xl: 3.75rem;   /* 60px */
+
+    /* Spacing System */
+    --space-1: 0.25rem;    /* 4px */
+    --space-2: 0.5rem;     /* 8px */
+    --space-3: 0.75rem;    /* 12px */
+    --space-4: 1rem;       /* 16px */
+    --space-6: 1.5rem;     /* 24px */
+    --space-8: 2rem;       /* 32px */
+    --space-12: 3rem;      /* 48px */
+    --space-16: 4rem;      /* 64px */
+
+    /* Brand Colors - Accessible */
+    --color-brand-primary: 34 197 94;      /* green-500 */
+    --color-brand-primary-dark: 22 163 74; /* green-600 */
+    --color-brand-accent: 250 204 21;      /* yellow-400 */
+    --color-brand-accent-dark: 234 179 8;  /* yellow-500 */
+
+    /* Existing Shadcn tokens */
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
     --card: 0 0% 200%;