Initial commit: Site Builder with PHP API backend
Visual drag-and-drop website builder using GrapesJS with: - Multi-page editor with live preview - File-based asset storage via PHP API (no localStorage base64) - Template library, Docker support, and Playwright test suite Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
157
templates/app-showcase.html
Normal file
157
templates/app-showcase.html
Normal file
@@ -0,0 +1,157 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background:#0f172a;">
|
||||
<div style="font-size:22px;font-weight:700;color:#fff;font-family:Inter,sans-serif;">Flow<span style="color:#06b6d4;">App</span></div>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#features" style="color:#94a3b8;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Features</a>
|
||||
<a href="#how" style="color:#94a3b8;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">How It Works</a>
|
||||
<a href="#download" style="display:inline-block;padding:10px 24px;background:#06b6d4;color:#fff;font-size:14px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">Download App</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section style="min-height:600px;display:flex;align-items:center;padding:80px 60px;background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#0f172a 100%);position:relative;overflow:hidden;">
|
||||
<div style="position:absolute;top:50%;right:10%;width:500px;height:500px;background:radial-gradient(circle,rgba(6,182,212,0.1) 0%,transparent 70%);border-radius:50%;transform:translateY(-50%);"></div>
|
||||
<div style="max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:60px;align-items:center;width:100%;">
|
||||
<div style="flex:1;min-width:340px;position:relative;z-index:1;">
|
||||
<div style="display:inline-block;padding:8px 16px;background:rgba(6,182,212,0.1);border:1px solid rgba(6,182,212,0.2);border-radius:50px;margin-bottom:20px;">
|
||||
<span style="color:#22d3ee;font-size:13px;font-weight:600;font-family:Inter,sans-serif;">📱 Available on iOS & Android</span>
|
||||
</div>
|
||||
<h1 style="font-size:52px;font-weight:800;color:#fff;line-height:1.1;margin-bottom:24px;font-family:Inter,sans-serif;letter-spacing:-1px;">Your daily habits, beautifully organized.</h1>
|
||||
<p style="color:#94a3b8;font-size:18px;line-height:1.7;margin-bottom:36px;font-family:Inter,sans-serif;">FlowApp helps you build positive habits, track your goals, and stay focused — all with a gorgeous, distraction-free interface.</p>
|
||||
<div style="display:flex;gap:16px;flex-wrap:wrap;">
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:#fff;color:#0f172a;font-size:15px;font-weight:600;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;">
|
||||
<span style="font-size:22px;">🍎</span> App Store
|
||||
</a>
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:#fff;color:#0f172a;font-size:15px;font-weight:600;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;">
|
||||
<span style="font-size:22px;">▶</span> Google Play
|
||||
</a>
|
||||
</div>
|
||||
<div style="display:flex;gap:24px;margin-top:32px;flex-wrap:wrap;">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<span style="color:#fbbf24;font-size:16px;">★★★★★</span>
|
||||
<span style="color:#94a3b8;font-size:14px;font-family:Inter,sans-serif;">4.9 rating</span>
|
||||
</div>
|
||||
<span style="color:#94a3b8;font-size:14px;font-family:Inter,sans-serif;">500K+ downloads</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;text-align:center;">
|
||||
<div style="width:280px;height:560px;background:linear-gradient(135deg,#06b6d4,#7c3aed);border-radius:40px;margin:0 auto;padding:12px;box-shadow:0 30px 80px rgba(6,182,212,0.2);">
|
||||
<div style="width:100%;height:100%;background:#0f172a;border-radius:30px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:32px;">
|
||||
<div style="font-size:48px;margin-bottom:16px;">🎯</div>
|
||||
<h3 style="color:#fff;font-size:22px;font-weight:700;margin-bottom:8px;font-family:Inter,sans-serif;">Today's Goals</h3>
|
||||
<div style="width:100%;margin-top:20px;">
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:14px;background:rgba(6,182,212,0.1);border-radius:12px;margin-bottom:8px;">
|
||||
<span style="color:#22d3ee;font-size:18px;">✓</span>
|
||||
<span style="color:#e2e8f0;font-size:14px;font-family:Inter,sans-serif;">Morning meditation</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:14px;background:rgba(6,182,212,0.1);border-radius:12px;margin-bottom:8px;">
|
||||
<span style="color:#22d3ee;font-size:18px;">✓</span>
|
||||
<span style="color:#e2e8f0;font-size:14px;font-family:Inter,sans-serif;">Read 30 minutes</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:14px;background:rgba(255,255,255,0.05);border-radius:12px;margin-bottom:8px;">
|
||||
<span style="color:#475569;font-size:18px;">○</span>
|
||||
<span style="color:#94a3b8;font-size:14px;font-family:Inter,sans-serif;">Exercise 30 min</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:14px;background:rgba(255,255,255,0.05);border-radius:12px;">
|
||||
<span style="color:#475569;font-size:18px;">○</span>
|
||||
<span style="color:#94a3b8;font-size:14px;font-family:Inter,sans-serif;">Journal entry</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section id="features" style="padding:100px 20px;background:#fff;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<h2 style="font-size:42px;font-weight:800;color:#0f172a;margin-bottom:16px;font-family:Inter,sans-serif;">Why people love FlowApp</h2>
|
||||
<p style="font-size:18px;color:#64748b;font-family:Inter,sans-serif;">Simple tools, powerful results</p>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
|
||||
<div style="flex:1;min-width:280px;max-width:350px;text-align:center;padding:32px;">
|
||||
<div style="width:64px;height:64px;background:linear-gradient(135deg,#06b6d4,#0891b2);border-radius:16px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:28px;">📊</div>
|
||||
<h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#0f172a;font-family:Inter,sans-serif;">Smart Analytics</h3>
|
||||
<p style="color:#64748b;line-height:1.7;font-family:Inter,sans-serif;">Visualize your progress with beautiful charts. Understand your patterns and optimize your routine.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:350px;text-align:center;padding:32px;">
|
||||
<div style="width:64px;height:64px;background:linear-gradient(135deg,#7c3aed,#6d28d9);border-radius:16px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:28px;">🔔</div>
|
||||
<h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#0f172a;font-family:Inter,sans-serif;">Gentle Reminders</h3>
|
||||
<p style="color:#64748b;line-height:1.7;font-family:Inter,sans-serif;">Never miss a habit with customizable nudges. Smart timing that adapts to your schedule.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:350px;text-align:center;padding:32px;">
|
||||
<div style="width:64px;height:64px;background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:16px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:28px;">🏆</div>
|
||||
<h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#0f172a;font-family:Inter,sans-serif;">Streaks & Rewards</h3>
|
||||
<p style="color:#64748b;line-height:1.7;font-family:Inter,sans-serif;">Stay motivated with daily streaks and achievement badges. Celebrate every milestone.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How It Works -->
|
||||
<section id="how" style="padding:100px 20px;background:#f8fafc;">
|
||||
<div style="max-width:1000px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<h2 style="font-size:42px;font-weight:800;color:#0f172a;margin-bottom:16px;font-family:Inter,sans-serif;">Start in 3 simple steps</h2>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:40px;justify-content:center;">
|
||||
<div style="flex:1;min-width:250px;max-width:300px;text-align:center;">
|
||||
<div style="width:60px;height:60px;background:#06b6d4;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:800;font-family:Inter,sans-serif;">1</div>
|
||||
<h3 style="font-size:20px;font-weight:700;margin-bottom:8px;color:#0f172a;font-family:Inter,sans-serif;">Download the App</h3>
|
||||
<p style="color:#64748b;line-height:1.6;font-family:Inter,sans-serif;">Free on iOS and Android. Set up your account in under a minute.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:250px;max-width:300px;text-align:center;">
|
||||
<div style="width:60px;height:60px;background:#7c3aed;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:800;font-family:Inter,sans-serif;">2</div>
|
||||
<h3 style="font-size:20px;font-weight:700;margin-bottom:8px;color:#0f172a;font-family:Inter,sans-serif;">Choose Your Habits</h3>
|
||||
<p style="color:#64748b;line-height:1.6;font-family:Inter,sans-serif;">Pick from popular templates or create your own custom habits.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:250px;max-width:300px;text-align:center;">
|
||||
<div style="width:60px;height:60px;background:#f59e0b;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:800;font-family:Inter,sans-serif;">3</div>
|
||||
<h3 style="font-size:20px;font-weight:700;margin-bottom:8px;color:#0f172a;font-family:Inter,sans-serif;">Track & Grow</h3>
|
||||
<p style="color:#64748b;line-height:1.6;font-family:Inter,sans-serif;">Check off habits daily and watch your streaks grow. It's that simple.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Social Proof -->
|
||||
<section style="padding:80px 20px;background:#0f172a;">
|
||||
<div style="max-width:1000px;margin:0 auto;text-align:center;">
|
||||
<h2 style="font-size:32px;font-weight:800;color:#fff;margin-bottom:40px;font-family:Inter,sans-serif;">What our users say</h2>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;">
|
||||
<div style="flex:1;min-width:280px;max-width:340px;padding:28px;background:rgba(255,255,255,0.05);border-radius:16px;text-align:left;">
|
||||
<div style="color:#fbbf24;font-size:16px;margin-bottom:12px;">★★★★★</div>
|
||||
<p style="color:#e2e8f0;font-size:15px;line-height:1.7;margin-bottom:16px;font-family:Inter,sans-serif;">"FlowApp completely changed my morning routine. I've maintained a 90-day streak and feel more productive than ever."</p>
|
||||
<p style="color:#94a3b8;font-size:13px;font-family:Inter,sans-serif;">— Rachel M., Product Manager</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:340px;padding:28px;background:rgba(255,255,255,0.05);border-radius:16px;text-align:left;">
|
||||
<div style="color:#fbbf24;font-size:16px;margin-bottom:12px;">★★★★★</div>
|
||||
<p style="color:#e2e8f0;font-size:15px;line-height:1.7;margin-bottom:16px;font-family:Inter,sans-serif;">"The most beautiful habit tracker I've used. Other apps feel cluttered in comparison. FlowApp is pure focus."</p>
|
||||
<p style="color:#94a3b8;font-size:13px;font-family:Inter,sans-serif;">— Tom K., Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Download CTA -->
|
||||
<section id="download" style="padding:100px 20px;background:linear-gradient(135deg,#06b6d4,#7c3aed);text-align:center;">
|
||||
<div style="max-width:600px;margin:0 auto;">
|
||||
<h2 style="font-size:42px;font-weight:800;color:#fff;margin-bottom:20px;font-family:Inter,sans-serif;">Start building better habits today</h2>
|
||||
<p style="font-size:18px;color:rgba(255,255,255,0.85);margin-bottom:40px;font-family:Inter,sans-serif;">Free to download. No credit card required.</p>
|
||||
<div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:16px 32px;background:#fff;color:#0f172a;font-size:16px;font-weight:600;text-decoration:none;border-radius:12px;font-family:Inter,sans-serif;">
|
||||
<span style="font-size:24px;">🍎</span> Download for iOS
|
||||
</a>
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:16px 32px;background:rgba(255,255,255,0.15);color:#fff;font-size:16px;font-weight:600;text-decoration:none;border-radius:12px;font-family:Inter,sans-serif;border:1px solid rgba(255,255,255,0.3);">
|
||||
<span style="font-size:24px;">▶</span> Download for Android
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="padding:40px 20px;background:#0f172a;text-align:center;">
|
||||
<p style="color:#64748b;font-size:13px;font-family:Inter,sans-serif;">© 2026 FlowApp. All rights reserved.</p>
|
||||
</footer>
|
||||
153
templates/business-agency.html
Normal file
153
templates/business-agency.html
Normal file
@@ -0,0 +1,153 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background:#fff;border-bottom:1px solid #e2e8f0;">
|
||||
<div style="font-size:22px;font-weight:700;color:#0f172a;font-family:Inter,sans-serif;">Apex<span style="color:#0ea5e9;">Digital</span></div>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#services" style="color:#64748b;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Services</a>
|
||||
<a href="#work" style="color:#64748b;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Work</a>
|
||||
<a href="#team" style="color:#64748b;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Team</a>
|
||||
<a href="#contact" style="display:inline-block;padding:10px 24px;background:#0ea5e9;color:#fff;font-size:14px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">Let's Talk</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section style="min-height:600px;display:flex;align-items:center;padding:80px 60px;background:#f8fafc;">
|
||||
<div style="max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:60px;align-items:center;width:100%;">
|
||||
<div style="flex:1;min-width:340px;">
|
||||
<div style="display:inline-block;padding:8px 16px;background:#e0f2fe;border-radius:20px;margin-bottom:20px;">
|
||||
<span style="color:#0369a1;font-size:13px;font-weight:600;font-family:Inter,sans-serif;">Award-Winning Digital Agency</span>
|
||||
</div>
|
||||
<h1 style="font-size:52px;font-weight:800;color:#0f172a;line-height:1.1;margin-bottom:24px;font-family:Inter,sans-serif;letter-spacing:-1px;">We build brands that break through the noise.</h1>
|
||||
<p style="color:#64748b;font-size:18px;line-height:1.7;margin-bottom:36px;font-family:Inter,sans-serif;">Apex Digital is a full-service creative agency specializing in strategy, design, and technology. We help ambitious companies create meaningful digital experiences.</p>
|
||||
<div style="display:flex;gap:16px;flex-wrap:wrap;">
|
||||
<a href="#contact" style="display:inline-block;padding:16px 36px;background:#0ea5e9;color:#fff;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">Start a Project</a>
|
||||
<a href="#work" style="display:inline-block;padding:16px 36px;background:#fff;color:#0f172a;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;">See Our Work</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:340px;">
|
||||
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=700&h=500&fit=crop" style="width:100%;border-radius:16px;display:block;box-shadow:0 20px 60px rgba(0,0,0,0.1);" alt="Team collaboration">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats -->
|
||||
<section style="padding:60px 20px;background:#0f172a;">
|
||||
<div style="max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:60px;text-align:center;">
|
||||
<div>
|
||||
<div style="font-size:48px;font-weight:800;color:#0ea5e9;font-family:Inter,sans-serif;">200+</div>
|
||||
<div style="font-size:15px;color:#94a3b8;font-family:Inter,sans-serif;margin-top:4px;">Projects Delivered</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:48px;font-weight:800;color:#0ea5e9;font-family:Inter,sans-serif;">50+</div>
|
||||
<div style="font-size:15px;color:#94a3b8;font-family:Inter,sans-serif;margin-top:4px;">Team Members</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:48px;font-weight:800;color:#0ea5e9;font-family:Inter,sans-serif;">12</div>
|
||||
<div style="font-size:15px;color:#94a3b8;font-family:Inter,sans-serif;margin-top:4px;">Years in Business</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:48px;font-weight:800;color:#0ea5e9;font-family:Inter,sans-serif;">98%</div>
|
||||
<div style="font-size:15px;color:#94a3b8;font-family:Inter,sans-serif;margin-top:4px;">Client Satisfaction</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="services" style="padding:100px 20px;background:#fff;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<h2 style="font-size:14px;font-weight:600;color:#0ea5e9;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">What We Do</h2>
|
||||
<h3 style="font-size:42px;font-weight:800;color:#0f172a;font-family:Inter,sans-serif;letter-spacing:-0.5px;">Services tailored to your goals</h3>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;">
|
||||
<div style="flex:1;min-width:280px;max-width:380px;padding:40px;background:#f8fafc;border-radius:16px;border:1px solid #e2e8f0;">
|
||||
<div style="font-size:36px;margin-bottom:20px;">🎨</div>
|
||||
<h3 style="font-size:22px;font-weight:700;margin-bottom:12px;color:#0f172a;font-family:Inter,sans-serif;">Brand Strategy & Identity</h3>
|
||||
<p style="color:#64748b;line-height:1.7;font-family:Inter,sans-serif;">From market research to visual identity, we create brands that resonate with your target audience and stand the test of time.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:380px;padding:40px;background:#f8fafc;border-radius:16px;border:1px solid #e2e8f0;">
|
||||
<div style="font-size:36px;margin-bottom:20px;">💻</div>
|
||||
<h3 style="font-size:22px;font-weight:700;margin-bottom:12px;color:#0f172a;font-family:Inter,sans-serif;">Web Design & Development</h3>
|
||||
<p style="color:#64748b;line-height:1.7;font-family:Inter,sans-serif;">Custom websites and web applications built with modern technologies. Fast, accessible, and optimized for conversion.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:380px;padding:40px;background:#f8fafc;border-radius:16px;border:1px solid #e2e8f0;">
|
||||
<div style="font-size:36px;margin-bottom:20px;">📱</div>
|
||||
<h3 style="font-size:22px;font-weight:700;margin-bottom:12px;color:#0f172a;font-family:Inter,sans-serif;">Digital Marketing</h3>
|
||||
<p style="color:#64748b;line-height:1.7;font-family:Inter,sans-serif;">Data-driven marketing strategies that drive real results. SEO, content marketing, paid media, and social management.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Case Studies -->
|
||||
<section id="work" style="padding:100px 20px;background:#f8fafc;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<h2 style="font-size:14px;font-weight:600;color:#0ea5e9;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Case Studies</h2>
|
||||
<h3 style="font-size:42px;font-weight:800;color:#0f172a;font-family:Inter,sans-serif;">Recent projects</h3>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
|
||||
<div style="flex:1;min-width:340px;max-width:580px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,0.06);">
|
||||
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=600&h=340&fit=crop" style="width:100%;height:280px;object-fit:cover;display:block;" alt="Case study">
|
||||
<div style="padding:32px;">
|
||||
<p style="color:#0ea5e9;font-size:13px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Brand & Web</p>
|
||||
<h4 style="font-size:22px;font-weight:700;color:#0f172a;margin-bottom:12px;font-family:Inter,sans-serif;">NovaTech Brand Launch</h4>
|
||||
<p style="color:#64748b;line-height:1.6;font-family:Inter,sans-serif;">Complete brand identity and website for a B2B tech startup, resulting in 3x lead generation in the first quarter.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:340px;max-width:580px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,0.06);">
|
||||
<img src="https://images.unsplash.com/photo-1556761175-4b46a572b786?w=600&h=340&fit=crop" style="width:100%;height:280px;object-fit:cover;display:block;" alt="Case study">
|
||||
<div style="padding:32px;">
|
||||
<p style="color:#0ea5e9;font-size:13px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Digital Marketing</p>
|
||||
<h4 style="font-size:22px;font-weight:700;color:#0f172a;margin-bottom:12px;font-family:Inter,sans-serif;">GreenLife E-commerce Growth</h4>
|
||||
<p style="color:#64748b;line-height:1.6;font-family:Inter,sans-serif;">SEO and paid media strategy for a sustainable products company, achieving 250% revenue growth year-over-year.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team Section -->
|
||||
<section id="team" style="padding:100px 20px;background:#fff;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<h2 style="font-size:14px;font-weight:600;color:#0ea5e9;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Our Team</h2>
|
||||
<h3 style="font-size:42px;font-weight:800;color:#0f172a;font-family:Inter,sans-serif;">The people behind the work</h3>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
|
||||
<div style="text-align:center;width:250px;">
|
||||
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300&h=300&fit=crop" style="width:180px;height:180px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 20px;" alt="Team member">
|
||||
<h4 style="font-size:18px;font-weight:700;color:#0f172a;margin-bottom:4px;font-family:Inter,sans-serif;">Emily Carter</h4>
|
||||
<p style="color:#0ea5e9;font-size:14px;font-family:Inter,sans-serif;">Creative Director</p>
|
||||
</div>
|
||||
<div style="text-align:center;width:250px;">
|
||||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop" style="width:180px;height:180px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 20px;" alt="Team member">
|
||||
<h4 style="font-size:18px;font-weight:700;color:#0f172a;margin-bottom:4px;font-family:Inter,sans-serif;">James Park</h4>
|
||||
<p style="color:#0ea5e9;font-size:14px;font-family:Inter,sans-serif;">Lead Developer</p>
|
||||
</div>
|
||||
<div style="text-align:center;width:250px;">
|
||||
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&h=300&fit=crop" style="width:180px;height:180px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 20px;" alt="Team member">
|
||||
<h4 style="font-size:18px;font-weight:700;color:#0f172a;margin-bottom:4px;font-family:Inter,sans-serif;">Sofia Reyes</h4>
|
||||
<p style="color:#0ea5e9;font-size:14px;font-family:Inter,sans-serif;">Marketing Strategist</p>
|
||||
</div>
|
||||
<div style="text-align:center;width:250px;">
|
||||
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=300&h=300&fit=crop" style="width:180px;height:180px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 20px;" alt="Team member">
|
||||
<h4 style="font-size:18px;font-weight:700;color:#0f172a;margin-bottom:4px;font-family:Inter,sans-serif;">David Kim</h4>
|
||||
<p style="color:#0ea5e9;font-size:14px;font-family:Inter,sans-serif;">UX Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section id="contact" style="padding:100px 20px;background:linear-gradient(135deg,#0ea5e9,#0369a1);text-align:center;">
|
||||
<div style="max-width:700px;margin:0 auto;">
|
||||
<h2 style="font-size:42px;font-weight:800;color:#fff;margin-bottom:20px;font-family:Inter,sans-serif;">Have a project in mind?</h2>
|
||||
<p style="font-size:18px;color:rgba(255,255,255,0.85);margin-bottom:40px;line-height:1.7;font-family:Inter,sans-serif;">We'd love to hear about your next big idea. Get in touch and let's create something extraordinary together.</p>
|
||||
<a href="mailto:hello@apexdigital.com" style="display:inline-block;padding:18px 48px;background:#fff;color:#0369a1;font-size:18px;font-weight:700;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;">hello@apexdigital.com</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="padding:40px 20px;background:#0f172a;text-align:center;">
|
||||
<p style="color:#64748b;font-size:13px;font-family:Inter,sans-serif;">© 2026 Apex Digital. All rights reserved.</p>
|
||||
</footer>
|
||||
46
templates/coming-soon.html
Normal file
46
templates/coming-soon.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!-- Coming Soon Page -->
|
||||
<section style="min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e1b4b 0%,#312e81 30%,#4c1d95 60%,#1e1b4b 100%);position:relative;overflow:hidden;padding:40px 20px;">
|
||||
<div style="position:absolute;top:-150px;right:-150px;width:500px;height:500px;background:radial-gradient(circle,rgba(139,92,246,0.2) 0%,transparent 60%);border-radius:50%;"></div>
|
||||
<div style="position:absolute;bottom:-100px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(236,72,153,0.15) 0%,transparent 60%);border-radius:50%;"></div>
|
||||
<div style="position:absolute;top:50%;left:50%;width:600px;height:600px;background:radial-gradient(circle,rgba(99,102,241,0.08) 0%,transparent 50%);border-radius:50%;transform:translate(-50%,-50%);"></div>
|
||||
|
||||
<div style="max-width:600px;text-align:center;position:relative;z-index:1;">
|
||||
<div style="font-size:28px;font-weight:800;color:#fff;margin-bottom:40px;font-family:Inter,sans-serif;letter-spacing:-0.5px;">Nova<span style="color:#a78bfa;">Labs</span></div>
|
||||
|
||||
<h1 style="font-size:56px;font-weight:900;color:#fff;margin-bottom:24px;font-family:Inter,sans-serif;line-height:1.1;letter-spacing:-1.5px;">Something amazing is brewing.</h1>
|
||||
|
||||
<p style="color:#c4b5fd;font-size:20px;line-height:1.7;margin-bottom:48px;font-family:Inter,sans-serif;">We're building something new to transform the way you work. Sign up to be the first to know when we launch.</p>
|
||||
|
||||
<!-- Email Signup -->
|
||||
<div style="display:flex;gap:12px;max-width:440px;margin:0 auto 24px;flex-wrap:wrap;justify-content:center;">
|
||||
<input type="email" placeholder="Enter your email" style="flex:1;min-width:200px;padding:16px 20px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);border-radius:10px;color:#fff;font-size:16px;font-family:Inter,sans-serif;outline:none;">
|
||||
<a href="#" style="display:inline-block;padding:16px 32px;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:16px;font-weight:600;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;white-space:nowrap;">Notify Me</a>
|
||||
</div>
|
||||
<p style="color:#7c3aed;font-size:13px;margin-bottom:60px;font-family:Inter,sans-serif;">Join 2,400+ others on the waitlist. No spam, ever.</p>
|
||||
|
||||
<!-- Features Teaser -->
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-bottom:60px;">
|
||||
<div style="padding:20px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:12px;min-width:140px;">
|
||||
<div style="font-size:24px;margin-bottom:8px;">⚡</div>
|
||||
<div style="color:#e2e8f0;font-size:14px;font-weight:500;font-family:Inter,sans-serif;">Lightning Fast</div>
|
||||
</div>
|
||||
<div style="padding:20px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:12px;min-width:140px;">
|
||||
<div style="font-size:24px;margin-bottom:8px;">🔒</div>
|
||||
<div style="color:#e2e8f0;font-size:14px;font-weight:500;font-family:Inter,sans-serif;">Secure by Default</div>
|
||||
</div>
|
||||
<div style="padding:20px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:12px;min-width:140px;">
|
||||
<div style="font-size:24px;margin-bottom:8px;">🎨</div>
|
||||
<div style="color:#e2e8f0;font-size:14px;font-weight:500;font-family:Inter,sans-serif;">Beautiful UI</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Links -->
|
||||
<div style="display:flex;justify-content:center;gap:20px;">
|
||||
<a href="#" style="color:#a78bfa;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Twitter</a>
|
||||
<a href="#" style="color:#a78bfa;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">LinkedIn</a>
|
||||
<a href="#" style="color:#a78bfa;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">GitHub</a>
|
||||
</div>
|
||||
|
||||
<p style="color:#4c1d95;font-size:12px;margin-top:40px;font-family:Inter,sans-serif;">© 2026 NovaLabs. All rights reserved.</p>
|
||||
</div>
|
||||
</section>
|
||||
179
templates/event-conference.html
Normal file
179
templates/event-conference.html
Normal file
@@ -0,0 +1,179 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background:rgba(15,23,42,0.95);position:sticky;top:0;z-index:100;">
|
||||
<div style="font-size:22px;font-weight:800;color:#fff;font-family:Inter,sans-serif;">PULSE<span style="color:#e11d48;">CON</span></div>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#speakers" style="color:#94a3b8;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Speakers</a>
|
||||
<a href="#schedule" style="color:#94a3b8;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Schedule</a>
|
||||
<a href="#venue" style="color:#94a3b8;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Venue</a>
|
||||
<a href="#tickets" style="display:inline-block;padding:10px 24px;background:#e11d48;color:#fff;font-size:14px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">Get Tickets</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section style="min-height:650px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 40%,#0f172a 100%);text-align:center;position:relative;overflow:hidden;padding:80px 20px;">
|
||||
<div style="position:absolute;top:20%;left:10%;width:300px;height:300px;background:radial-gradient(circle,rgba(225,29,72,0.12) 0%,transparent 70%);border-radius:50%;"></div>
|
||||
<div style="position:absolute;bottom:20%;right:10%;width:300px;height:300px;background:radial-gradient(circle,rgba(251,191,36,0.08) 0%,transparent 70%);border-radius:50%;"></div>
|
||||
<div style="max-width:800px;position:relative;z-index:1;">
|
||||
<div style="display:inline-block;padding:8px 20px;background:rgba(225,29,72,0.15);border:1px solid rgba(225,29,72,0.3);border-radius:50px;margin-bottom:24px;">
|
||||
<span style="color:#fb7185;font-size:14px;font-weight:600;font-family:Inter,sans-serif;">🗓️ September 15-17, 2026 · San Francisco</span>
|
||||
</div>
|
||||
<h1 style="font-size:64px;font-weight:900;color:#fff;margin-bottom:24px;font-family:Inter,sans-serif;line-height:1.05;letter-spacing:-2px;">The Future of <span style="background:linear-gradient(135deg,#e11d48,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">Technology</span></h1>
|
||||
<p style="color:#94a3b8;font-size:20px;line-height:1.7;margin-bottom:40px;font-family:Inter,sans-serif;">3 days. 50+ speakers. 2,000 attendees. Join the most forward-thinking minds in tech for talks, workshops, and connections that matter.</p>
|
||||
<div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
|
||||
<a href="#tickets" style="display:inline-block;padding:18px 44px;background:#e11d48;color:#fff;font-size:17px;font-weight:700;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;box-shadow:0 4px 20px rgba(225,29,72,0.4);">Get Early Bird Tickets</a>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:center;gap:48px;margin-top:48px;flex-wrap:wrap;">
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:40px;font-weight:800;color:#fbbf24;font-family:Inter,sans-serif;">50+</div>
|
||||
<div style="font-size:14px;color:#94a3b8;font-family:Inter,sans-serif;">Speakers</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:40px;font-weight:800;color:#fbbf24;font-family:Inter,sans-serif;">30+</div>
|
||||
<div style="font-size:14px;color:#94a3b8;font-family:Inter,sans-serif;">Workshops</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:40px;font-weight:800;color:#fbbf24;font-family:Inter,sans-serif;">3</div>
|
||||
<div style="font-size:14px;color:#94a3b8;font-family:Inter,sans-serif;">Days</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Speakers -->
|
||||
<section id="speakers" style="padding:100px 20px;background:#0f172a;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<h2 style="font-size:14px;font-weight:600;color:#e11d48;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Featured Speakers</h2>
|
||||
<h3 style="font-size:42px;font-weight:800;color:#fff;font-family:Inter,sans-serif;">Learn from the best</h3>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;">
|
||||
<div style="width:260px;text-align:center;padding:32px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:16px;">
|
||||
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=200&h=200&fit=crop" style="width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 16px;display:block;" alt="Speaker">
|
||||
<h4 style="font-size:18px;font-weight:700;color:#fff;margin-bottom:4px;font-family:Inter,sans-serif;">Dr. Maya Chen</h4>
|
||||
<p style="color:#e11d48;font-size:13px;font-weight:500;margin-bottom:8px;font-family:Inter,sans-serif;">AI Research Lead, DeepMind</p>
|
||||
<p style="color:#64748b;font-size:13px;font-family:Inter,sans-serif;">The Next Frontier of AI Safety</p>
|
||||
</div>
|
||||
<div style="width:260px;text-align:center;padding:32px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:16px;">
|
||||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop" style="width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 16px;display:block;" alt="Speaker">
|
||||
<h4 style="font-size:18px;font-weight:700;color:#fff;margin-bottom:4px;font-family:Inter,sans-serif;">Marcus Johnson</h4>
|
||||
<p style="color:#e11d48;font-size:13px;font-weight:500;margin-bottom:8px;font-family:Inter,sans-serif;">CTO, SpaceIO</p>
|
||||
<p style="color:#64748b;font-size:13px;font-family:Inter,sans-serif;">Scaling Infrastructure to Mars</p>
|
||||
</div>
|
||||
<div style="width:260px;text-align:center;padding:32px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:16px;">
|
||||
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop" style="width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 16px;display:block;" alt="Speaker">
|
||||
<h4 style="font-size:18px;font-weight:700;color:#fff;margin-bottom:4px;font-family:Inter,sans-serif;">Sarah Williams</h4>
|
||||
<p style="color:#e11d48;font-size:13px;font-weight:500;margin-bottom:8px;font-family:Inter,sans-serif;">Founder, CryptoVault</p>
|
||||
<p style="color:#64748b;font-size:13px;font-family:Inter,sans-serif;">Web3 Beyond the Hype</p>
|
||||
</div>
|
||||
<div style="width:260px;text-align:center;padding:32px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:16px;">
|
||||
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop" style="width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 16px;display:block;" alt="Speaker">
|
||||
<h4 style="font-size:18px;font-weight:700;color:#fff;margin-bottom:4px;font-family:Inter,sans-serif;">James Park</h4>
|
||||
<p style="color:#e11d48;font-size:13px;font-weight:500;margin-bottom:8px;font-family:Inter,sans-serif;">VP Design, Figma</p>
|
||||
<p style="color:#64748b;font-size:13px;font-family:Inter,sans-serif;">Design at Scale</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Schedule -->
|
||||
<section id="schedule" style="padding:100px 20px;background:#0a0618;">
|
||||
<div style="max-width:900px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<h2 style="font-size:14px;font-weight:600;color:#fbbf24;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Schedule</h2>
|
||||
<h3 style="font-size:42px;font-weight:800;color:#fff;font-family:Inter,sans-serif;">Day 1 Highlights</h3>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:2px;">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding:24px 28px;background:rgba(255,255,255,0.03);border-radius:12px;">
|
||||
<span style="color:#fbbf24;font-size:15px;font-weight:600;min-width:80px;font-family:Inter,sans-serif;">9:00 AM</span>
|
||||
<div style="flex:1;min-width:200px;">
|
||||
<h4 style="font-size:17px;font-weight:600;color:#fff;font-family:Inter,sans-serif;">Opening Keynote</h4>
|
||||
<p style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;">Dr. Maya Chen · Main Stage</p>
|
||||
</div>
|
||||
<span style="padding:6px 14px;background:rgba(225,29,72,0.1);color:#fb7185;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">Keynote</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding:24px 28px;background:rgba(255,255,255,0.03);border-radius:12px;">
|
||||
<span style="color:#fbbf24;font-size:15px;font-weight:600;min-width:80px;font-family:Inter,sans-serif;">10:30 AM</span>
|
||||
<div style="flex:1;min-width:200px;">
|
||||
<h4 style="font-size:17px;font-weight:600;color:#fff;font-family:Inter,sans-serif;">Building for the Edge</h4>
|
||||
<p style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;">Marcus Johnson · Room A</p>
|
||||
</div>
|
||||
<span style="padding:6px 14px;background:rgba(251,191,36,0.1);color:#fbbf24;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">Talk</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding:24px 28px;background:rgba(255,255,255,0.03);border-radius:12px;">
|
||||
<span style="color:#fbbf24;font-size:15px;font-weight:600;min-width:80px;font-family:Inter,sans-serif;">1:00 PM</span>
|
||||
<div style="flex:1;min-width:200px;">
|
||||
<h4 style="font-size:17px;font-weight:600;color:#fff;font-family:Inter,sans-serif;">Hands-on: AI Prototyping</h4>
|
||||
<p style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;">Workshop · Lab 1</p>
|
||||
</div>
|
||||
<span style="padding:6px 14px;background:rgba(6,182,212,0.1);color:#22d3ee;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">Workshop</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding:24px 28px;background:rgba(255,255,255,0.03);border-radius:12px;">
|
||||
<span style="color:#fbbf24;font-size:15px;font-weight:600;min-width:80px;font-family:Inter,sans-serif;">4:00 PM</span>
|
||||
<div style="flex:1;min-width:200px;">
|
||||
<h4 style="font-size:17px;font-weight:600;color:#fff;font-family:Inter,sans-serif;">Panel: Future of Work</h4>
|
||||
<p style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;">Multiple speakers · Main Stage</p>
|
||||
</div>
|
||||
<span style="padding:6px 14px;background:rgba(139,92,246,0.1);color:#a78bfa;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">Panel</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding:24px 28px;background:rgba(255,255,255,0.03);border-radius:12px;">
|
||||
<span style="color:#fbbf24;font-size:15px;font-weight:600;min-width:80px;font-family:Inter,sans-serif;">7:00 PM</span>
|
||||
<div style="flex:1;min-width:200px;">
|
||||
<h4 style="font-size:17px;font-weight:600;color:#fff;font-family:Inter,sans-serif;">Networking Reception</h4>
|
||||
<p style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;">Rooftop Terrace · Drinks & Appetizers</p>
|
||||
</div>
|
||||
<span style="padding:6px 14px;background:rgba(16,185,129,0.1);color:#34d399;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">Social</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Venue -->
|
||||
<section id="venue" style="padding:80px 20px;background:#0f172a;">
|
||||
<div style="max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;align-items:center;">
|
||||
<div style="flex:1;min-width:300px;">
|
||||
<img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=600&h=400&fit=crop" style="width:100%;border-radius:16px;display:block;" alt="Conference venue">
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;">
|
||||
<h2 style="font-size:14px;font-weight:600;color:#fbbf24;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Venue</h2>
|
||||
<h3 style="font-size:32px;font-weight:800;color:#fff;margin-bottom:16px;font-family:Inter,sans-serif;">Moscone Center</h3>
|
||||
<p style="color:#94a3b8;font-size:16px;line-height:1.7;margin-bottom:24px;font-family:Inter,sans-serif;">747 Howard Street, San Francisco, CA 94103. Located in the heart of SOMA, with easy access to public transit, hotels, and restaurants.</p>
|
||||
<div style="display:flex;flex-direction:column;gap:12px;">
|
||||
<div style="display:flex;gap:10px;align-items:center;color:#e2e8f0;font-size:15px;font-family:Inter,sans-serif;">
|
||||
<span>🚇</span> BART: Powell St Station (5 min walk)
|
||||
</div>
|
||||
<div style="display:flex;gap:10px;align-items:center;color:#e2e8f0;font-size:15px;font-family:Inter,sans-serif;">
|
||||
<span>🏨</span> Partner hotels from $189/night
|
||||
</div>
|
||||
<div style="display:flex;gap:10px;align-items:center;color:#e2e8f0;font-size:15px;font-family:Inter,sans-serif;">
|
||||
<span>✈️</span> SFO Airport: 20 min by BART
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tickets CTA -->
|
||||
<section id="tickets" style="padding:100px 20px;background:linear-gradient(135deg,#e11d48,#be185d);text-align:center;">
|
||||
<div style="max-width:700px;margin:0 auto;">
|
||||
<h2 style="font-size:42px;font-weight:900;color:#fff;margin-bottom:16px;font-family:Inter,sans-serif;">Don't miss out</h2>
|
||||
<p style="font-size:18px;color:rgba(255,255,255,0.85);margin-bottom:16px;font-family:Inter,sans-serif;">Early bird pricing ends August 1st.</p>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-bottom:40px;">
|
||||
<div style="padding:28px;background:rgba(255,255,255,0.1);border-radius:16px;min-width:200px;">
|
||||
<div style="font-size:14px;color:rgba(255,255,255,0.7);margin-bottom:8px;font-family:Inter,sans-serif;">General Admission</div>
|
||||
<div style="font-size:36px;font-weight:800;color:#fff;font-family:Inter,sans-serif;">$399</div>
|
||||
<div style="font-size:13px;color:rgba(255,255,255,0.5);text-decoration:line-through;font-family:Inter,sans-serif;">$599 regular</div>
|
||||
</div>
|
||||
<div style="padding:28px;background:rgba(255,255,255,0.15);border-radius:16px;min-width:200px;border:1px solid rgba(255,255,255,0.2);">
|
||||
<div style="font-size:14px;color:#fbbf24;margin-bottom:8px;font-family:Inter,sans-serif;">VIP Pass</div>
|
||||
<div style="font-size:36px;font-weight:800;color:#fff;font-family:Inter,sans-serif;">$799</div>
|
||||
<div style="font-size:13px;color:rgba(255,255,255,0.5);text-decoration:line-through;font-family:Inter,sans-serif;">$1,199 regular</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" style="display:inline-block;padding:18px 48px;background:#fff;color:#e11d48;font-size:18px;font-weight:700;text-decoration:none;border-radius:12px;font-family:Inter,sans-serif;">Get Your Ticket Now</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="padding:40px 20px;background:#0f172a;text-align:center;">
|
||||
<p style="color:#64748b;font-size:13px;font-family:Inter,sans-serif;">© 2026 PulseCon. All rights reserved.</p>
|
||||
</footer>
|
||||
82
templates/index.json
Normal file
82
templates/index.json
Normal file
@@ -0,0 +1,82 @@
|
||||
[
|
||||
{
|
||||
"id": "landing-saas",
|
||||
"name": "SaaS Landing Page",
|
||||
"description": "Modern landing page for software products with gradient hero, feature grid, pricing, and testimonials.",
|
||||
"category": "Business",
|
||||
"tags": ["modern", "professional", "gradient", "saas"],
|
||||
"useCase": "Software products, SaaS startups, digital services",
|
||||
"file": "landing-saas.html",
|
||||
"colors": ["#6366f1", "#8b5cf6", "#1e1b4b"]
|
||||
},
|
||||
{
|
||||
"id": "portfolio-designer",
|
||||
"name": "Creative Portfolio",
|
||||
"description": "Stunning portfolio for designers and developers with project showcases, about section, and contact form.",
|
||||
"category": "Portfolio",
|
||||
"tags": ["creative", "minimal", "dark", "portfolio"],
|
||||
"useCase": "Designers, developers, photographers, freelancers",
|
||||
"file": "portfolio-designer.html",
|
||||
"colors": ["#f97316", "#1c1917", "#fafaf9"]
|
||||
},
|
||||
{
|
||||
"id": "business-agency",
|
||||
"name": "Agency Homepage",
|
||||
"description": "Professional agency website with services, case studies, team section, and client logos.",
|
||||
"category": "Business",
|
||||
"tags": ["professional", "corporate", "clean", "agency"],
|
||||
"useCase": "Consulting firms, marketing agencies, professional services",
|
||||
"file": "business-agency.html",
|
||||
"colors": ["#0ea5e9", "#0f172a", "#f8fafc"]
|
||||
},
|
||||
{
|
||||
"id": "restaurant-cafe",
|
||||
"name": "Restaurant & Cafe",
|
||||
"description": "Elegant restaurant page with menu highlights, ambiance photos, reservation CTA, and location info.",
|
||||
"category": "Business",
|
||||
"tags": ["elegant", "warm", "food", "restaurant"],
|
||||
"useCase": "Restaurants, cafes, bars, bakeries, food businesses",
|
||||
"file": "restaurant-cafe.html",
|
||||
"colors": ["#b45309", "#1c1917", "#fef3c7"]
|
||||
},
|
||||
{
|
||||
"id": "resume-cv",
|
||||
"name": "Personal Resume",
|
||||
"description": "Clean, professional resume/CV page with skills, experience timeline, education, and contact details.",
|
||||
"category": "Personal",
|
||||
"tags": ["minimal", "professional", "resume", "personal"],
|
||||
"useCase": "Job seekers, professionals, freelancers",
|
||||
"file": "resume-cv.html",
|
||||
"colors": ["#2563eb", "#1e293b", "#f1f5f9"]
|
||||
},
|
||||
{
|
||||
"id": "app-showcase",
|
||||
"name": "App Showcase",
|
||||
"description": "Mobile app landing page with device mockups, feature highlights, download buttons, and app screenshots.",
|
||||
"category": "Business",
|
||||
"tags": ["modern", "colorful", "app", "mobile"],
|
||||
"useCase": "Mobile apps, app launches, app marketing",
|
||||
"file": "app-showcase.html",
|
||||
"colors": ["#06b6d4", "#7c3aed", "#0f172a"]
|
||||
},
|
||||
{
|
||||
"id": "event-conference",
|
||||
"name": "Event & Conference",
|
||||
"description": "Event landing page with countdown feel, speaker lineup, schedule, venue info, and ticket CTA.",
|
||||
"category": "Business",
|
||||
"tags": ["bold", "modern", "event", "conference"],
|
||||
"useCase": "Conferences, workshops, meetups, webinars",
|
||||
"file": "event-conference.html",
|
||||
"colors": ["#e11d48", "#fbbf24", "#0f172a"]
|
||||
},
|
||||
{
|
||||
"id": "coming-soon",
|
||||
"name": "Coming Soon",
|
||||
"description": "Beautiful coming soon page with email signup, countdown placeholder, and social links.",
|
||||
"category": "Personal",
|
||||
"tags": ["minimal", "gradient", "launch", "coming-soon"],
|
||||
"useCase": "Product launches, under construction, pre-launch",
|
||||
"file": "coming-soon.html",
|
||||
"colors": ["#8b5cf6", "#ec4899", "#1e1b4b"]
|
||||
}
|
||||
]
|
||||
245
templates/landing-saas.html
Normal file
245
templates/landing-saas.html
Normal file
@@ -0,0 +1,245 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background:#0f0a1e;position:sticky;top:0;z-index:100;">
|
||||
<div style="font-size:24px;font-weight:700;color:#fff;font-family:Inter,sans-serif;">Velocity<span style="color:#818cf8;">.</span></div>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#features" style="color:#a5b4fc;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Features</a>
|
||||
<a href="#pricing" style="color:#a5b4fc;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Pricing</a>
|
||||
<a href="#testimonials" style="color:#a5b4fc;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Testimonials</a>
|
||||
<a href="#" style="display:inline-block;padding:10px 24px;background:#6366f1;color:#fff;font-size:14px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">Start Free Trial</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section style="min-height:600px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f0a1e 0%,#1e1b4b 50%,#312e81 100%);padding:80px 20px;text-align:center;position:relative;overflow:hidden;">
|
||||
<div style="position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(99,102,241,0.15) 0%,transparent 70%);border-radius:50%;"></div>
|
||||
<div style="position:absolute;bottom:-100px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(139,92,246,0.1) 0%,transparent 70%);border-radius:50%;"></div>
|
||||
<div style="max-width:800px;position:relative;z-index:1;">
|
||||
<div style="display:inline-block;padding:8px 20px;background:rgba(99,102,241,0.15);border:1px solid rgba(99,102,241,0.3);border-radius:50px;margin-bottom:24px;">
|
||||
<span style="color:#a5b4fc;font-size:14px;font-weight:500;font-family:Inter,sans-serif;">🚀 Now in public beta — Try it free</span>
|
||||
</div>
|
||||
<h1 style="color:#fff;font-size:56px;font-weight:800;margin-bottom:24px;font-family:Inter,sans-serif;line-height:1.1;letter-spacing:-1px;">Ship products faster with smarter workflows</h1>
|
||||
<p style="color:#c7d2fe;font-size:20px;line-height:1.7;margin-bottom:40px;font-family:Inter,sans-serif;max-width:600px;margin-left:auto;margin-right:auto;">Velocity streamlines your entire development pipeline. From idea to production in half the time, with real-time collaboration built in.</p>
|
||||
<div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
|
||||
<a href="#" style="display:inline-block;padding:16px 40px;background:#6366f1;color:#fff;font-size:17px;font-weight:600;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;box-shadow:0 4px 20px rgba(99,102,241,0.4);">Get Started Free</a>
|
||||
<a href="#" style="display:inline-block;padding:16px 40px;background:rgba(255,255,255,0.08);color:#fff;font-size:17px;font-weight:600;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;border:1px solid rgba(255,255,255,0.15);">Watch Demo ▶</a>
|
||||
</div>
|
||||
<p style="color:#6366f1;font-size:13px;margin-top:16px;font-family:Inter,sans-serif;">No credit card required · Free 14-day trial</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Logo Bar -->
|
||||
<section style="padding:50px 20px;background:#0f0a1e;border-top:1px solid rgba(99,102,241,0.1);border-bottom:1px solid rgba(99,102,241,0.1);">
|
||||
<div style="max-width:1000px;margin:0 auto;text-align:center;">
|
||||
<p style="color:#6b7280;font-size:14px;font-weight:500;margin-bottom:30px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Trusted by teams at</p>
|
||||
<div style="display:flex;justify-content:center;align-items:center;gap:60px;flex-wrap:wrap;opacity:0.5;">
|
||||
<span style="color:#fff;font-size:22px;font-weight:700;font-family:Inter,sans-serif;">Stripe</span>
|
||||
<span style="color:#fff;font-size:22px;font-weight:700;font-family:Inter,sans-serif;">Vercel</span>
|
||||
<span style="color:#fff;font-size:22px;font-weight:700;font-family:Inter,sans-serif;">Linear</span>
|
||||
<span style="color:#fff;font-size:22px;font-weight:700;font-family:Inter,sans-serif;">Notion</span>
|
||||
<span style="color:#fff;font-size:22px;font-weight:700;font-family:Inter,sans-serif;">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" style="padding:100px 20px;background:#0a0618;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<h2 style="font-size:42px;font-weight:800;color:#fff;margin-bottom:16px;font-family:Inter,sans-serif;letter-spacing:-0.5px;">Everything you need to ship</h2>
|
||||
<p style="font-size:18px;color:#a5b4fc;max-width:500px;margin:0 auto;font-family:Inter,sans-serif;">Powerful tools that work together seamlessly to accelerate your workflow.</p>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;">
|
||||
<div style="flex:1;min-width:300px;max-width:380px;padding:36px;background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.05));border:1px solid rgba(99,102,241,0.15);border-radius:16px;">
|
||||
<div style="width:48px;height:48px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:12px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;font-size:22px;">⚡</div>
|
||||
<h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#fff;font-family:Inter,sans-serif;">Lightning Fast Deploys</h3>
|
||||
<p style="color:#94a3b8;line-height:1.7;font-family:Inter,sans-serif;">Push to production in seconds with zero-downtime deployments. Automatic rollbacks if something goes wrong.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;max-width:380px;padding:36px;background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.05));border:1px solid rgba(99,102,241,0.15);border-radius:16px;">
|
||||
<div style="width:48px;height:48px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:12px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;font-size:22px;">🔄</div>
|
||||
<h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#fff;font-family:Inter,sans-serif;">Real-time Collaboration</h3>
|
||||
<p style="color:#94a3b8;line-height:1.7;font-family:Inter,sans-serif;">Work together in real-time with your team. See changes instantly, leave comments, and resolve issues faster.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;max-width:380px;padding:36px;background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.05));border:1px solid rgba(99,102,241,0.15);border-radius:16px;">
|
||||
<div style="width:48px;height:48px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:12px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;font-size:22px;">📊</div>
|
||||
<h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#fff;font-family:Inter,sans-serif;">Advanced Analytics</h3>
|
||||
<p style="color:#94a3b8;line-height:1.7;font-family:Inter,sans-serif;">Deep insights into your deployment pipeline. Track build times, error rates, and performance metrics at a glance.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;max-width:380px;padding:36px;background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.05));border:1px solid rgba(99,102,241,0.15);border-radius:16px;">
|
||||
<div style="width:48px;height:48px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:12px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;font-size:22px;">🔒</div>
|
||||
<h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#fff;font-family:Inter,sans-serif;">Enterprise Security</h3>
|
||||
<p style="color:#94a3b8;line-height:1.7;font-family:Inter,sans-serif;">SOC 2 compliant with end-to-end encryption. Role-based access controls and audit logs for every action.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;max-width:380px;padding:36px;background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.05));border:1px solid rgba(99,102,241,0.15);border-radius:16px;">
|
||||
<div style="width:48px;height:48px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:12px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;font-size:22px;">🔌</div>
|
||||
<h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#fff;font-family:Inter,sans-serif;">100+ Integrations</h3>
|
||||
<p style="color:#94a3b8;line-height:1.7;font-family:Inter,sans-serif;">Connect with your favorite tools — GitHub, Slack, Jira, and more. Set up in minutes, not days.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;max-width:380px;padding:36px;background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.05));border:1px solid rgba(99,102,241,0.15);border-radius:16px;">
|
||||
<div style="width:48px;height:48px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:12px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;font-size:22px;">🌍</div>
|
||||
<h3 style="font-size:20px;font-weight:700;margin-bottom:12px;color:#fff;font-family:Inter,sans-serif;">Global Edge Network</h3>
|
||||
<p style="color:#94a3b8;line-height:1.7;font-family:Inter,sans-serif;">Deploy to 30+ edge locations worldwide. Your users get blazing-fast load times no matter where they are.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing Section -->
|
||||
<section id="pricing" style="padding:100px 20px;background:#0f0a1e;">
|
||||
<div style="max-width:1100px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<h2 style="font-size:42px;font-weight:800;color:#fff;margin-bottom:16px;font-family:Inter,sans-serif;">Simple, transparent pricing</h2>
|
||||
<p style="font-size:18px;color:#a5b4fc;font-family:Inter,sans-serif;">No hidden fees. Cancel anytime.</p>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:stretch;">
|
||||
<div style="flex:1;min-width:280px;max-width:340px;padding:40px 32px;background:rgba(255,255,255,0.03);border:1px solid rgba(99,102,241,0.15);border-radius:20px;text-align:center;">
|
||||
<h3 style="font-size:22px;font-weight:600;margin-bottom:8px;color:#fff;font-family:Inter,sans-serif;">Starter</h3>
|
||||
<p style="font-size:14px;color:#94a3b8;margin-bottom:24px;font-family:Inter,sans-serif;">For side projects</p>
|
||||
<div style="margin-bottom:32px;">
|
||||
<span style="font-size:52px;font-weight:800;color:#fff;font-family:Inter,sans-serif;">$0</span>
|
||||
<span style="font-size:16px;color:#94a3b8;font-family:Inter,sans-serif;">/month</span>
|
||||
</div>
|
||||
<ul style="list-style:none;padding:0;margin:0 0 32px 0;text-align:left;">
|
||||
<li style="padding:10px 0;color:#c7d2fe;font-family:Inter,sans-serif;font-size:15px;">✓ 3 projects</li>
|
||||
<li style="padding:10px 0;color:#c7d2fe;font-family:Inter,sans-serif;font-size:15px;">✓ 1 GB storage</li>
|
||||
<li style="padding:10px 0;color:#c7d2fe;font-family:Inter,sans-serif;font-size:15px;">✓ Community support</li>
|
||||
<li style="padding:10px 0;color:#c7d2fe;font-family:Inter,sans-serif;font-size:15px;">✓ Basic analytics</li>
|
||||
</ul>
|
||||
<a href="#" style="display:block;padding:14px;background:transparent;color:#a5b4fc;font-size:16px;font-weight:600;text-decoration:none;border-radius:10px;border:1px solid rgba(99,102,241,0.3);font-family:Inter,sans-serif;">Get Started</a>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:340px;padding:40px 32px;background:linear-gradient(135deg,#6366f1,#7c3aed);border-radius:20px;text-align:center;transform:scale(1.05);box-shadow:0 20px 60px rgba(99,102,241,0.3);">
|
||||
<div style="background:rgba(255,255,255,0.2);color:#fff;font-size:12px;font-weight:700;padding:6px 16px;border-radius:20px;display:inline-block;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Most Popular</div>
|
||||
<h3 style="font-size:22px;font-weight:600;margin-bottom:8px;color:#fff;font-family:Inter,sans-serif;">Pro</h3>
|
||||
<p style="font-size:14px;color:rgba(255,255,255,0.7);margin-bottom:24px;font-family:Inter,sans-serif;">For growing teams</p>
|
||||
<div style="margin-bottom:32px;">
|
||||
<span style="font-size:52px;font-weight:800;color:#fff;font-family:Inter,sans-serif;">$29</span>
|
||||
<span style="font-size:16px;color:rgba(255,255,255,0.7);font-family:Inter,sans-serif;">/month</span>
|
||||
</div>
|
||||
<ul style="list-style:none;padding:0;margin:0 0 32px 0;text-align:left;">
|
||||
<li style="padding:10px 0;color:#fff;font-family:Inter,sans-serif;font-size:15px;">✓ Unlimited projects</li>
|
||||
<li style="padding:10px 0;color:#fff;font-family:Inter,sans-serif;font-size:15px;">✓ 100 GB storage</li>
|
||||
<li style="padding:10px 0;color:#fff;font-family:Inter,sans-serif;font-size:15px;">✓ Priority support</li>
|
||||
<li style="padding:10px 0;color:#fff;font-family:Inter,sans-serif;font-size:15px;">✓ Advanced analytics</li>
|
||||
<li style="padding:10px 0;color:#fff;font-family:Inter,sans-serif;font-size:15px;">✓ Custom domains</li>
|
||||
</ul>
|
||||
<a href="#" style="display:block;padding:14px;background:#fff;color:#6366f1;font-size:16px;font-weight:700;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;">Start Free Trial</a>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:340px;padding:40px 32px;background:rgba(255,255,255,0.03);border:1px solid rgba(99,102,241,0.15);border-radius:20px;text-align:center;">
|
||||
<h3 style="font-size:22px;font-weight:600;margin-bottom:8px;color:#fff;font-family:Inter,sans-serif;">Enterprise</h3>
|
||||
<p style="font-size:14px;color:#94a3b8;margin-bottom:24px;font-family:Inter,sans-serif;">For large organizations</p>
|
||||
<div style="margin-bottom:32px;">
|
||||
<span style="font-size:52px;font-weight:800;color:#fff;font-family:Inter,sans-serif;">$99</span>
|
||||
<span style="font-size:16px;color:#94a3b8;font-family:Inter,sans-serif;">/month</span>
|
||||
</div>
|
||||
<ul style="list-style:none;padding:0;margin:0 0 32px 0;text-align:left;">
|
||||
<li style="padding:10px 0;color:#c7d2fe;font-family:Inter,sans-serif;font-size:15px;">✓ Everything in Pro</li>
|
||||
<li style="padding:10px 0;color:#c7d2fe;font-family:Inter,sans-serif;font-size:15px;">✓ Unlimited storage</li>
|
||||
<li style="padding:10px 0;color:#c7d2fe;font-family:Inter,sans-serif;font-size:15px;">✓ Dedicated support</li>
|
||||
<li style="padding:10px 0;color:#c7d2fe;font-family:Inter,sans-serif;font-size:15px;">✓ SSO & SAML</li>
|
||||
<li style="padding:10px 0;color:#c7d2fe;font-family:Inter,sans-serif;font-size:15px;">✓ SLA guarantee</li>
|
||||
</ul>
|
||||
<a href="#" style="display:block;padding:14px;background:transparent;color:#a5b4fc;font-size:16px;font-weight:600;text-decoration:none;border-radius:10px;border:1px solid rgba(99,102,241,0.3);font-family:Inter,sans-serif;">Contact Sales</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section id="testimonials" style="padding:100px 20px;background:#0a0618;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<h2 style="font-size:42px;font-weight:800;color:#fff;margin-bottom:16px;font-family:Inter,sans-serif;">Loved by developers</h2>
|
||||
<p style="font-size:18px;color:#a5b4fc;font-family:Inter,sans-serif;">See what our users have to say</p>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;">
|
||||
<div style="flex:1;min-width:300px;max-width:380px;padding:32px;background:rgba(255,255,255,0.03);border:1px solid rgba(99,102,241,0.1);border-radius:16px;">
|
||||
<div style="display:flex;gap:4px;margin-bottom:16px;">
|
||||
<span style="color:#fbbf24;font-size:18px;">★★★★★</span>
|
||||
</div>
|
||||
<p style="color:#e2e8f0;line-height:1.7;font-size:16px;margin-bottom:24px;font-family:Inter,sans-serif;">"Velocity cut our deployment time by 80%. What used to take hours now takes minutes. The real-time collaboration is a game changer for remote teams."</p>
|
||||
<div style="display:flex;align-items:center;gap:12px;">
|
||||
<div style="width:44px;height:44px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;font-family:Inter,sans-serif;">SR</div>
|
||||
<div>
|
||||
<div style="font-weight:600;color:#fff;font-family:Inter,sans-serif;font-size:15px;">Sarah Rodriguez</div>
|
||||
<div style="font-size:13px;color:#94a3b8;font-family:Inter,sans-serif;">CTO, TechFlow</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;max-width:380px;padding:32px;background:rgba(255,255,255,0.03);border:1px solid rgba(99,102,241,0.1);border-radius:16px;">
|
||||
<div style="display:flex;gap:4px;margin-bottom:16px;">
|
||||
<span style="color:#fbbf24;font-size:18px;">★★★★★</span>
|
||||
</div>
|
||||
<p style="color:#e2e8f0;line-height:1.7;font-size:16px;margin-bottom:24px;font-family:Inter,sans-serif;">"We evaluated every CI/CD tool on the market. Velocity won hands down — the developer experience is unmatched. Our team adopted it in a single day."</p>
|
||||
<div style="display:flex;align-items:center;gap:12px;">
|
||||
<div style="width:44px;height:44px;background:linear-gradient(135deg,#06b6d4,#3b82f6);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;font-family:Inter,sans-serif;">AK</div>
|
||||
<div>
|
||||
<div style="font-weight:600;color:#fff;font-family:Inter,sans-serif;font-size:15px;">Alex Kim</div>
|
||||
<div style="font-size:13px;color:#94a3b8;font-family:Inter,sans-serif;">Lead Engineer, ScaleUp</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;max-width:380px;padding:32px;background:rgba(255,255,255,0.03);border:1px solid rgba(99,102,241,0.1);border-radius:16px;">
|
||||
<div style="display:flex;gap:4px;margin-bottom:16px;">
|
||||
<span style="color:#fbbf24;font-size:18px;">★★★★★</span>
|
||||
</div>
|
||||
<p style="color:#e2e8f0;line-height:1.7;font-size:16px;margin-bottom:24px;font-family:Inter,sans-serif;">"The analytics dashboard alone is worth the price. We finally have visibility into our entire deployment pipeline. Customer support has been incredible too."</p>
|
||||
<div style="display:flex;align-items:center;gap:12px;">
|
||||
<div style="width:44px;height:44px;background:linear-gradient(135deg,#f59e0b,#ef4444);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;font-family:Inter,sans-serif;">MP</div>
|
||||
<div>
|
||||
<div style="font-weight:600;color:#fff;font-family:Inter,sans-serif;font-size:15px;">Maria Petrov</div>
|
||||
<div style="font-size:13px;color:#94a3b8;font-family:Inter,sans-serif;">VP Engineering, DataWorks</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section style="padding:100px 20px;background:linear-gradient(135deg,#312e81 0%,#6366f1 100%);text-align:center;">
|
||||
<div style="max-width:700px;margin:0 auto;">
|
||||
<h2 style="font-size:42px;font-weight:800;color:#fff;margin-bottom:20px;font-family:Inter,sans-serif;">Ready to ship faster?</h2>
|
||||
<p style="font-size:18px;color:rgba(255,255,255,0.8);margin-bottom:40px;line-height:1.7;font-family:Inter,sans-serif;">Join thousands of teams already building with Velocity. Start your free trial today — no credit card required.</p>
|
||||
<a href="#" style="display:inline-block;padding:18px 48px;background:#fff;color:#6366f1;font-size:18px;font-weight:700;text-decoration:none;border-radius:12px;font-family:Inter,sans-serif;box-shadow:0 4px 20px rgba(0,0,0,0.2);">Start Building for Free</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="padding:60px 20px 30px;background:#0f0a1e;border-top:1px solid rgba(99,102,241,0.1);">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:60px;margin-bottom:40px;">
|
||||
<div style="flex:1;min-width:200px;">
|
||||
<div style="font-size:22px;font-weight:700;color:#fff;margin-bottom:16px;font-family:Inter,sans-serif;">Velocity<span style="color:#818cf8;">.</span></div>
|
||||
<p style="color:#94a3b8;font-size:14px;line-height:1.7;font-family:Inter,sans-serif;">The modern deployment platform for ambitious teams.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:140px;">
|
||||
<h4 style="color:#fff;font-size:14px;font-weight:600;margin-bottom:16px;font-family:Inter,sans-serif;">Product</h4>
|
||||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Features</a>
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Pricing</a>
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Changelog</a>
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Documentation</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:140px;">
|
||||
<h4 style="color:#fff;font-size:14px;font-weight:600;margin-bottom:16px;font-family:Inter,sans-serif;">Company</h4>
|
||||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">About</a>
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Blog</a>
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Careers</a>
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:140px;">
|
||||
<h4 style="color:#fff;font-size:14px;font-weight:600;margin-bottom:16px;font-family:Inter,sans-serif;">Legal</h4>
|
||||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Privacy</a>
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Terms</a>
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Security</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top:1px solid rgba(99,102,241,0.1);padding-top:24px;text-align:center;">
|
||||
<p style="color:#6b7280;font-size:13px;font-family:Inter,sans-serif;">© 2026 Velocity. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
152
templates/portfolio-designer.html
Normal file
152
templates/portfolio-designer.html
Normal file
@@ -0,0 +1,152 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:24px 60px;background:#0c0a09;">
|
||||
<div style="font-size:20px;font-weight:700;color:#fafaf9;font-family:Inter,sans-serif;letter-spacing:-0.5px;">Alex Chen</div>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#work" style="color:#a8a29e;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Work</a>
|
||||
<a href="#about" style="color:#a8a29e;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">About</a>
|
||||
<a href="#contact" style="color:#a8a29e;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section style="min-height:85vh;display:flex;align-items:center;padding:80px 60px;background:#0c0a09;">
|
||||
<div style="max-width:900px;">
|
||||
<p style="color:#f97316;font-size:16px;font-weight:600;margin-bottom:20px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Digital Designer & Developer</p>
|
||||
<h1 style="color:#fafaf9;font-size:72px;font-weight:800;line-height:1.05;margin-bottom:32px;font-family:Inter,sans-serif;letter-spacing:-2px;">I craft digital experiences that people <span style="color:#f97316;">remember.</span></h1>
|
||||
<p style="color:#a8a29e;font-size:20px;line-height:1.7;margin-bottom:40px;font-family:Inter,sans-serif;max-width:600px;">Product designer with 8+ years of experience creating intuitive interfaces for startups and Fortune 500 companies. Currently available for freelance projects.</p>
|
||||
<div style="display:flex;gap:16px;flex-wrap:wrap;">
|
||||
<a href="#work" style="display:inline-block;padding:16px 36px;background:#f97316;color:#fff;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">View My Work</a>
|
||||
<a href="#contact" style="display:inline-block;padding:16px 36px;background:transparent;color:#fafaf9;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #44403c;">Get In Touch</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects Section -->
|
||||
<section id="work" style="padding:100px 60px;background:#1c1917;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<div style="margin-bottom:60px;">
|
||||
<h2 style="font-size:14px;font-weight:600;color:#f97316;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Selected Work</h2>
|
||||
<h3 style="font-size:42px;font-weight:800;color:#fafaf9;font-family:Inter,sans-serif;letter-spacing:-1px;">Projects I'm proud of</h3>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:40px;">
|
||||
<!-- Project 1 -->
|
||||
<div style="display:flex;flex-wrap:wrap;gap:0;border-radius:20px;overflow:hidden;background:#292524;">
|
||||
<div style="flex:1;min-width:300px;">
|
||||
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=500&fit=crop" style="width:100%;height:100%;object-fit:cover;display:block;min-height:300px;" alt="Fintech Dashboard">
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;padding:48px;display:flex;flex-direction:column;justify-content:center;">
|
||||
<p style="color:#f97316;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Web App · 2025</p>
|
||||
<h3 style="font-size:28px;font-weight:700;color:#fafaf9;margin-bottom:16px;font-family:Inter,sans-serif;">Fintech Dashboard Redesign</h3>
|
||||
<p style="color:#a8a29e;font-size:16px;line-height:1.7;margin-bottom:24px;font-family:Inter,sans-serif;">Complete redesign of a financial analytics platform serving 50,000+ daily active users. Improved task completion rate by 34%.</p>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">UI/UX Design</span>
|
||||
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">React</span>
|
||||
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">Design System</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Project 2 -->
|
||||
<div style="display:flex;flex-wrap:wrap-reverse;gap:0;border-radius:20px;overflow:hidden;background:#292524;">
|
||||
<div style="flex:1;min-width:300px;padding:48px;display:flex;flex-direction:column;justify-content:center;">
|
||||
<p style="color:#f97316;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Mobile App · 2025</p>
|
||||
<h3 style="font-size:28px;font-weight:700;color:#fafaf9;margin-bottom:16px;font-family:Inter,sans-serif;">Wellness Tracking App</h3>
|
||||
<p style="color:#a8a29e;font-size:16px;line-height:1.7;margin-bottom:24px;font-family:Inter,sans-serif;">End-to-end design for a health and wellness app. From user research to final UI, achieving a 4.8-star rating on the App Store.</p>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">Mobile Design</span>
|
||||
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">iOS</span>
|
||||
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">User Research</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;">
|
||||
<img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=800&h=500&fit=crop" style="width:100%;height:100%;object-fit:cover;display:block;min-height:300px;" alt="Wellness App">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Project 3 -->
|
||||
<div style="display:flex;flex-wrap:wrap;gap:0;border-radius:20px;overflow:hidden;background:#292524;">
|
||||
<div style="flex:1;min-width:300px;">
|
||||
<img src="https://images.unsplash.com/photo-1559028012-481c04fa702d?w=800&h=500&fit=crop" style="width:100%;height:100%;object-fit:cover;display:block;min-height:300px;" alt="E-commerce Brand">
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;padding:48px;display:flex;flex-direction:column;justify-content:center;">
|
||||
<p style="color:#f97316;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Branding · 2024</p>
|
||||
<h3 style="font-size:28px;font-weight:700;color:#fafaf9;margin-bottom:16px;font-family:Inter,sans-serif;">Luxury E-commerce Rebrand</h3>
|
||||
<p style="color:#a8a29e;font-size:16px;line-height:1.7;margin-bottom:24px;font-family:Inter,sans-serif;">Full brand identity and e-commerce website for a premium fashion label. Revenue increased 120% post-launch.</p>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">Branding</span>
|
||||
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">E-commerce</span>
|
||||
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">Shopify</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" style="padding:100px 60px;background:#0c0a09;">
|
||||
<div style="max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:60px;align-items:center;">
|
||||
<div style="flex:1;min-width:300px;">
|
||||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=500&h=600&fit=crop" style="width:100%;border-radius:20px;display:block;" alt="Alex Chen portrait">
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;">
|
||||
<h2 style="font-size:14px;font-weight:600;color:#f97316;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">About Me</h2>
|
||||
<h3 style="font-size:36px;font-weight:800;color:#fafaf9;margin-bottom:24px;font-family:Inter,sans-serif;letter-spacing:-0.5px;">Designing with purpose, building with passion</h3>
|
||||
<p style="color:#a8a29e;font-size:17px;line-height:1.8;margin-bottom:20px;font-family:Inter,sans-serif;">I'm a product designer and front-end developer based in San Francisco. I specialize in creating digital products that balance aesthetics with functionality.</p>
|
||||
<p style="color:#a8a29e;font-size:17px;line-height:1.8;margin-bottom:32px;font-family:Inter,sans-serif;">When I'm not pushing pixels, you'll find me hiking in the Bay Area, experimenting with film photography, or contributing to open-source design tools.</p>
|
||||
<div style="display:flex;gap:40px;flex-wrap:wrap;">
|
||||
<div>
|
||||
<div style="font-size:36px;font-weight:800;color:#f97316;font-family:Inter,sans-serif;">8+</div>
|
||||
<div style="font-size:14px;color:#a8a29e;font-family:Inter,sans-serif;">Years Experience</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:36px;font-weight:800;color:#f97316;font-family:Inter,sans-serif;">60+</div>
|
||||
<div style="font-size:14px;color:#a8a29e;font-family:Inter,sans-serif;">Projects Completed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:36px;font-weight:800;color:#f97316;font-family:Inter,sans-serif;">30+</div>
|
||||
<div style="font-size:14px;color:#a8a29e;font-family:Inter,sans-serif;">Happy Clients</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Skills -->
|
||||
<section style="padding:80px 60px;background:#1c1917;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<h2 style="font-size:14px;font-weight:600;color:#f97316;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Expertise</h2>
|
||||
<h3 style="font-size:36px;font-weight:800;color:#fafaf9;margin-bottom:48px;font-family:Inter,sans-serif;">Tools & Technologies</h3>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:16px;">
|
||||
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Figma</span>
|
||||
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">React</span>
|
||||
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">TypeScript</span>
|
||||
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Next.js</span>
|
||||
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Tailwind CSS</span>
|
||||
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Framer Motion</span>
|
||||
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Adobe CC</span>
|
||||
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Webflow</span>
|
||||
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Node.js</span>
|
||||
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Design Systems</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" style="padding:100px 60px;background:#0c0a09;">
|
||||
<div style="max-width:700px;margin:0 auto;text-align:center;">
|
||||
<h2 style="font-size:14px;font-weight:600;color:#f97316;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Get In Touch</h2>
|
||||
<h3 style="font-size:48px;font-weight:800;color:#fafaf9;margin-bottom:24px;font-family:Inter,sans-serif;letter-spacing:-1px;">Let's work together</h3>
|
||||
<p style="color:#a8a29e;font-size:18px;line-height:1.7;margin-bottom:40px;font-family:Inter,sans-serif;">Have a project in mind? I'd love to hear about it. Send me a message and let's make something amazing.</p>
|
||||
<a href="mailto:hello@alexchen.design" style="display:inline-block;padding:18px 48px;background:#f97316;color:#fff;font-size:18px;font-weight:600;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;">hello@alexchen.design</a>
|
||||
<div style="display:flex;justify-content:center;gap:24px;margin-top:40px;">
|
||||
<a href="#" style="color:#a8a29e;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Dribbble</a>
|
||||
<a href="#" style="color:#a8a29e;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">GitHub</a>
|
||||
<a href="#" style="color:#a8a29e;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">LinkedIn</a>
|
||||
<a href="#" style="color:#a8a29e;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Twitter</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="padding:30px 60px;background:#0c0a09;border-top:1px solid #292524;">
|
||||
<p style="text-align:center;color:#57534e;font-size:13px;font-family:Inter,sans-serif;">© 2026 Alex Chen. Designed and built with care.</p>
|
||||
</footer>
|
||||
129
templates/restaurant-cafe.html
Normal file
129
templates/restaurant-cafe.html
Normal file
@@ -0,0 +1,129 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background:#1c1917;">
|
||||
<div style="font-size:24px;font-weight:700;color:#fef3c7;font-family:'Playfair Display',serif;letter-spacing:1px;">Ember & Oak</div>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#menu" style="color:#d6d3d1;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Menu</a>
|
||||
<a href="#story" style="color:#d6d3d1;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Our Story</a>
|
||||
<a href="#reserve" style="display:inline-block;padding:10px 24px;background:#b45309;color:#fff;font-size:13px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Reserve a Table</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section style="min-height:650px;display:flex;align-items:center;justify-content:center;background-image:url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1920');background-size:cover;background-position:center;position:relative;text-align:center;">
|
||||
<div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(28,25,23,0.7);"></div>
|
||||
<div style="position:relative;z-index:1;max-width:700px;padding:40px 20px;">
|
||||
<p style="color:#b45309;font-size:14px;font-weight:600;margin-bottom:16px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">EST. 2018 · Farm to Table</p>
|
||||
<h1 style="color:#fef3c7;font-size:64px;font-weight:700;margin-bottom:24px;font-family:'Playfair Display',serif;line-height:1.1;">Where Fire Meets Flavor</h1>
|
||||
<p style="color:#d6d3d1;font-size:18px;line-height:1.7;margin-bottom:40px;font-family:Inter,sans-serif;">Wood-fired cuisine crafted from locally sourced ingredients. An intimate dining experience in the heart of downtown.</p>
|
||||
<div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
|
||||
<a href="#reserve" style="display:inline-block;padding:16px 40px;background:#b45309;color:#fff;font-size:15px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Reserve a Table</a>
|
||||
<a href="#menu" style="display:inline-block;padding:16px 40px;background:transparent;color:#fef3c7;font-size:15px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;border:1px solid rgba(254,243,199,0.3);text-transform:uppercase;letter-spacing:1px;">View Menu</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About -->
|
||||
<section id="story" style="padding:100px 20px;background:#faf5ef;">
|
||||
<div style="max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:60px;align-items:center;">
|
||||
<div style="flex:1;min-width:300px;">
|
||||
<img src="https://images.unsplash.com/photo-1556910103-1c02745aae4d?w=600&h=700&fit=crop" style="width:100%;border-radius:12px;display:block;" alt="Chef preparing food">
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;">
|
||||
<p style="color:#b45309;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Our Story</p>
|
||||
<h2 style="font-size:40px;font-weight:700;color:#1c1917;margin-bottom:24px;font-family:'Playfair Display',serif;line-height:1.2;">A passion for honest, wood-fired cooking</h2>
|
||||
<p style="color:#57534e;font-size:17px;line-height:1.8;margin-bottom:20px;font-family:Inter,sans-serif;">Chef Marcus Rivera opened Ember & Oak with a simple belief: the best food comes from the best ingredients, cooked over real fire. Every dish tells a story of local farms, seasonal produce, and time-honored techniques.</p>
|
||||
<p style="color:#57534e;font-size:17px;line-height:1.8;font-family:Inter,sans-serif;">Our custom-built wood-fired oven reaches 900°F, creating that distinctive char and smoky depth that keeps our guests coming back week after week.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Menu Highlights -->
|
||||
<section id="menu" style="padding:100px 20px;background:#1c1917;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<p style="color:#b45309;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">From Our Kitchen</p>
|
||||
<h2 style="font-size:42px;font-weight:700;color:#fef3c7;font-family:'Playfair Display',serif;">Menu Highlights</h2>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
|
||||
<div style="flex:1;min-width:280px;max-width:380px;border-radius:12px;overflow:hidden;background:#292524;">
|
||||
<img src="https://images.unsplash.com/photo-1544025162-d76694265947?w=400&h=280&fit=crop" style="width:100%;height:240px;object-fit:cover;display:block;" alt="Steak">
|
||||
<div style="padding:28px;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
|
||||
<h3 style="font-size:20px;font-weight:600;color:#fef3c7;font-family:'Playfair Display',serif;">Wood-Fired Ribeye</h3>
|
||||
<span style="color:#b45309;font-size:18px;font-weight:700;font-family:Inter,sans-serif;">$48</span>
|
||||
</div>
|
||||
<p style="color:#a8a29e;line-height:1.6;font-size:14px;font-family:Inter,sans-serif;">14oz prime ribeye, oak-smoked, served with roasted bone marrow butter and charred broccolini</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:380px;border-radius:12px;overflow:hidden;background:#292524;">
|
||||
<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=400&h=280&fit=crop" style="width:100%;height:240px;object-fit:cover;display:block;" alt="Pizza">
|
||||
<div style="padding:28px;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
|
||||
<h3 style="font-size:20px;font-weight:600;color:#fef3c7;font-family:'Playfair Display',serif;">Truffle Margherita</h3>
|
||||
<span style="color:#b45309;font-size:18px;font-weight:700;font-family:Inter,sans-serif;">$24</span>
|
||||
</div>
|
||||
<p style="color:#a8a29e;line-height:1.6;font-size:14px;font-family:Inter,sans-serif;">San Marzano tomatoes, fresh mozzarella di bufala, black truffle, basil, finished in our 900°F oven</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:380px;border-radius:12px;overflow:hidden;background:#292524;">
|
||||
<img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?w=400&h=280&fit=crop" style="width:100%;height:240px;object-fit:cover;display:block;" alt="Dessert">
|
||||
<div style="padding:28px;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
|
||||
<h3 style="font-size:20px;font-weight:600;color:#fef3c7;font-family:'Playfair Display',serif;">Smoked Crème Brûlée</h3>
|
||||
<span style="color:#b45309;font-size:18px;font-weight:700;font-family:Inter,sans-serif;">$16</span>
|
||||
</div>
|
||||
<p style="color:#a8a29e;line-height:1.6;font-size:14px;font-family:Inter,sans-serif;">Madagascar vanilla custard, applewood-smoked sugar crust, fresh seasonal berries</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:center;margin-top:48px;">
|
||||
<a href="#" style="display:inline-block;padding:14px 36px;background:transparent;color:#fef3c7;font-size:14px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;border:1px solid rgba(254,243,199,0.3);text-transform:uppercase;letter-spacing:1px;">View Full Menu →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Hours & Location -->
|
||||
<section style="padding:80px 20px;background:#faf5ef;">
|
||||
<div style="max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;gap:60px;justify-content:center;">
|
||||
<div style="flex:1;min-width:280px;text-align:center;">
|
||||
<h3 style="font-size:22px;font-weight:700;color:#1c1917;margin-bottom:20px;font-family:'Playfair Display',serif;">Hours</h3>
|
||||
<p style="color:#57534e;font-size:16px;line-height:2;font-family:Inter,sans-serif;">Monday – Thursday: 5pm – 10pm</p>
|
||||
<p style="color:#57534e;font-size:16px;line-height:2;font-family:Inter,sans-serif;">Friday – Saturday: 5pm – 11pm</p>
|
||||
<p style="color:#57534e;font-size:16px;line-height:2;font-family:Inter,sans-serif;">Sunday: 4pm – 9pm</p>
|
||||
<p style="color:#57534e;font-size:16px;line-height:2;font-family:Inter,sans-serif;">Brunch: Sat & Sun 10am – 2pm</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;text-align:center;">
|
||||
<h3 style="font-size:22px;font-weight:700;color:#1c1917;margin-bottom:20px;font-family:'Playfair Display',serif;">Location</h3>
|
||||
<p style="color:#57534e;font-size:16px;line-height:2;font-family:Inter,sans-serif;">742 Fireside Lane</p>
|
||||
<p style="color:#57534e;font-size:16px;line-height:2;font-family:Inter,sans-serif;">Downtown District</p>
|
||||
<p style="color:#57534e;font-size:16px;line-height:2;font-family:Inter,sans-serif;">Portland, OR 97201</p>
|
||||
<p style="color:#b45309;font-size:16px;line-height:2;font-family:Inter,sans-serif;">(503) 555-0182</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;text-align:center;">
|
||||
<h3 style="font-size:22px;font-weight:700;color:#1c1917;margin-bottom:20px;font-family:'Playfair Display',serif;">Private Events</h3>
|
||||
<p style="color:#57534e;font-size:16px;line-height:1.8;font-family:Inter,sans-serif;">Our private dining room seats up to 24 guests. Perfect for celebrations, corporate dinners, and special occasions.</p>
|
||||
<a href="#" style="display:inline-block;margin-top:16px;color:#b45309;font-size:14px;font-weight:600;text-decoration:none;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Inquire Now →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Reservation CTA -->
|
||||
<section id="reserve" style="padding:100px 20px;background-image:url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1920');background-size:cover;background-position:center;position:relative;text-align:center;">
|
||||
<div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(28,25,23,0.8);"></div>
|
||||
<div style="position:relative;z-index:1;max-width:600px;margin:0 auto;">
|
||||
<h2 style="font-size:42px;font-weight:700;color:#fef3c7;margin-bottom:20px;font-family:'Playfair Display',serif;">Reserve Your Table</h2>
|
||||
<p style="font-size:18px;color:#d6d3d1;margin-bottom:40px;line-height:1.7;font-family:Inter,sans-serif;">Join us for an unforgettable dining experience. Walk-ins welcome, but reservations are recommended.</p>
|
||||
<a href="#" style="display:inline-block;padding:18px 48px;background:#b45309;color:#fff;font-size:16px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Book Now on OpenTable</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="padding:40px 20px;background:#1c1917;text-align:center;">
|
||||
<div style="font-size:20px;font-weight:700;color:#fef3c7;margin-bottom:16px;font-family:'Playfair Display',serif;">Ember & Oak</div>
|
||||
<div style="display:flex;justify-content:center;gap:20px;margin-bottom:16px;">
|
||||
<a href="#" style="color:#a8a29e;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Instagram</a>
|
||||
<a href="#" style="color:#a8a29e;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Facebook</a>
|
||||
<a href="#" style="color:#a8a29e;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Yelp</a>
|
||||
</div>
|
||||
<p style="color:#57534e;font-size:13px;font-family:Inter,sans-serif;">© 2026 Ember & Oak. All rights reserved.</p>
|
||||
</footer>
|
||||
134
templates/resume-cv.html
Normal file
134
templates/resume-cv.html
Normal file
@@ -0,0 +1,134 @@
|
||||
<!-- Header -->
|
||||
<section style="padding:80px 20px;background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);text-align:center;">
|
||||
<div style="max-width:700px;margin:0 auto;">
|
||||
<div style="width:120px;height:120px;background:linear-gradient(135deg,#2563eb,#3b82f6);border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:700;color:#fff;font-family:Inter,sans-serif;">JD</div>
|
||||
<h1 style="font-size:42px;font-weight:800;color:#fff;margin-bottom:8px;font-family:Inter,sans-serif;letter-spacing:-0.5px;">Jordan Davis</h1>
|
||||
<p style="font-size:20px;color:#3b82f6;margin-bottom:16px;font-family:Inter,sans-serif;font-weight:500;">Senior Full-Stack Developer</p>
|
||||
<p style="color:#94a3b8;font-size:16px;line-height:1.7;margin-bottom:28px;font-family:Inter,sans-serif;max-width:550px;margin-left:auto;margin-right:auto;">Passionate about building scalable web applications and leading high-performing engineering teams. 7+ years of experience across startups and enterprise.</p>
|
||||
<div style="display:flex;justify-content:center;gap:16px;flex-wrap:wrap;">
|
||||
<a href="#" style="padding:10px 20px;background:rgba(59,130,246,0.15);color:#60a5fa;font-size:14px;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">📧 jordan@email.com</a>
|
||||
<a href="#" style="padding:10px 20px;background:rgba(59,130,246,0.15);color:#60a5fa;font-size:14px;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">📍 San Francisco, CA</a>
|
||||
<a href="#" style="padding:10px 20px;background:rgba(59,130,246,0.15);color:#60a5fa;font-size:14px;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">🔗 LinkedIn</a>
|
||||
<a href="#" style="padding:10px 20px;background:rgba(59,130,246,0.15);color:#60a5fa;font-size:14px;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">💻 GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Skills -->
|
||||
<section style="padding:60px 20px;background:#f1f5f9;">
|
||||
<div style="max-width:900px;margin:0 auto;">
|
||||
<h2 style="font-size:14px;font-weight:600;color:#2563eb;margin-bottom:24px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Technical Skills</h2>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:10px;">
|
||||
<span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">TypeScript</span>
|
||||
<span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">React</span>
|
||||
<span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">Node.js</span>
|
||||
<span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">Python</span>
|
||||
<span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">PostgreSQL</span>
|
||||
<span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">AWS</span>
|
||||
<span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">Docker</span>
|
||||
<span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">GraphQL</span>
|
||||
<span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">Next.js</span>
|
||||
<span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">Redis</span>
|
||||
<span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">CI/CD</span>
|
||||
<span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">Kubernetes</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Experience -->
|
||||
<section style="padding:60px 20px;background:#fff;">
|
||||
<div style="max-width:900px;margin:0 auto;">
|
||||
<h2 style="font-size:14px;font-weight:600;color:#2563eb;margin-bottom:32px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Work Experience</h2>
|
||||
|
||||
<div style="margin-bottom:40px;padding-left:24px;border-left:2px solid #3b82f6;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:8px;margin-bottom:8px;">
|
||||
<div>
|
||||
<h3 style="font-size:20px;font-weight:700;color:#1e293b;font-family:Inter,sans-serif;">Senior Full-Stack Developer</h3>
|
||||
<p style="font-size:16px;color:#2563eb;font-weight:500;font-family:Inter,sans-serif;">TechCorp Inc.</p>
|
||||
</div>
|
||||
<span style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;white-space:nowrap;">Jan 2022 – Present</span>
|
||||
</div>
|
||||
<ul style="list-style:none;padding:0;margin:12px 0 0 0;">
|
||||
<li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Led a team of 5 engineers to rebuild the core platform, reducing load times by 60%</li>
|
||||
<li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Designed and implemented a microservices architecture handling 2M+ daily requests</li>
|
||||
<li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Mentored 3 junior developers, all promoted within 12 months</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom:40px;padding-left:24px;border-left:2px solid #93c5fd;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:8px;margin-bottom:8px;">
|
||||
<div>
|
||||
<h3 style="font-size:20px;font-weight:700;color:#1e293b;font-family:Inter,sans-serif;">Full-Stack Developer</h3>
|
||||
<p style="font-size:16px;color:#2563eb;font-weight:500;font-family:Inter,sans-serif;">StartupXYZ</p>
|
||||
</div>
|
||||
<span style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;white-space:nowrap;">Mar 2019 – Dec 2021</span>
|
||||
</div>
|
||||
<ul style="list-style:none;padding:0;margin:12px 0 0 0;">
|
||||
<li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Built the company's flagship SaaS product from prototype to 10,000+ paying users</li>
|
||||
<li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Implemented real-time collaboration features using WebSockets and CRDTs</li>
|
||||
<li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Reduced infrastructure costs by 40% through performance optimization</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="padding-left:24px;border-left:2px solid #bfdbfe;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:8px;margin-bottom:8px;">
|
||||
<div>
|
||||
<h3 style="font-size:20px;font-weight:700;color:#1e293b;font-family:Inter,sans-serif;">Junior Developer</h3>
|
||||
<p style="font-size:16px;color:#2563eb;font-weight:500;font-family:Inter,sans-serif;">WebAgency Co.</p>
|
||||
</div>
|
||||
<span style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;white-space:nowrap;">Jun 2017 – Feb 2019</span>
|
||||
</div>
|
||||
<ul style="list-style:none;padding:0;margin:12px 0 0 0;">
|
||||
<li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Developed 20+ client websites using React and Node.js</li>
|
||||
<li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Introduced automated testing, increasing code coverage from 15% to 85%</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Education -->
|
||||
<section style="padding:60px 20px;background:#f1f5f9;">
|
||||
<div style="max-width:900px;margin:0 auto;">
|
||||
<h2 style="font-size:14px;font-weight:600;color:#2563eb;margin-bottom:32px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Education</h2>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:30px;">
|
||||
<div style="flex:1;min-width:280px;padding:28px;background:#fff;border-radius:12px;border:1px solid #e2e8f0;">
|
||||
<h3 style="font-size:18px;font-weight:700;color:#1e293b;margin-bottom:4px;font-family:Inter,sans-serif;">B.S. Computer Science</h3>
|
||||
<p style="font-size:15px;color:#2563eb;font-weight:500;margin-bottom:4px;font-family:Inter,sans-serif;">University of California, Berkeley</p>
|
||||
<p style="font-size:14px;color:#64748b;font-family:Inter,sans-serif;">2013 – 2017 · GPA: 3.8</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;padding:28px;background:#fff;border-radius:12px;border:1px solid #e2e8f0;">
|
||||
<h3 style="font-size:18px;font-weight:700;color:#1e293b;margin-bottom:4px;font-family:Inter,sans-serif;">AWS Solutions Architect</h3>
|
||||
<p style="font-size:15px;color:#2563eb;font-weight:500;margin-bottom:4px;font-family:Inter,sans-serif;">Amazon Web Services</p>
|
||||
<p style="font-size:14px;color:#64748b;font-family:Inter,sans-serif;">Professional Certification · 2023</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects -->
|
||||
<section style="padding:60px 20px;background:#fff;">
|
||||
<div style="max-width:900px;margin:0 auto;">
|
||||
<h2 style="font-size:14px;font-weight:600;color:#2563eb;margin-bottom:32px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Side Projects</h2>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;">
|
||||
<div style="flex:1;min-width:280px;padding:28px;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;">
|
||||
<h3 style="font-size:18px;font-weight:700;color:#1e293b;margin-bottom:8px;font-family:Inter,sans-serif;">DevMetrics</h3>
|
||||
<p style="color:#475569;font-size:14px;line-height:1.6;margin-bottom:12px;font-family:Inter,sans-serif;">Open-source developer productivity dashboard with 2,000+ GitHub stars. Built with Next.js and D3.js.</p>
|
||||
<a href="#" style="color:#2563eb;font-size:14px;font-weight:500;text-decoration:none;font-family:Inter,sans-serif;">View on GitHub →</a>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;padding:28px;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;">
|
||||
<h3 style="font-size:18px;font-weight:700;color:#1e293b;margin-bottom:8px;font-family:Inter,sans-serif;">CodeReview.ai</h3>
|
||||
<p style="color:#475569;font-size:14px;line-height:1.6;margin-bottom:12px;font-family:Inter,sans-serif;">AI-powered code review tool used by 500+ developers. Featured on Product Hunt (#3 Product of the Day).</p>
|
||||
<a href="#" style="color:#2563eb;font-size:14px;font-weight:500;text-decoration:none;font-family:Inter,sans-serif;">View Project →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact CTA -->
|
||||
<section style="padding:60px 20px;background:linear-gradient(135deg,#1e293b,#0f172a);text-align:center;">
|
||||
<div style="max-width:600px;margin:0 auto;">
|
||||
<h2 style="font-size:32px;font-weight:800;color:#fff;margin-bottom:16px;font-family:Inter,sans-serif;">Let's connect</h2>
|
||||
<p style="font-size:16px;color:#94a3b8;margin-bottom:32px;font-family:Inter,sans-serif;">Open to new opportunities and interesting projects.</p>
|
||||
<a href="mailto:jordan@email.com" style="display:inline-block;padding:14px 36px;background:#2563eb;color:#fff;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">Get In Touch</a>
|
||||
</div>
|
||||
</section>
|
||||
26
templates/thumbnails/app-showcase.svg
Normal file
26
templates/thumbnails/app-showcase.svg
Normal file
@@ -0,0 +1,26 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-app-showcase" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#06b6d4"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-app-showcase)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="60" height="12" rx="3" fill="#06b6d4" opacity="0.8"/>
|
||||
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<rect x="330" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<!-- Hero text lines -->
|
||||
<rect x="40" y="70" width="200" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
|
||||
<rect x="40" y="96" width="160" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<rect x="40" y="112" width="180" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- CTA button -->
|
||||
<rect x="40" y="136" width="100" height="28" rx="6" fill="#06b6d4"/>
|
||||
<!-- Content blocks -->
|
||||
<rect x="40" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="150" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="260" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<!-- Accent circle -->
|
||||
<circle cx="340" cy="90" r="40" fill="#7c3aed" opacity="0.15"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
26
templates/thumbnails/business-agency.svg
Normal file
26
templates/thumbnails/business-agency.svg
Normal file
@@ -0,0 +1,26 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-business-agency" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#0ea5e9"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-business-agency)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="60" height="12" rx="3" fill="#0ea5e9" opacity="0.8"/>
|
||||
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<rect x="330" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<!-- Hero text lines -->
|
||||
<rect x="40" y="70" width="200" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
|
||||
<rect x="40" y="96" width="160" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<rect x="40" y="112" width="180" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- CTA button -->
|
||||
<rect x="40" y="136" width="100" height="28" rx="6" fill="#0ea5e9"/>
|
||||
<!-- Content blocks -->
|
||||
<rect x="40" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="150" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="260" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<!-- Accent circle -->
|
||||
<circle cx="340" cy="90" r="40" fill="#f8fafc" opacity="0.15"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
26
templates/thumbnails/coming-soon.svg
Normal file
26
templates/thumbnails/coming-soon.svg
Normal file
@@ -0,0 +1,26 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-coming-soon" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e1b4b"/>
|
||||
<stop offset="100%" style="stop-color:#8b5cf6"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-coming-soon)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="60" height="12" rx="3" fill="#8b5cf6" opacity="0.8"/>
|
||||
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<rect x="330" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<!-- Hero text lines -->
|
||||
<rect x="40" y="70" width="200" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
|
||||
<rect x="40" y="96" width="160" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<rect x="40" y="112" width="180" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- CTA button -->
|
||||
<rect x="40" y="136" width="100" height="28" rx="6" fill="#8b5cf6"/>
|
||||
<!-- Content blocks -->
|
||||
<rect x="40" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="150" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="260" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<!-- Accent circle -->
|
||||
<circle cx="340" cy="90" r="40" fill="#ec4899" opacity="0.15"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
26
templates/thumbnails/event-conference.svg
Normal file
26
templates/thumbnails/event-conference.svg
Normal file
@@ -0,0 +1,26 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-event-conference" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#e11d48"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-event-conference)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="60" height="12" rx="3" fill="#e11d48" opacity="0.8"/>
|
||||
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<rect x="330" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<!-- Hero text lines -->
|
||||
<rect x="40" y="70" width="200" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
|
||||
<rect x="40" y="96" width="160" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<rect x="40" y="112" width="180" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- CTA button -->
|
||||
<rect x="40" y="136" width="100" height="28" rx="6" fill="#e11d48"/>
|
||||
<!-- Content blocks -->
|
||||
<rect x="40" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="150" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="260" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<!-- Accent circle -->
|
||||
<circle cx="340" cy="90" r="40" fill="#fbbf24" opacity="0.15"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
74
templates/thumbnails/generate.sh
Normal file
74
templates/thumbnails/generate.sh
Normal file
@@ -0,0 +1,74 @@
|
||||
#!/bin/bash
|
||||
cd "$(dirname "$0")"
|
||||
|
||||
# Generate simple SVG thumbnails for each template
|
||||
for t in landing-saas portfolio-designer business-agency restaurant-cafe resume-cv app-showcase event-conference coming-soon; do
|
||||
case $t in
|
||||
landing-saas)
|
||||
colors='#6366f1 #1e1b4b #8b5cf6'
|
||||
label='SaaS Landing'
|
||||
;;
|
||||
portfolio-designer)
|
||||
colors='#f97316 #1c1917 #fafaf9'
|
||||
label='Portfolio'
|
||||
;;
|
||||
business-agency)
|
||||
colors='#0ea5e9 #0f172a #f8fafc'
|
||||
label='Agency'
|
||||
;;
|
||||
restaurant-cafe)
|
||||
colors='#b45309 #1c1917 #fef3c7'
|
||||
label='Restaurant'
|
||||
;;
|
||||
resume-cv)
|
||||
colors='#2563eb #1e293b #f1f5f9'
|
||||
label='Resume/CV'
|
||||
;;
|
||||
app-showcase)
|
||||
colors='#06b6d4 #0f172a #7c3aed'
|
||||
label='App Landing'
|
||||
;;
|
||||
event-conference)
|
||||
colors='#e11d48 #0f172a #fbbf24'
|
||||
label='Event'
|
||||
;;
|
||||
coming-soon)
|
||||
colors='#8b5cf6 #1e1b4b #ec4899'
|
||||
label='Coming Soon'
|
||||
;;
|
||||
esac
|
||||
|
||||
c1=$(echo $colors | cut -d' ' -f1)
|
||||
c2=$(echo $colors | cut -d' ' -f2)
|
||||
c3=$(echo $colors | cut -d' ' -f3)
|
||||
|
||||
cat > "${t}.svg" << EOF
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-${t}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:${c2}"/>
|
||||
<stop offset="100%" style="stop-color:${c1}"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-${t})"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="60" height="12" rx="3" fill="${c1}" opacity="0.8"/>
|
||||
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<rect x="330" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<!-- Hero text lines -->
|
||||
<rect x="40" y="70" width="200" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
|
||||
<rect x="40" y="96" width="160" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<rect x="40" y="112" width="180" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- CTA button -->
|
||||
<rect x="40" y="136" width="100" height="28" rx="6" fill="${c1}"/>
|
||||
<!-- Content blocks -->
|
||||
<rect x="40" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="150" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="260" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<!-- Accent circle -->
|
||||
<circle cx="340" cy="90" r="40" fill="${c3}" opacity="0.15"/>
|
||||
</svg>
|
||||
EOF
|
||||
done
|
||||
echo "Generated thumbnails"
|
||||
26
templates/thumbnails/landing-saas.svg
Normal file
26
templates/thumbnails/landing-saas.svg
Normal file
@@ -0,0 +1,26 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-landing-saas" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e1b4b"/>
|
||||
<stop offset="100%" style="stop-color:#6366f1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-landing-saas)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="60" height="12" rx="3" fill="#6366f1" opacity="0.8"/>
|
||||
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<rect x="330" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<!-- Hero text lines -->
|
||||
<rect x="40" y="70" width="200" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
|
||||
<rect x="40" y="96" width="160" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<rect x="40" y="112" width="180" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- CTA button -->
|
||||
<rect x="40" y="136" width="100" height="28" rx="6" fill="#6366f1"/>
|
||||
<!-- Content blocks -->
|
||||
<rect x="40" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="150" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="260" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<!-- Accent circle -->
|
||||
<circle cx="340" cy="90" r="40" fill="#8b5cf6" opacity="0.15"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
26
templates/thumbnails/portfolio-designer.svg
Normal file
26
templates/thumbnails/portfolio-designer.svg
Normal file
@@ -0,0 +1,26 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-portfolio-designer" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1c1917"/>
|
||||
<stop offset="100%" style="stop-color:#f97316"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-portfolio-designer)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="60" height="12" rx="3" fill="#f97316" opacity="0.8"/>
|
||||
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<rect x="330" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<!-- Hero text lines -->
|
||||
<rect x="40" y="70" width="200" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
|
||||
<rect x="40" y="96" width="160" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<rect x="40" y="112" width="180" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- CTA button -->
|
||||
<rect x="40" y="136" width="100" height="28" rx="6" fill="#f97316"/>
|
||||
<!-- Content blocks -->
|
||||
<rect x="40" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="150" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="260" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<!-- Accent circle -->
|
||||
<circle cx="340" cy="90" r="40" fill="#fafaf9" opacity="0.15"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
26
templates/thumbnails/restaurant-cafe.svg
Normal file
26
templates/thumbnails/restaurant-cafe.svg
Normal file
@@ -0,0 +1,26 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-restaurant-cafe" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1c1917"/>
|
||||
<stop offset="100%" style="stop-color:#b45309"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-restaurant-cafe)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="60" height="12" rx="3" fill="#b45309" opacity="0.8"/>
|
||||
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<rect x="330" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<!-- Hero text lines -->
|
||||
<rect x="40" y="70" width="200" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
|
||||
<rect x="40" y="96" width="160" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<rect x="40" y="112" width="180" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- CTA button -->
|
||||
<rect x="40" y="136" width="100" height="28" rx="6" fill="#b45309"/>
|
||||
<!-- Content blocks -->
|
||||
<rect x="40" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="150" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="260" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<!-- Accent circle -->
|
||||
<circle cx="340" cy="90" r="40" fill="#fef3c7" opacity="0.15"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
26
templates/thumbnails/resume-cv.svg
Normal file
26
templates/thumbnails/resume-cv.svg
Normal file
@@ -0,0 +1,26 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-resume-cv" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e293b"/>
|
||||
<stop offset="100%" style="stop-color:#2563eb"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-resume-cv)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="60" height="12" rx="3" fill="#2563eb" opacity="0.8"/>
|
||||
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<rect x="330" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<!-- Hero text lines -->
|
||||
<rect x="40" y="70" width="200" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
|
||||
<rect x="40" y="96" width="160" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<rect x="40" y="112" width="180" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- CTA button -->
|
||||
<rect x="40" y="136" width="100" height="28" rx="6" fill="#2563eb"/>
|
||||
<!-- Content blocks -->
|
||||
<rect x="40" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="150" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<rect x="260" y="185" width="100" height="50" rx="6" fill="rgba(255,255,255,0.08)"/>
|
||||
<!-- Accent circle -->
|
||||
<circle cx="340" cy="90" r="40" fill="#f1f5f9" opacity="0.15"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Reference in New Issue
Block a user