cloud-hosting-platform/site-builder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a71b58c2c7a69b1ff8f27ef9497e3a27df758f91
site-builder/templates/event-conference.html

180 lines
16 KiB
HTML
Raw Normal View History

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>
2026-02-28 19:25:42 +00:00
<!-- 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>
Reference in New Issue Copy Permalink