Skip to content

feat: new landing page with blueish glass morphism design #5

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
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: new landing page with blueish glass morphism design #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
64 changes: 64 additions & 0 deletions CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
# Claude Code Task Management Guide

## Documentation Available

📚 **Project Documentation**: Check the documentation files in this directory for project-specific setup instructions and guides.
**Project Tasks**: Check the tasks directory in documentation/tasks for the list of tasks to be completed. Use the CLI commands below to interact with them.

## MANDATORY Task Management Workflow

🚨 **YOU MUST FOLLOW THIS EXACT WORKFLOW - NO EXCEPTIONS** 🚨

### **STEP 1: DISCOVER TASKS (MANDATORY)**
You MUST start by running this command to see all available tasks:
```bash
task-manager list-tasks
```

### **STEP 2: START EACH TASK (MANDATORY)**
Before working on any task, you MUST mark it as started:
```bash
task-manager start-task <task_id>
```

### **STEP 3: COMPLETE OR CANCEL EACH TASK (MANDATORY)**
After finishing implementation, you MUST mark the task as completed, or cancel if you cannot complete it:
```bash
task-manager complete-task <task_id> "Brief description of what was implemented"
# or
task-manager cancel-task <task_id> "Reason for cancellation"
```

## Task Files Location

📁 **Task Data**: Your tasks are organized in the `documentation/tasks/` directory:
- Task JSON files contain complete task information
- Use ONLY the `task-manager` commands listed above
- Follow the mandatory workflow sequence for each task

## MANDATORY Task Workflow Sequence

🔄 **For EACH individual task, you MUST follow this sequence:**

1. 📋 **DISCOVER**: `task-manager list-tasks` (first time only)
2. 🚀 **START**: `task-manager start-task <task_id>` (mark as in progress)
3. 💻 **IMPLEMENT**: Do the actual coding/implementation work
4. ✅ **COMPLETE**: `task-manager complete-task <task_id> "What was done"` (or cancel with `task-manager cancel-task <task_id> "Reason"`)
5. 🔁 **REPEAT**: Go to next task (start from step 2)

## Task Status Options

- `pending` - Ready to work on
- `in_progress` - Currently being worked on
- `completed` - Successfully finished
- `blocked` - Cannot proceed (waiting for dependencies)
- `cancelled` - No longer needed

## CRITICAL WORKFLOW RULES

❌ **NEVER skip** the `task-manager start-task` command
❌ **NEVER skip** the `task-manager complete-task` command (use `task-manager cancel-task` if a task is not planned, not required, or you must stop it)
❌ **NEVER work on multiple tasks simultaneously**
✅ **ALWAYS complete one task fully before starting the next**
✅ **ALWAYS provide completion details in the complete command**
✅ **ALWAYS follow the exact 3-step sequence: list → start → complete (or cancel if not required)**
246 changes: 185 additions & 61 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,220 @@
@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

.logo-text {
font-family: Parkinsans, sans-serif;
font-family: 'Inter', sans-serif;
font-weight: 600;
}

@layer utilities {
.text-balance {
text-wrap: balance;
}

/* Glass Morphism Utilities */
.glass {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px var(--glass-shadow);
}

.glass-sm {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
box-shadow: 0 4px 16px var(--glass-shadow);
}

.glass-lg {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
box-shadow: 0 12px 48px var(--glass-shadow);
}

.glass-hover {
transition: all 0.3s ease;
}

.glass-hover:hover {
background: rgba(255, 255, 255, 0.35);
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.dark .glass-hover:hover {
background: rgba(40, 50, 80, 0.35);
}

/* Typography Utilities */
.font-inter {
font-family: 'Inter', sans-serif;
}

.font-poppins {
font-family: 'Poppins', sans-serif;
}

/* Gradient Backgrounds */
.bg-gradient-blue-white {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #dbeafe 100%);
}

.dark .bg-gradient-blue-white {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e3a8a 100%);
}
}

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
/* Blueish-Whiteish Color Palette */
--background: 220 20% 98%;
--foreground: 220 15% 15%;

/* Primary Blue Tones */
--primary: 220 85% 55%;
--primary-foreground: 0 0% 100%;
--primary-light: 220 85% 65%;
--primary-dark: 220 85% 45%;

/* Secondary Blue Tones */
--secondary: 210 70% 95%;
--secondary-foreground: 220 15% 20%;

/* Accent Blue */
--accent: 200 80% 60%;
--accent-foreground: 0 0% 100%;

/* Neutral Whites and Light Grays */
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--card-foreground: 220 15% 15%;
--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%;
--popover-foreground: 220 15% 15%;

/* Muted Tones */
--muted: 220 15% 95%;
--muted-foreground: 220 10% 45%;

/* Destructive */
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--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%;
--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
--destructive-foreground: 0 0% 100%;

/* Borders and Inputs */
--border: 220 15% 85%;
--input: 220 15% 90%;
--ring: 220 85% 55%;

/* Glass Morphism Variables */
--glass-bg: rgba(255, 255, 255, 0.25);
--glass-border: rgba(255, 255, 255, 0.18);
--glass-shadow: rgba(0, 0, 0, 0.1);
--glass-blur: 10px;

/* Chart colors */
--chart-1: 220 85% 55%;
--chart-2: 210 70% 60%;
--chart-3: 200 75% 65%;
--chart-4: 190 80% 70%;
--chart-5: 180 85% 75%;

--radius: 0.75rem;
--sidebar-background: 0 0% 100%;
--sidebar-foreground: 220 15% 15%;
--sidebar-primary: 220 85% 55%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 210 70% 95%;
--sidebar-accent-foreground: 220 15% 15%;
--sidebar-border: 220 15% 85%;
--sidebar-ring: 220 85% 55%;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--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%;
/* Dark Mode Blueish-Whiteish Palette */
--background: 220 25% 8%;
--foreground: 220 15% 90%;

/* Primary Blue Tones (Darker) */
--primary: 220 75% 65%;
--primary-foreground: 0 0% 100%;
--primary-light: 220 80% 75%;
--primary-dark: 220 70% 55%;

/* Secondary Dark Blues */
--secondary: 220 20% 15%;
--secondary-foreground: 220 15% 90%;

/* Accent Blue */
--accent: 200 70% 70%;
--accent-foreground: 220 25% 8%;

/* Dark Cards */
--card: 220 20% 12%;
--card-foreground: 220 15% 90%;
--popover: 220 20% 12%;
--popover-foreground: 220 15% 90%;

/* Muted Tones */
--muted: 220 15% 18%;
--muted-foreground: 220 10% 65%;

/* Destructive */
--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%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;

/* Borders and Inputs */
--border: 220 15% 20%;
--input: 220 15% 25%;
--ring: 220 75% 65%;

/* Dark Mode Glass Morphism */
--glass-bg: rgba(30, 40, 60, 0.25);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-shadow: rgba(0, 0, 0, 0.3);

/* Chart colors */
--chart-1: 220 75% 65%;
--chart-2: 210 70% 70%;
--chart-3: 200 65% 75%;
--chart-4: 190 60% 80%;
--chart-5: 180 55% 85%;

--sidebar-background: 220 20% 12%;
--sidebar-foreground: 220 15% 90%;
--sidebar-primary: 220 75% 65%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
--sidebar-accent: 220 15% 18%;
--sidebar-accent-foreground: 220 15% 90%;
--sidebar-border: 220 15% 20%;
--sidebar-ring: 220 75% 65%;
}
}

@layer base {
* {
@apply border-border;
}

html {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body {
@apply bg-background text-foreground;
font-family: 'Inter', sans-serif;
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 1.2;
}
}
Loading