mirror of
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
synced 2026-07-03 12:32:30 +08:00
feat: add three UI project examples (#174)
- SaaS landing page with social proof, pricing, testimonials - Healthcare analytics dashboard with charts and KPIs - Portfolio website with dark mode and project grid All built using ui-ux-pro-max design system recommendations. https://claude.ai/code/session_01E4rdBvf1LWqQ1XMTic7NrU Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
nhatvy142
458
projects/healthcare-dashboard/index.html
Normal file
458
projects/healthcare-dashboard/index.html
Normal file
@@ -0,0 +1,458 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HealthView - Analytics Dashboard</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#3B82F6',
|
||||
secondary: '#60A5FA',
|
||||
accent: '#F97316',
|
||||
surface: '#F8FAFC',
|
||||
text: '#1E293B',
|
||||
success: '#10B981',
|
||||
warning: '#F59E0B',
|
||||
danger: '#EF4444',
|
||||
},
|
||||
fontFamily: {
|
||||
heading: ['Fira Sans', 'sans-serif'],
|
||||
body: ['Fira Sans', 'sans-serif'],
|
||||
mono: ['Fira Code', 'monospace'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-slate-100 font-body text-text antialiased">
|
||||
<div class="flex min-h-screen">
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-64 bg-white border-r border-slate-200 fixed h-full">
|
||||
<div class="p-6 border-b border-slate-100">
|
||||
<h1 class="font-heading font-bold text-xl text-primary flex items-center gap-2">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
|
||||
</svg>
|
||||
HealthView
|
||||
</h1>
|
||||
</div>
|
||||
<nav class="p-4">
|
||||
<ul class="space-y-1">
|
||||
<li>
|
||||
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg bg-primary/10 text-primary font-medium cursor-pointer">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors duration-200 cursor-pointer">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
|
||||
</svg>
|
||||
Patients
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors duration-200 cursor-pointer">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
Appointments
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors duration-200 cursor-pointer">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
Analytics
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors duration-200 cursor-pointer">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 ml-64 p-8">
|
||||
<!-- Header -->
|
||||
<header class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h2 class="font-heading text-2xl font-bold text-text">Healthcare Analytics</h2>
|
||||
<p class="text-slate-500 text-sm">Overview of patient data and hospital metrics</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<input type="text" placeholder="Search patients..." class="pl-10 pr-4 py-2.5 rounded-lg border border-slate-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary w-64 transition-all duration-200" aria-label="Search patients">
|
||||
<svg class="w-5 h-5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<button class="p-2.5 rounded-lg border border-slate-200 bg-white hover:bg-slate-50 transition-colors duration-200 cursor-pointer relative" aria-label="Notifications">
|
||||
<svg class="w-5 h-5 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
|
||||
</svg>
|
||||
<span class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">3</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-3 pl-4 border-l border-slate-200">
|
||||
<div class="w-10 h-10 bg-primary/20 rounded-full flex items-center justify-center text-primary font-semibold">DR</div>
|
||||
<div>
|
||||
<div class="font-medium text-sm text-text">Dr. Roberts</div>
|
||||
<div class="text-xs text-slate-400">Cardiologist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- KPI Cards -->
|
||||
<div class="grid grid-cols-4 gap-6 mb-8">
|
||||
<div class="bg-white p-6 rounded-xl border border-slate-100 hover:shadow-md transition-shadow duration-300 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-success text-sm font-medium flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
|
||||
12%
|
||||
</span>
|
||||
</div>
|
||||
<div class="font-mono text-3xl font-bold text-text mb-1">2,847</div>
|
||||
<div class="text-slate-500 text-sm">Total Patients</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-xl border border-slate-100 hover:shadow-md transition-shadow duration-300 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-success/10 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-success text-sm font-medium flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
|
||||
8%
|
||||
</span>
|
||||
</div>
|
||||
<div class="font-mono text-3xl font-bold text-text mb-1">94.2%</div>
|
||||
<div class="text-slate-500 text-sm">Recovery Rate</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-xl border border-slate-100 hover:shadow-md transition-shadow duration-300 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-warning/10 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-danger text-sm font-medium flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
|
||||
3%
|
||||
</span>
|
||||
</div>
|
||||
<div class="font-mono text-3xl font-bold text-text mb-1">24 min</div>
|
||||
<div class="text-slate-500 text-sm">Avg. Wait Time</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-xl border border-slate-100 hover:shadow-md transition-shadow duration-300 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-success text-sm font-medium flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
|
||||
5%
|
||||
</span>
|
||||
</div>
|
||||
<div class="font-mono text-3xl font-bold text-text mb-1">142</div>
|
||||
<div class="text-slate-500 text-sm">Beds Available</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Charts Row -->
|
||||
<div class="grid grid-cols-3 gap-6 mb-8">
|
||||
<!-- Patient Trend Chart -->
|
||||
<div class="col-span-2 bg-white p-6 rounded-xl border border-slate-100">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-heading font-semibold text-lg text-text">Patient Admissions Trend</h3>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-3 py-1.5 text-sm rounded-lg bg-primary text-white cursor-pointer">Weekly</button>
|
||||
<button class="px-3 py-1.5 text-sm rounded-lg text-slate-500 hover:bg-slate-50 transition-colors duration-200 cursor-pointer">Monthly</button>
|
||||
<button class="px-3 py-1.5 text-sm rounded-lg text-slate-500 hover:bg-slate-50 transition-colors duration-200 cursor-pointer">Yearly</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-64">
|
||||
<canvas id="admissionsChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Department Distribution -->
|
||||
<div class="bg-white p-6 rounded-xl border border-slate-100">
|
||||
<h3 class="font-heading font-semibold text-lg text-text mb-6">Department Distribution</h3>
|
||||
<div class="h-64">
|
||||
<canvas id="departmentChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Second Row -->
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<!-- Recent Patients Table -->
|
||||
<div class="col-span-2 bg-white rounded-xl border border-slate-100">
|
||||
<div class="p-6 border-b border-slate-100 flex items-center justify-between">
|
||||
<h3 class="font-heading font-semibold text-lg text-text">Recent Patients</h3>
|
||||
<button class="text-primary text-sm font-medium hover:text-primary/80 transition-colors duration-200 cursor-pointer">View All</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="text-left text-sm text-slate-500 border-b border-slate-100">
|
||||
<th class="px-6 py-4 font-medium">Patient</th>
|
||||
<th class="px-6 py-4 font-medium">ID</th>
|
||||
<th class="px-6 py-4 font-medium">Department</th>
|
||||
<th class="px-6 py-4 font-medium">Status</th>
|
||||
<th class="px-6 py-4 font-medium">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-slate-50 hover:bg-slate-50/50 transition-colors duration-200 cursor-pointer">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center text-primary font-medium">JD</div>
|
||||
<div>
|
||||
<div class="font-medium text-text">John Doe</div>
|
||||
<div class="text-sm text-slate-400">john.doe@email.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-mono text-sm text-slate-600">#PT-2847</td>
|
||||
<td class="px-6 py-4 text-slate-600">Cardiology</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-3 py-1 rounded-full bg-success/10 text-success text-sm font-medium">Recovered</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-slate-500">Mar 8, 2026</td>
|
||||
</tr>
|
||||
<tr class="border-b border-slate-50 hover:bg-slate-50/50 transition-colors duration-200 cursor-pointer">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-secondary/10 rounded-full flex items-center justify-center text-secondary font-medium">SM</div>
|
||||
<div>
|
||||
<div class="font-medium text-text">Sarah Miller</div>
|
||||
<div class="text-sm text-slate-400">sarah.m@email.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-mono text-sm text-slate-600">#PT-2846</td>
|
||||
<td class="px-6 py-4 text-slate-600">Neurology</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-3 py-1 rounded-full bg-warning/10 text-warning text-sm font-medium">In Treatment</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-slate-500">Mar 7, 2026</td>
|
||||
</tr>
|
||||
<tr class="border-b border-slate-50 hover:bg-slate-50/50 transition-colors duration-200 cursor-pointer">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-accent/10 rounded-full flex items-center justify-center text-accent font-medium">RJ</div>
|
||||
<div>
|
||||
<div class="font-medium text-text">Robert Johnson</div>
|
||||
<div class="text-sm text-slate-400">r.johnson@email.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-mono text-sm text-slate-600">#PT-2845</td>
|
||||
<td class="px-6 py-4 text-slate-600">Orthopedics</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium">Scheduled</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-slate-500">Mar 6, 2026</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50/50 transition-colors duration-200 cursor-pointer">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-success/10 rounded-full flex items-center justify-center text-success font-medium">EW</div>
|
||||
<div>
|
||||
<div class="font-medium text-text">Emily Wilson</div>
|
||||
<div class="text-sm text-slate-400">e.wilson@email.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-mono text-sm text-slate-600">#PT-2844</td>
|
||||
<td class="px-6 py-4 text-slate-600">Pediatrics</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-3 py-1 rounded-full bg-success/10 text-success text-sm font-medium">Recovered</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-slate-500">Mar 5, 2026</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Appointments -->
|
||||
<div class="bg-white rounded-xl border border-slate-100">
|
||||
<div class="p-6 border-b border-slate-100">
|
||||
<h3 class="font-heading font-semibold text-lg text-text">Upcoming Appointments</h3>
|
||||
</div>
|
||||
<div class="p-4 space-y-3">
|
||||
<div class="p-4 rounded-lg bg-slate-50 hover:bg-slate-100 transition-colors duration-200 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-medium text-text">Checkup - Michael Brown</span>
|
||||
<span class="text-xs px-2 py-1 rounded bg-primary/10 text-primary">9:00 AM</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-500">General Health Examination</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-slate-50 hover:bg-slate-100 transition-colors duration-200 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-medium text-text">Surgery - Lisa Anderson</span>
|
||||
<span class="text-xs px-2 py-1 rounded bg-danger/10 text-danger">11:30 AM</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-500">Knee Replacement Procedure</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-slate-50 hover:bg-slate-100 transition-colors duration-200 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-medium text-text">Consultation - David Lee</span>
|
||||
<span class="text-xs px-2 py-1 rounded bg-warning/10 text-warning">2:00 PM</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-500">Cardiac Follow-up</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-slate-50 hover:bg-slate-100 transition-colors duration-200 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-medium text-text">Lab Results - Jennifer Kim</span>
|
||||
<span class="text-xs px-2 py-1 rounded bg-success/10 text-success">4:30 PM</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-500">Blood Work Review</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Patient Admissions Line Chart
|
||||
const admissionsCtx = document.getElementById('admissionsChart').getContext('2d');
|
||||
new Chart(admissionsCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
datasets: [{
|
||||
label: 'Admissions',
|
||||
data: [45, 52, 38, 65, 48, 32, 41],
|
||||
borderColor: '#3B82F6',
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
pointBackgroundColor: '#3B82F6',
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 5
|
||||
}, {
|
||||
label: 'Discharges',
|
||||
data: [38, 45, 42, 58, 52, 28, 35],
|
||||
borderColor: '#10B981',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
pointBackgroundColor: '#10B981',
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 5
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
padding: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(0,0,0,0.05)'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Department Donut Chart
|
||||
const departmentCtx = document.getElementById('departmentChart').getContext('2d');
|
||||
new Chart(departmentCtx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['Cardiology', 'Neurology', 'Orthopedics', 'Pediatrics', 'Other'],
|
||||
datasets: [{
|
||||
data: [28, 22, 18, 15, 17],
|
||||
backgroundColor: [
|
||||
'#3B82F6',
|
||||
'#10B981',
|
||||
'#F97316',
|
||||
'#8B5CF6',
|
||||
'#94A3B8'
|
||||
],
|
||||
borderWidth: 0,
|
||||
hoverOffset: 4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
cutout: '65%',
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
padding: 15,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
409
projects/portfolio-dark/index.html
Normal file
409
projects/portfolio-dark/index.html
Normal file
@@ -0,0 +1,409 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alex Chen - Full Stack Developer</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#3B82F6',
|
||||
secondary: '#1E293B',
|
||||
cta: '#2563EB',
|
||||
background: '#0F172A',
|
||||
surface: '#1E293B',
|
||||
text: '#F1F5F9',
|
||||
muted: '#94A3B8',
|
||||
},
|
||||
fontFamily: {
|
||||
heading: ['Space Grotesk', 'sans-serif'],
|
||||
body: ['Archivo', 'sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #3B82F6, #8B5CF6);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.card-glow:hover {
|
||||
box-shadow: 0 0 40px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-text antialiased">
|
||||
<!-- Floating Navbar -->
|
||||
<nav class="fixed top-6 left-6 right-6 z-50 bg-surface/80 backdrop-blur-xl rounded-2xl border border-white/5">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<a href="#" class="font-heading font-bold text-xl text-text cursor-pointer">
|
||||
<span class="gradient-text">AC</span>
|
||||
</a>
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a href="#work" class="text-muted hover:text-text transition-colors duration-200 cursor-pointer">Work</a>
|
||||
<a href="#about" class="text-muted hover:text-text transition-colors duration-200 cursor-pointer">About</a>
|
||||
<a href="#skills" class="text-muted hover:text-text transition-colors duration-200 cursor-pointer">Skills</a>
|
||||
<a href="#contact" class="text-muted hover:text-text transition-colors duration-200 cursor-pointer">Contact</a>
|
||||
</div>
|
||||
<a href="#contact" class="bg-primary hover:bg-cta text-white font-medium px-5 py-2.5 rounded-xl transition-colors duration-200 cursor-pointer">
|
||||
Let's Talk
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="min-h-screen flex items-center px-6 pt-32 pb-20">
|
||||
<div class="max-w-6xl mx-auto w-full">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<p class="text-primary font-medium mb-4 tracking-wide">Full Stack Developer</p>
|
||||
<h1 class="font-heading text-5xl md:text-7xl font-bold text-text mb-6 leading-tight">
|
||||
Hi, I'm<br>
|
||||
<span class="gradient-text">Alex Chen</span>
|
||||
</h1>
|
||||
<p class="text-muted text-lg md:text-xl leading-relaxed mb-10 max-w-lg">
|
||||
I craft digital experiences that blend beautiful design with powerful functionality. Specializing in React, Node.js, and modern web technologies.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<a href="#work" class="bg-primary hover:bg-cta text-white font-semibold px-8 py-4 rounded-xl transition-colors duration-200 cursor-pointer inline-flex items-center gap-2">
|
||||
View My Work
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#contact" class="border border-white/10 hover:border-white/20 text-text font-semibold px-8 py-4 rounded-xl transition-colors duration-200 cursor-pointer">
|
||||
Download CV
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Social Links -->
|
||||
<div class="flex gap-4 mt-12">
|
||||
<a href="#" class="w-12 h-12 rounded-xl bg-surface border border-white/5 flex items-center justify-center text-muted hover:text-primary hover:border-primary/30 transition-all duration-200 cursor-pointer" aria-label="GitHub">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||||
</a>
|
||||
<a href="#" class="w-12 h-12 rounded-xl bg-surface border border-white/5 flex items-center justify-center text-muted hover:text-primary hover:border-primary/30 transition-all duration-200 cursor-pointer" aria-label="LinkedIn">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
||||
</a>
|
||||
<a href="#" class="w-12 h-12 rounded-xl bg-surface border border-white/5 flex items-center justify-center text-muted hover:text-primary hover:border-primary/30 transition-all duration-200 cursor-pointer" aria-label="Twitter">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Image -->
|
||||
<div class="relative">
|
||||
<div class="aspect-square rounded-3xl bg-gradient-to-br from-primary/20 to-purple-600/20 border border-white/5 overflow-hidden">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-64 h-64 rounded-full bg-gradient-to-br from-primary to-purple-600 opacity-80 blur-3xl"></div>
|
||||
</div>
|
||||
<div class="relative z-10 h-full flex items-center justify-center">
|
||||
<div class="w-48 h-48 rounded-full bg-surface border-4 border-primary/30 flex items-center justify-center">
|
||||
<span class="font-heading text-6xl font-bold gradient-text">AC</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Floating Elements -->
|
||||
<div class="absolute -top-4 -right-4 w-20 h-20 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute -bottom-4 -left-4 w-16 h-16 rounded-2xl bg-purple-600/10 border border-purple-600/20 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Work Section -->
|
||||
<section id="work" class="py-24 px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<p class="text-primary font-medium mb-3">Portfolio</p>
|
||||
<h2 class="font-heading text-4xl md:text-5xl font-bold text-text">Featured Projects</h2>
|
||||
</div>
|
||||
|
||||
<!-- Project Grid (Masonry-style) -->
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<!-- Project 1 -->
|
||||
<div class="group bg-surface rounded-3xl border border-white/5 overflow-hidden card-glow transition-all duration-300 cursor-pointer">
|
||||
<div class="aspect-video bg-gradient-to-br from-blue-600/20 to-cyan-600/20 relative overflow-hidden">
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-background/80 backdrop-blur-sm">
|
||||
<span class="text-text font-medium flex items-center gap-2">
|
||||
View Project
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="flex gap-2 mb-4">
|
||||
<span class="px-3 py-1 rounded-full bg-primary/10 text-primary text-sm">React</span>
|
||||
<span class="px-3 py-1 rounded-full bg-cyan-500/10 text-cyan-400 text-sm">TypeScript</span>
|
||||
<span class="px-3 py-1 rounded-full bg-green-500/10 text-green-400 text-sm">Node.js</span>
|
||||
</div>
|
||||
<h3 class="font-heading text-2xl font-bold text-text mb-3">E-Commerce Platform</h3>
|
||||
<p class="text-muted leading-relaxed">Full-featured online store with real-time inventory, Stripe payments, and admin dashboard.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 2 -->
|
||||
<div class="group bg-surface rounded-3xl border border-white/5 overflow-hidden card-glow transition-all duration-300 cursor-pointer">
|
||||
<div class="aspect-video bg-gradient-to-br from-purple-600/20 to-pink-600/20 relative overflow-hidden">
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-background/80 backdrop-blur-sm">
|
||||
<span class="text-text font-medium flex items-center gap-2">
|
||||
View Project
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="flex gap-2 mb-4">
|
||||
<span class="px-3 py-1 rounded-full bg-purple-500/10 text-purple-400 text-sm">Next.js</span>
|
||||
<span class="px-3 py-1 rounded-full bg-orange-500/10 text-orange-400 text-sm">Prisma</span>
|
||||
<span class="px-3 py-1 rounded-full bg-blue-500/10 text-blue-400 text-sm">PostgreSQL</span>
|
||||
</div>
|
||||
<h3 class="font-heading text-2xl font-bold text-text mb-3">SaaS Dashboard</h3>
|
||||
<p class="text-muted leading-relaxed">Analytics platform with real-time data visualization, team collaboration, and custom reports.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 3 -->
|
||||
<div class="group bg-surface rounded-3xl border border-white/5 overflow-hidden card-glow transition-all duration-300 cursor-pointer">
|
||||
<div class="aspect-video bg-gradient-to-br from-green-600/20 to-emerald-600/20 relative overflow-hidden">
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-background/80 backdrop-blur-sm">
|
||||
<span class="text-text font-medium flex items-center gap-2">
|
||||
View Project
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="flex gap-2 mb-4">
|
||||
<span class="px-3 py-1 rounded-full bg-green-500/10 text-green-400 text-sm">Vue.js</span>
|
||||
<span class="px-3 py-1 rounded-full bg-yellow-500/10 text-yellow-400 text-sm">Firebase</span>
|
||||
<span class="px-3 py-1 rounded-full bg-pink-500/10 text-pink-400 text-sm">Tailwind</span>
|
||||
</div>
|
||||
<h3 class="font-heading text-2xl font-bold text-text mb-3">Task Management App</h3>
|
||||
<p class="text-muted leading-relaxed">Collaborative project management tool with kanban boards, time tracking, and integrations.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 4 -->
|
||||
<div class="group bg-surface rounded-3xl border border-white/5 overflow-hidden card-glow transition-all duration-300 cursor-pointer">
|
||||
<div class="aspect-video bg-gradient-to-br from-orange-600/20 to-red-600/20 relative overflow-hidden">
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-background/80 backdrop-blur-sm">
|
||||
<span class="text-text font-medium flex items-center gap-2">
|
||||
View Project
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="flex gap-2 mb-4">
|
||||
<span class="px-3 py-1 rounded-full bg-red-500/10 text-red-400 text-sm">React Native</span>
|
||||
<span class="px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-sm">GraphQL</span>
|
||||
<span class="px-3 py-1 rounded-full bg-teal-500/10 text-teal-400 text-sm">AWS</span>
|
||||
</div>
|
||||
<h3 class="font-heading text-2xl font-bold text-text mb-3">Fitness Tracker</h3>
|
||||
<p class="text-muted leading-relaxed">Cross-platform mobile app with workout tracking, nutrition logging, and social features.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Skills Section -->
|
||||
<section id="skills" class="py-24 px-6 bg-surface/50">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<p class="text-primary font-medium mb-3">Expertise</p>
|
||||
<h2 class="font-heading text-4xl md:text-5xl font-bold text-text">Skills & Technologies</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Frontend -->
|
||||
<div class="bg-surface p-8 rounded-3xl border border-white/5">
|
||||
<div class="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mb-6">
|
||||
<svg class="w-7 h-7 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-heading text-xl font-bold text-text mb-4">Frontend</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">React</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Next.js</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">TypeScript</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Vue.js</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Tailwind CSS</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Framer Motion</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backend -->
|
||||
<div class="bg-surface p-8 rounded-3xl border border-white/5">
|
||||
<div class="w-14 h-14 rounded-2xl bg-green-500/10 flex items-center justify-center mb-6">
|
||||
<svg class="w-7 h-7 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-heading text-xl font-bold text-text mb-4">Backend</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Node.js</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Python</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">PostgreSQL</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">MongoDB</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">GraphQL</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">REST APIs</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tools -->
|
||||
<div class="bg-surface p-8 rounded-3xl border border-white/5">
|
||||
<div class="w-14 h-14 rounded-2xl bg-purple-500/10 flex items-center justify-center mb-6">
|
||||
<svg class="w-7 h-7 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-heading text-xl font-bold text-text mb-4">Tools & DevOps</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Git</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Docker</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">AWS</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Vercel</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">CI/CD</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="py-24 px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="order-2 lg:order-1">
|
||||
<p class="text-primary font-medium mb-3">About Me</p>
|
||||
<h2 class="font-heading text-4xl md:text-5xl font-bold text-text mb-6">Turning Ideas into Reality</h2>
|
||||
<p class="text-muted text-lg leading-relaxed mb-6">
|
||||
With 5+ years of experience in web development, I've had the privilege of working with startups and established companies to build products that make a difference.
|
||||
</p>
|
||||
<p class="text-muted text-lg leading-relaxed mb-8">
|
||||
I believe great software is born from the intersection of clean code, intuitive design, and deep understanding of user needs. When I'm not coding, you'll find me contributing to open source or exploring the latest web technologies.
|
||||
</p>
|
||||
<div class="grid grid-cols-3 gap-8">
|
||||
<div>
|
||||
<div class="font-heading text-4xl font-bold gradient-text mb-2">5+</div>
|
||||
<div class="text-muted text-sm">Years Experience</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-heading text-4xl font-bold gradient-text mb-2">50+</div>
|
||||
<div class="text-muted text-sm">Projects Completed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-heading text-4xl font-bold gradient-text mb-2">30+</div>
|
||||
<div class="text-muted text-sm">Happy Clients</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="aspect-square rounded-3xl bg-gradient-to-br from-primary/10 to-purple-600/10 border border-white/5 p-8 flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="w-32 h-32 rounded-full bg-gradient-to-br from-primary to-purple-600 mx-auto mb-6 flex items-center justify-center">
|
||||
<svg class="w-16 h-16 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<blockquote class="text-text text-lg italic">"Code is poetry written for machines to execute and humans to admire."</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="py-24 px-6 bg-surface/50">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<p class="text-primary font-medium mb-3">Get In Touch</p>
|
||||
<h2 class="font-heading text-4xl md:text-5xl font-bold text-text mb-6">Let's Work Together</h2>
|
||||
<p class="text-muted text-lg mb-12 max-w-2xl mx-auto">
|
||||
Have a project in mind or just want to chat? I'm always open to discussing new opportunities and creative ideas.
|
||||
</p>
|
||||
|
||||
<form class="bg-surface rounded-3xl border border-white/5 p-8 md:p-12 text-left">
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-6">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-text mb-2">Name</label>
|
||||
<input type="text" id="name" name="name" class="w-full px-4 py-3 rounded-xl bg-background border border-white/10 text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200" placeholder="John Doe">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-text mb-2">Email</label>
|
||||
<input type="email" id="email" name="email" class="w-full px-4 py-3 rounded-xl bg-background border border-white/10 text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200" placeholder="john@example.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label for="subject" class="block text-sm font-medium text-text mb-2">Subject</label>
|
||||
<input type="text" id="subject" name="subject" class="w-full px-4 py-3 rounded-xl bg-background border border-white/10 text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200" placeholder="Project Inquiry">
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<label for="message" class="block text-sm font-medium text-text mb-2">Message</label>
|
||||
<textarea id="message" name="message" rows="5" class="w-full px-4 py-3 rounded-xl bg-background border border-white/10 text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200 resize-none" placeholder="Tell me about your project..."></textarea>
|
||||
</div>
|
||||
<button type="submit" class="w-full bg-primary hover:bg-cta text-white font-semibold py-4 rounded-xl transition-colors duration-200 cursor-pointer">
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 px-6 border-t border-white/5">
|
||||
<div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-heading font-bold text-xl gradient-text">AC</span>
|
||||
<span class="text-muted">Alex Chen</span>
|
||||
</div>
|
||||
<p class="text-muted text-sm">2026 All rights reserved. Built with passion.</p>
|
||||
<div class="flex gap-4">
|
||||
<a href="#" class="text-muted hover:text-text transition-colors duration-200 cursor-pointer" aria-label="GitHub">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||||
</a>
|
||||
<a href="#" class="text-muted hover:text-text transition-colors duration-200 cursor-pointer" aria-label="LinkedIn">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
||||
</a>
|
||||
<a href="#" class="text-muted hover:text-text transition-colors duration-200 cursor-pointer" aria-label="Twitter">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
345
projects/saas-landing/index.html
Normal file
345
projects/saas-landing/index.html
Normal file
@@ -0,0 +1,345 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SaaSify - Streamline Your Workflow</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#3B82F6',
|
||||
secondary: '#60A5FA',
|
||||
cta: '#F97316',
|
||||
background: '#F8FAFC',
|
||||
text: '#1E293B',
|
||||
},
|
||||
fontFamily: {
|
||||
heading: ['Poppins', 'sans-serif'],
|
||||
body: ['Open Sans', 'sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-text antialiased">
|
||||
<!-- Floating Navbar -->
|
||||
<nav class="fixed top-4 left-4 right-4 z-50 bg-white/90 backdrop-blur-md rounded-2xl shadow-lg border border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<a href="#" class="font-heading font-bold text-2xl text-primary cursor-pointer">SaaSify</a>
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a href="#features" class="text-text/80 hover:text-primary transition-colors duration-200 cursor-pointer">Features</a>
|
||||
<a href="#testimonials" class="text-text/80 hover:text-primary transition-colors duration-200 cursor-pointer">Testimonials</a>
|
||||
<a href="#pricing" class="text-text/80 hover:text-primary transition-colors duration-200 cursor-pointer">Pricing</a>
|
||||
</div>
|
||||
<a href="#cta" class="bg-cta hover:bg-orange-600 text-white font-semibold px-6 py-2.5 rounded-lg transition-colors duration-200 cursor-pointer">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="pt-32 pb-20 px-4">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<h1 class="font-heading text-4xl md:text-6xl font-bold text-text mb-6 leading-tight">
|
||||
Streamline Your Workflow<br>
|
||||
<span class="text-primary">Like Never Before</span>
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-text/70 max-w-2xl mx-auto mb-10 leading-relaxed">
|
||||
Join 10,000+ teams who trust SaaSify to automate tasks, boost productivity, and scale their operations effortlessly.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-16">
|
||||
<a href="#cta" class="bg-cta hover:bg-orange-600 text-white font-semibold px-8 py-4 rounded-xl text-lg transition-colors duration-200 cursor-pointer shadow-lg shadow-cta/30">
|
||||
Start Free Trial
|
||||
</a>
|
||||
<a href="#demo" class="bg-white hover:bg-gray-50 text-text font-semibold px-8 py-4 rounded-xl text-lg transition-colors duration-200 cursor-pointer border border-gray-200">
|
||||
Watch Demo
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Social Proof Stats -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
||||
<div class="text-center">
|
||||
<div class="font-heading text-3xl md:text-4xl font-bold text-primary mb-2">10K+</div>
|
||||
<div class="text-text/60 text-sm">Active Teams</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="font-heading text-3xl md:text-4xl font-bold text-primary mb-2">99.9%</div>
|
||||
<div class="text-text/60 text-sm">Uptime SLA</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="font-heading text-3xl md:text-4xl font-bold text-primary mb-2">50M+</div>
|
||||
<div class="text-text/60 text-sm">Tasks Automated</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="font-heading text-3xl md:text-4xl font-bold text-primary mb-2">4.9</div>
|
||||
<div class="text-text/60 text-sm">Star Rating</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Logo Cloud -->
|
||||
<section class="py-16 bg-white border-y border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<p class="text-center text-text/50 text-sm font-medium mb-8 uppercase tracking-wider">Trusted by industry leaders</p>
|
||||
<div class="flex flex-wrap justify-center items-center gap-12 opacity-60">
|
||||
<svg class="h-8 w-auto" viewBox="0 0 124 24" fill="currentColor"><text x="0" y="20" font-family="Arial" font-size="20" font-weight="bold">Stripe</text></svg>
|
||||
<svg class="h-8 w-auto" viewBox="0 0 124 24" fill="currentColor"><text x="0" y="20" font-family="Arial" font-size="20" font-weight="bold">Notion</text></svg>
|
||||
<svg class="h-8 w-auto" viewBox="0 0 124 24" fill="currentColor"><text x="0" y="20" font-family="Arial" font-size="20" font-weight="bold">Linear</text></svg>
|
||||
<svg class="h-8 w-auto" viewBox="0 0 124 24" fill="currentColor"><text x="0" y="20" font-family="Arial" font-size="20" font-weight="bold">Vercel</text></svg>
|
||||
<svg class="h-8 w-auto" viewBox="0 0 124 24" fill="currentColor"><text x="0" y="20" font-family="Arial" font-size="20" font-weight="bold">Figma</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="py-24 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="font-heading text-3xl md:text-4xl font-bold text-text mb-4">Everything You Need to Scale</h2>
|
||||
<p class="text-text/60 text-lg max-w-2xl mx-auto">Powerful features designed to help your team work smarter, not harder.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Feature 1 -->
|
||||
<div class="bg-white p-8 rounded-2xl border border-gray-100 hover:shadow-xl hover:border-primary/20 transition-all duration-300 cursor-pointer group">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors duration-200">
|
||||
<svg class="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-heading font-semibold text-xl text-text mb-3">Instant Automation</h3>
|
||||
<p class="text-text/60 leading-relaxed">Set up workflows in minutes with our no-code builder. Automate repetitive tasks and focus on what matters.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="bg-white p-8 rounded-2xl border border-gray-100 hover:shadow-xl hover:border-primary/20 transition-all duration-300 cursor-pointer group">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors duration-200">
|
||||
<svg class="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-heading font-semibold text-xl text-text mb-3">Real-time Analytics</h3>
|
||||
<p class="text-text/60 leading-relaxed">Track performance metrics, identify bottlenecks, and make data-driven decisions with powerful dashboards.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3 -->
|
||||
<div class="bg-white p-8 rounded-2xl border border-gray-100 hover:shadow-xl hover:border-primary/20 transition-all duration-300 cursor-pointer group">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors duration-200">
|
||||
<svg class="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-heading font-semibold text-xl text-text mb-3">Enterprise Security</h3>
|
||||
<p class="text-text/60 leading-relaxed">Bank-level encryption, SOC 2 compliance, and granular permissions keep your data safe and secure.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section id="testimonials" class="py-24 px-4 bg-white">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="font-heading text-3xl md:text-4xl font-bold text-text mb-4">Loved by Teams Worldwide</h2>
|
||||
<p class="text-text/60 text-lg">See what our customers have to say about SaaSify.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Testimonial 1 -->
|
||||
<div class="bg-background p-8 rounded-2xl border border-gray-100 cursor-pointer hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="flex gap-1 mb-4">
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
</div>
|
||||
<p class="text-text/80 mb-6 leading-relaxed">"SaaSify reduced our manual work by 80%. We can now focus on strategic initiatives instead of repetitive tasks."</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center text-primary font-semibold">SM</div>
|
||||
<div>
|
||||
<div class="font-semibold text-text">Sarah Mitchell</div>
|
||||
<div class="text-sm text-text/50">VP Operations, TechCorp</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 2 -->
|
||||
<div class="bg-background p-8 rounded-2xl border border-gray-100 cursor-pointer hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="flex gap-1 mb-4">
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
</div>
|
||||
<p class="text-text/80 mb-6 leading-relaxed">"The analytics dashboard gives us insights we never had before. ROI was visible within the first month."</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center text-secondary font-semibold">JC</div>
|
||||
<div>
|
||||
<div class="font-semibold text-text">James Chen</div>
|
||||
<div class="text-sm text-text/50">CTO, ScaleUp Inc</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 3 -->
|
||||
<div class="bg-background p-8 rounded-2xl border border-gray-100 cursor-pointer hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="flex gap-1 mb-4">
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
</div>
|
||||
<p class="text-text/80 mb-6 leading-relaxed">"Best investment we've made. The integrations work flawlessly and support team is incredibly responsive."</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-cta/20 rounded-full flex items-center justify-center text-cta font-semibold">AR</div>
|
||||
<div>
|
||||
<div class="font-semibold text-text">Amanda Rodriguez</div>
|
||||
<div class="text-sm text-text/50">Founder, GrowthLab</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing Section -->
|
||||
<section id="pricing" class="py-24 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="font-heading text-3xl md:text-4xl font-bold text-text mb-4">Simple, Transparent Pricing</h2>
|
||||
<p class="text-text/60 text-lg">Start free. Scale as you grow.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
<!-- Starter -->
|
||||
<div class="bg-white p-8 rounded-2xl border border-gray-200 cursor-pointer hover:shadow-lg transition-shadow duration-300">
|
||||
<h3 class="font-heading font-semibold text-xl text-text mb-2">Starter</h3>
|
||||
<p class="text-text/50 text-sm mb-6">For small teams getting started</p>
|
||||
<div class="mb-6">
|
||||
<span class="font-heading text-4xl font-bold text-text">$0</span>
|
||||
<span class="text-text/50">/month</span>
|
||||
</div>
|
||||
<ul class="space-y-3 mb-8">
|
||||
<li class="flex items-center gap-3 text-text/70"><svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Up to 5 users</li>
|
||||
<li class="flex items-center gap-3 text-text/70"><svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>100 automations/mo</li>
|
||||
<li class="flex items-center gap-3 text-text/70"><svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Basic analytics</li>
|
||||
</ul>
|
||||
<button class="w-full py-3 px-6 rounded-xl border-2 border-gray-200 text-text font-semibold hover:border-primary hover:text-primary transition-colors duration-200 cursor-pointer">Get Started</button>
|
||||
</div>
|
||||
|
||||
<!-- Pro (Popular) -->
|
||||
<div class="bg-primary p-8 rounded-2xl border-2 border-primary relative cursor-pointer hover:shadow-xl transition-shadow duration-300 scale-105">
|
||||
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-cta text-white text-sm font-semibold px-4 py-1 rounded-full">Most Popular</div>
|
||||
<h3 class="font-heading font-semibold text-xl text-white mb-2">Pro</h3>
|
||||
<p class="text-white/70 text-sm mb-6">For growing teams</p>
|
||||
<div class="mb-6">
|
||||
<span class="font-heading text-4xl font-bold text-white">$49</span>
|
||||
<span class="text-white/70">/month</span>
|
||||
</div>
|
||||
<ul class="space-y-3 mb-8">
|
||||
<li class="flex items-center gap-3 text-white/90"><svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Up to 25 users</li>
|
||||
<li class="flex items-center gap-3 text-white/90"><svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Unlimited automations</li>
|
||||
<li class="flex items-center gap-3 text-white/90"><svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Advanced analytics</li>
|
||||
<li class="flex items-center gap-3 text-white/90"><svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Priority support</li>
|
||||
</ul>
|
||||
<button class="w-full py-3 px-6 rounded-xl bg-white text-primary font-semibold hover:bg-gray-100 transition-colors duration-200 cursor-pointer">Start Free Trial</button>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise -->
|
||||
<div class="bg-white p-8 rounded-2xl border border-gray-200 cursor-pointer hover:shadow-lg transition-shadow duration-300">
|
||||
<h3 class="font-heading font-semibold text-xl text-text mb-2">Enterprise</h3>
|
||||
<p class="text-text/50 text-sm mb-6">For large organizations</p>
|
||||
<div class="mb-6">
|
||||
<span class="font-heading text-4xl font-bold text-text">Custom</span>
|
||||
</div>
|
||||
<ul class="space-y-3 mb-8">
|
||||
<li class="flex items-center gap-3 text-text/70"><svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Unlimited users</li>
|
||||
<li class="flex items-center gap-3 text-text/70"><svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Custom integrations</li>
|
||||
<li class="flex items-center gap-3 text-text/70"><svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Dedicated support</li>
|
||||
<li class="flex items-center gap-3 text-text/70"><svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>SLA guarantee</li>
|
||||
</ul>
|
||||
<button class="w-full py-3 px-6 rounded-xl border-2 border-gray-200 text-text font-semibold hover:border-primary hover:text-primary transition-colors duration-200 cursor-pointer">Contact Sales</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section id="cta" class="py-24 px-4 bg-gradient-to-br from-primary to-secondary">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h2 class="font-heading text-3xl md:text-5xl font-bold text-white mb-6">Ready to Transform Your Workflow?</h2>
|
||||
<p class="text-white/80 text-lg md:text-xl mb-10 max-w-2xl mx-auto">Join thousands of teams already using SaaSify. Start your free trial today.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button class="bg-white text-primary font-semibold px-8 py-4 rounded-xl text-lg hover:bg-gray-100 transition-colors duration-200 cursor-pointer shadow-lg">
|
||||
Start Free Trial
|
||||
</button>
|
||||
<button class="bg-transparent border-2 border-white text-white font-semibold px-8 py-4 rounded-xl text-lg hover:bg-white/10 transition-colors duration-200 cursor-pointer">
|
||||
Schedule Demo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-text py-16 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid md:grid-cols-4 gap-12 mb-12">
|
||||
<div>
|
||||
<a href="#" class="font-heading font-bold text-2xl text-white mb-4 block cursor-pointer">SaaSify</a>
|
||||
<p class="text-white/60 leading-relaxed">Streamline your workflow and scale your operations with powerful automation.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-white mb-4">Product</h4>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Features</a></li>
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Pricing</a></li>
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Integrations</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-white mb-4">Company</h4>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">About</a></li>
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Blog</a></li>
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-white mb-4">Support</h4>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Help Center</a></li>
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Contact</a></li>
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Status</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p class="text-white/40 text-sm">© 2026 SaaSify. All rights reserved.</p>
|
||||
<div class="flex gap-6">
|
||||
<a href="#" class="text-white/40 hover:text-white transition-colors duration-200 cursor-pointer text-sm">Privacy</a>
|
||||
<a href="#" class="text-white/40 hover:text-white transition-colors duration-200 cursor-pointer text-sm">Terms</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user