Skip to content

Feat: Implement Landing Page Design System (#1146) #1153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pranitaurlam wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Feat: Implement Landing Page Design System (#1146) #1153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5cdf517
Feat(#1146): Implement Landing Page Design System
pranitaurlam Feb 6, 2026
27b4a35
Fix: Address CodeRabbit review feedback for design system
pranitaurlam Feb 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions landing-page/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
30 changes: 15 additions & 15 deletions landing-page/src/Pages/pictopy-landing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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}
Expand All @@ -158,11 +162,9 @@ 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={() =>
handleDownloadClick("Windows", downloadLinks.windows)
}
Expand All @@ -172,11 +174,9 @@ 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)}
disabled={loading || !downloadLinks.linux}
>
Expand Down
6 changes: 3 additions & 3 deletions landing-page/src/context/theme-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useState } from "react";

// Export the ThemeOptions enum
export enum ThemeOptions {
Expand All @@ -13,7 +13,7 @@ interface ThemeContextStructure {

const defaultThemeContext: ThemeContextStructure = {
theme: ThemeOptions.Light,
toggleTheme: () => {},
toggleTheme: () => { },
};

export const ThemeContext = React.createContext<ThemeContextStructure>(defaultThemeContext);
Expand All @@ -25,7 +25,7 @@ function validateThemeCode(themeCode: number): boolean {

function getInitialTheme(): ThemeOptions {
const storedTheme = '';

if (storedTheme) {
const themeCode = parseInt(storedTheme, 10);
if (validateThemeCode(themeCode)) {
Expand Down
68 changes: 64 additions & 4 deletions landing-page/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,64 @@

@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%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
Expand All @@ -30,7 +85,7 @@
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}

/* Dark Mode Styles */
.dark {
--background: 222.2 84% 1;
Expand Down Expand Up @@ -58,7 +113,7 @@
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}

/* Apply global border style */
svg * {
pointer-events: none;
Expand All @@ -67,7 +122,7 @@
* {
@apply border-border;
}

/* Global Body Styles */
body {
@apply bg-background text-foreground;
Expand All @@ -90,6 +145,7 @@
from {
transform: translateY(0);
}

to {
transform: translateY(-100%);
}
Expand All @@ -100,6 +156,7 @@
0% {
transform: translateX(-100%) rotate(0deg);
}

100% {
transform: translateX(100%) rotate(360deg);
}
Expand All @@ -115,9 +172,11 @@
0% {
background-position: 0% 50%;
}

50% {
background-position: 100% 50%;
}

100% {
background-position: 0% 50%;
}
Expand All @@ -127,6 +186,7 @@
animation: gradient-xy 15s ease infinite;
background-size: 400% 400%;
}

/* Custom scrollbar */
::-webkit-scrollbar {
width: 4px;
Expand Down