Add templates, tests, and miscellaneous project files

Includes new page templates (fitness-gym, nonprofit, online-course,
photography-studio, real-estate, startup-company, travel-blog,
wedding-invitation) with thumbnail SVGs, test specs, documentation
files, and minor updates to index.html, router.php, and playwright config.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-01 14:15:58 -08:00
parent 03f573b451
commit b511a6684d
61 changed files with 6919 additions and 6 deletions

View File

@@ -0,0 +1,59 @@
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background-color:#1c1917;position:sticky;top:0;z-index:100;">
<a href="#" style="font-family:'Playfair Display',serif;font-size:24px;color:#d4a574;text-decoration:none;font-weight:700;letter-spacing:1px;">Lens & Light Studio</a>
<div style="display:flex;gap:32px;align-items:center;">
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Gallery</a>
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">About</a>
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Contact</a>
</div>
</nav>
<section style="padding:100px 60px;background-color:#fafaf9;">
<div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;">
<div>
<img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?w=600" alt="Elena Morales, photographer" style="width:100%;height:600px;object-fit:cover;display:block;">
</div>
<div>
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#d4a574;text-transform:uppercase;letter-spacing:3px;margin-bottom:12px;">About the Artist</p>
<h1 style="font-family:'Playfair Display',serif;font-size:48px;color:#1c1917;margin:0 0 24px 0;font-weight:700;">Elena Morales</h1>
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#57534e;line-height:1.8;margin:0 0 20px 0;">Photography found me before I found it. Growing up in a small coastal town, I was captivated by the way light danced on the ocean at golden hour. At sixteen, I picked up my first camera and never looked back.</p>
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#57534e;line-height:1.8;margin:0 0 20px 0;">After studying fine art photography at Parsons, I spent years traveling and documenting stories around the world. Today, I bring that same sense of wonder and authentic storytelling to every session.</p>
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#57534e;line-height:1.8;margin:0;">I believe that the most powerful photographs are the ones that feel true -- unscripted, unhurried, and deeply human. My goal is to make every client feel at ease so that what shines through is entirely, beautifully them.</p>
</div>
</div>
</section>
<section style="padding:80px 60px;background-color:#1c1917;">
<div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center;">
<div>
<p style="font-family:'Playfair Display',serif;font-size:48px;color:#d4a574;margin:0 0 8px 0;font-weight:700;">12+</p>
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#a8a29e;text-transform:uppercase;letter-spacing:2px;margin:0;">Years Experience</p>
</div>
<div>
<p style="font-family:'Playfair Display',serif;font-size:48px;color:#d4a574;margin:0 0 8px 0;font-weight:700;">25K+</p>
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#a8a29e;text-transform:uppercase;letter-spacing:2px;margin:0;">Photos Delivered</p>
</div>
<div>
<p style="font-family:'Playfair Display',serif;font-size:48px;color:#d4a574;margin:0 0 8px 0;font-weight:700;">400+</p>
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#a8a29e;text-transform:uppercase;letter-spacing:2px;margin:0;">Happy Clients</p>
</div>
<div>
<p style="font-family:'Playfair Display',serif;font-size:48px;color:#d4a574;margin:0 0 8px 0;font-weight:700;">15</p>
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#a8a29e;text-transform:uppercase;letter-spacing:2px;margin:0;">Awards Won</p>
</div>
</div>
</section>
<section style="padding:100px 60px;background-color:#fafaf9;">
<div style="max-width:800px;margin:0 auto;text-align:center;">
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#d4a574;text-transform:uppercase;letter-spacing:3px;margin-bottom:12px;">My Approach</p>
<h2 style="font-family:'Playfair Display',serif;font-size:42px;color:#1c1917;margin:0 0 32px 0;">Style & Philosophy</h2>
<p style="font-family:'Inter',sans-serif;font-size:17px;color:#57534e;line-height:1.8;margin:0 0 24px 0;">My work lives at the intersection of documentary and fine art. I favor natural light, muted tones, and compositions that feel effortless. I shoot primarily with mirrorless cameras and a collection of prime lenses that let me work quietly and move freely.</p>
<p style="font-family:'Inter',sans-serif;font-size:17px;color:#57534e;line-height:1.8;margin:0;">Every session begins with a conversation -- not about poses or props, but about what matters most to you. I want to understand the feeling you're after so the images we create together carry meaning long after the moment has passed.</p>
</div>
</section>
<footer style="padding:48px 60px;background-color:#0c0a09;text-align:center;">
<p style="font-family:'Playfair Display',serif;font-size:20px;color:#d4a574;margin:0 0 8px 0;">Lens & Light Studio</p>
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#78716c;margin:0 0 4px 0;">123 Artisan Way, Brooklyn, NY 11201</p>
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#57534e;margin:16px 0 0 0;">&copy; 2026 Lens & Light Studio. All rights reserved.</p>
</footer>

View File

@@ -0,0 +1,85 @@
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background-color:#1c1917;position:sticky;top:0;z-index:100;">
<a href="#" style="font-family:'Playfair Display',serif;font-size:24px;color:#d4a574;text-decoration:none;font-weight:700;letter-spacing:1px;">Lens & Light Studio</a>
<div style="display:flex;gap:32px;align-items:center;">
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Gallery</a>
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">About</a>
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Contact</a>
</div>
</nav>
<section style="padding:80px 60px;background-color:#1c1917;text-align:center;">
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#d4a574;text-transform:uppercase;letter-spacing:4px;margin-bottom:16px;">Get in Touch</p>
<h1 style="font-family:'Playfair Display',serif;font-size:56px;color:#fafaf9;margin:0 0 16px 0;font-weight:700;">Contact Us</h1>
<p style="font-family:'Inter',sans-serif;font-size:17px;color:#a8a29e;max-width:520px;margin:0 auto;line-height:1.7;">Ready to book a session or have questions? We'd love to hear from you.</p>
</section>
<section style="padding:80px 60px;background-color:#fafaf9;">
<div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;">
<div>
<h2 style="font-family:'Playfair Display',serif;font-size:32px;color:#1c1917;margin:0 0 32px 0;">Studio Information</h2>
<div style="margin-bottom:28px;">
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#d4a574;text-transform:uppercase;letter-spacing:2px;margin:0 0 6px 0;">Email</p>
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#44403c;margin:0;">hello@lensandlight.studio</p>
</div>
<div style="margin-bottom:28px;">
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#d4a574;text-transform:uppercase;letter-spacing:2px;margin:0 0 6px 0;">Phone</p>
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#44403c;margin:0;">(718) 555-0192</p>
</div>
<div style="margin-bottom:28px;">
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#d4a574;text-transform:uppercase;letter-spacing:2px;margin:0 0 6px 0;">Location</p>
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#44403c;margin:0;">123 Artisan Way, Suite 4B<br>Brooklyn, NY 11201</p>
</div>
<div>
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#d4a574;text-transform:uppercase;letter-spacing:2px;margin:0 0 6px 0;">Studio Hours</p>
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#44403c;margin:0;">Mon - Fri: 9:00 AM - 6:00 PM<br>Sat: 10:00 AM - 4:00 PM<br>Sun: By appointment only</p>
</div>
</div>
<div>
<h2 style="font-family:'Playfair Display',serif;font-size:32px;color:#1c1917;margin:0 0 32px 0;">Send a Message</h2>
<form style="display:flex;flex-direction:column;gap:20px;">
<div>
<label style="font-family:'Inter',sans-serif;font-size:13px;color:#78716c;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:6px;">Your Name</label>
<input type="text" placeholder="Full name" style="width:100%;padding:14px 16px;font-family:'Inter',sans-serif;font-size:15px;border:1px solid #d6d3d1;background-color:#ffffff;color:#1c1917;box-sizing:border-box;outline:none;">
</div>
<div>
<label style="font-family:'Inter',sans-serif;font-size:13px;color:#78716c;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:6px;">Email Address</label>
<input type="email" placeholder="your@email.com" style="width:100%;padding:14px 16px;font-family:'Inter',sans-serif;font-size:15px;border:1px solid #d6d3d1;background-color:#ffffff;color:#1c1917;box-sizing:border-box;outline:none;">
</div>
<div>
<label style="font-family:'Inter',sans-serif;font-size:13px;color:#78716c;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:6px;">Event Type</label>
<select style="width:100%;padding:14px 16px;font-family:'Inter',sans-serif;font-size:15px;border:1px solid #d6d3d1;background-color:#ffffff;color:#1c1917;box-sizing:border-box;outline:none;appearance:auto;">
<option value="">Select an option</option>
<option value="wedding">Wedding</option>
<option value="portrait">Portrait Session</option>
<option value="family">Family Session</option>
<option value="commercial">Commercial / Product</option>
<option value="event">Event Coverage</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label style="font-family:'Inter',sans-serif;font-size:13px;color:#78716c;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:6px;">Message</label>
<textarea rows="5" placeholder="Tell us about your project, preferred dates, and any details..." style="width:100%;padding:14px 16px;font-family:'Inter',sans-serif;font-size:15px;border:1px solid #d6d3d1;background-color:#ffffff;color:#1c1917;box-sizing:border-box;outline:none;resize:vertical;"></textarea>
</div>
<button type="submit" style="padding:16px 32px;background-color:#d4a574;color:#1c1917;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:2px;border:none;cursor:pointer;align-self:flex-start;">Send Message</button>
</form>
</div>
</div>
</section>
<section style="padding:0 60px 80px 60px;background-color:#fafaf9;">
<div style="max-width:1100px;margin:0 auto;">
<div style="background-color:#e7e5e4;height:360px;display:flex;align-items:center;justify-content:center;">
<div style="text-align:center;">
<p style="font-family:'Playfair Display',serif;font-size:28px;color:#78716c;margin:0 0 8px 0;">Studio Location</p>
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#a8a29e;margin:0;">123 Artisan Way, Brooklyn, NY 11201</p>
</div>
</div>
</div>
</section>
<footer style="padding:48px 60px;background-color:#0c0a09;text-align:center;">
<p style="font-family:'Playfair Display',serif;font-size:20px;color:#d4a574;margin:0 0 8px 0;">Lens & Light Studio</p>
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#78716c;margin:0 0 4px 0;">123 Artisan Way, Brooklyn, NY 11201</p>
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#57534e;margin:16px 0 0 0;">&copy; 2026 Lens & Light Studio. All rights reserved.</p>
</footer>

View File

@@ -0,0 +1,60 @@
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background-color:#1c1917;position:sticky;top:0;z-index:100;">
<a href="#" style="font-family:'Playfair Display',serif;font-size:24px;color:#d4a574;text-decoration:none;font-weight:700;letter-spacing:1px;">Lens & Light Studio</a>
<div style="display:flex;gap:32px;align-items:center;">
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Gallery</a>
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">About</a>
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Contact</a>
</div>
</nav>
<section style="padding:80px 60px;background-color:#1c1917;text-align:center;">
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#d4a574;text-transform:uppercase;letter-spacing:4px;margin-bottom:16px;">Our Work</p>
<h1 style="font-family:'Playfair Display',serif;font-size:56px;color:#fafaf9;margin:0 0 16px 0;font-weight:700;">Portfolio</h1>
<p style="font-family:'Inter',sans-serif;font-size:17px;color:#a8a29e;max-width:560px;margin:0 auto;line-height:1.7;">A curated selection of our favorite moments, captured across weddings, portraits, and editorial projects.</p>
</section>
<section style="padding:60px;background-color:#fafaf9;">
<div style="max-width:1200px;margin:0 auto;columns:3;column-gap:20px;">
<div style="break-inside:avoid;margin-bottom:20px;">
<img src="https://images.unsplash.com/photo-1519741497674-611481863552?w=600" alt="Wedding couple at sunset" style="width:100%;display:block;height:450px;object-fit:cover;">
</div>
<div style="break-inside:avoid;margin-bottom:20px;">
<img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=600" alt="Portrait in natural light" style="width:100%;display:block;height:300px;object-fit:cover;">
</div>
<div style="break-inside:avoid;margin-bottom:20px;">
<img src="https://images.unsplash.com/photo-1505939374277-2b0ecd010614?w=600" alt="Mountain landscape" style="width:100%;display:block;height:380px;object-fit:cover;">
</div>
<div style="break-inside:avoid;margin-bottom:20px;">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600" alt="Professional headshot" style="width:100%;display:block;height:340px;object-fit:cover;">
</div>
<div style="break-inside:avoid;margin-bottom:20px;">
<img src="https://images.unsplash.com/photo-1537633552985-df8429e8048b?w=600" alt="Wedding ceremony details" style="width:100%;display:block;height:420px;object-fit:cover;">
</div>
<div style="break-inside:avoid;margin-bottom:20px;">
<img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=600" alt="Product photography" style="width:100%;display:block;height:280px;object-fit:cover;">
</div>
<div style="break-inside:avoid;margin-bottom:20px;">
<img src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=600" alt="Wedding reception dance" style="width:100%;display:block;height:360px;object-fit:cover;">
</div>
<div style="break-inside:avoid;margin-bottom:20px;">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=600" alt="Studio portrait" style="width:100%;display:block;height:440px;object-fit:cover;">
</div>
<div style="break-inside:avoid;margin-bottom:20px;">
<img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600" alt="Golden hour landscape" style="width:100%;display:block;height:320px;object-fit:cover;">
</div>
</div>
</section>
<section style="padding:100px 60px;background-color:#1c1917;text-align:center;">
<div style="max-width:600px;margin:0 auto;">
<h2 style="font-family:'Playfair Display',serif;font-size:38px;color:#fafaf9;margin:0 0 16px 0;">Like What You See?</h2>
<p style="font-family:'Inter',sans-serif;font-size:17px;color:#a8a29e;line-height:1.7;margin-bottom:36px;">We'd love to hear about your project. Let's discuss how we can create something extraordinary together.</p>
<a href="#" style="display:inline-block;padding:16px 48px;background-color:#d4a574;color:#1c1917;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;text-decoration:none;text-transform:uppercase;letter-spacing:2px;">Contact Us</a>
</div>
</section>
<footer style="padding:48px 60px;background-color:#0c0a09;text-align:center;">
<p style="font-family:'Playfair Display',serif;font-size:20px;color:#d4a574;margin:0 0 8px 0;">Lens & Light Studio</p>
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#78716c;margin:0 0 4px 0;">123 Artisan Way, Brooklyn, NY 11201</p>
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#57534e;margin:16px 0 0 0;">&copy; 2026 Lens & Light Studio. All rights reserved.</p>
</footer>

View File

@@ -0,0 +1,80 @@
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background-color:#1c1917;position:sticky;top:0;z-index:100;">
<a href="#" style="font-family:'Playfair Display',serif;font-size:24px;color:#d4a574;text-decoration:none;font-weight:700;letter-spacing:1px;">Lens & Light Studio</a>
<div style="display:flex;gap:32px;align-items:center;">
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Gallery</a>
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">About</a>
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Contact</a>
</div>
</nav>
<section style="position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;background-image:url('https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=1600');background-size:cover;background-position:center;">
<div style="position:absolute;inset:0;background:linear-gradient(to bottom,rgba(28,25,23,0.7),rgba(28,25,23,0.85));"></div>
<div style="position:relative;text-align:center;max-width:800px;padding:40px 20px;">
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#d4a574;text-transform:uppercase;letter-spacing:4px;margin-bottom:24px;">Welcome to Our Studio</p>
<h1 style="font-family:'Playfair Display',serif;font-size:64px;color:#fafaf9;line-height:1.15;margin:0 0 24px 0;font-weight:700;">Capturing Life's Beautiful Moments</h1>
<p style="font-family:'Inter',sans-serif;font-size:18px;color:#d6d3d1;line-height:1.7;margin-bottom:40px;">We specialize in turning fleeting moments into timeless works of art. Every frame tells a story worth remembering.</p>
<a href="#" style="display:inline-block;padding:16px 48px;background-color:#d4a574;color:#1c1917;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;text-decoration:none;text-transform:uppercase;letter-spacing:2px;transition:background 0.3s;">View Portfolio</a>
</div>
</section>
<section style="padding:100px 60px;background-color:#fafaf9;">
<div style="max-width:1200px;margin:0 auto;text-align:center;">
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#d4a574;text-transform:uppercase;letter-spacing:3px;margin-bottom:12px;">What We Do</p>
<h2 style="font-family:'Playfair Display',serif;font-size:42px;color:#1c1917;margin:0 0 60px 0;">Our Services</h2>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:40px;">
<div style="padding:48px 32px;background-color:#ffffff;border:1px solid #e7e5e4;text-align:center;">
<h3 style="font-family:'Playfair Display',serif;font-size:24px;color:#1c1917;margin:0 0 16px 0;">Weddings</h3>
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#78716c;line-height:1.7;margin:0;">From intimate elopements to grand celebrations, we capture every tender moment of your special day with an artistic eye.</p>
</div>
<div style="padding:48px 32px;background-color:#ffffff;border:1px solid #e7e5e4;text-align:center;">
<h3 style="font-family:'Playfair Display',serif;font-size:24px;color:#1c1917;margin:0 0 16px 0;">Portraits</h3>
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#78716c;line-height:1.7;margin:0;">Individual, family, or professional headshots crafted with natural light and genuine expression to reveal your true self.</p>
</div>
<div style="padding:48px 32px;background-color:#ffffff;border:1px solid #e7e5e4;text-align:center;">
<h3 style="font-family:'Playfair Display',serif;font-size:24px;color:#1c1917;margin:0 0 16px 0;">Commercial</h3>
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#78716c;line-height:1.7;margin:0;">Product, brand, and editorial photography that elevates your business and tells your brand story with visual impact.</p>
</div>
</div>
</div>
</section>
<section style="padding:100px 60px;background-color:#1c1917;">
<div style="max-width:1200px;margin:0 auto;text-align:center;">
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#d4a574;text-transform:uppercase;letter-spacing:3px;margin-bottom:12px;">Portfolio</p>
<h2 style="font-family:'Playfair Display',serif;font-size:42px;color:#fafaf9;margin:0 0 60px 0;">Featured Work</h2>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;">
<div style="overflow:hidden;">
<img src="https://images.unsplash.com/photo-1519741497674-611481863552?w=600" alt="Wedding photo" style="width:100%;height:320px;object-fit:cover;display:block;">
</div>
<div style="overflow:hidden;">
<img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=600" alt="Portrait photo" style="width:100%;height:320px;object-fit:cover;display:block;">
</div>
<div style="overflow:hidden;">
<img src="https://images.unsplash.com/photo-1505939374277-2b0ecd010614?w=600" alt="Landscape photo" style="width:100%;height:320px;object-fit:cover;display:block;">
</div>
<div style="overflow:hidden;">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600" alt="Portrait session" style="width:100%;height:320px;object-fit:cover;display:block;">
</div>
<div style="overflow:hidden;">
<img src="https://images.unsplash.com/photo-1537633552985-df8429e8048b?w=600" alt="Wedding ceremony" style="width:100%;height:320px;object-fit:cover;display:block;">
</div>
<div style="overflow:hidden;">
<img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=600" alt="Commercial shoot" style="width:100%;height:320px;object-fit:cover;display:block;">
</div>
</div>
</div>
</section>
<section style="padding:100px 60px;background:linear-gradient(135deg,#292524,#1c1917);text-align:center;">
<div style="max-width:700px;margin:0 auto;">
<h2 style="font-family:'Playfair Display',serif;font-size:42px;color:#fafaf9;margin:0 0 20px 0;">Let's Create Something Beautiful</h2>
<p style="font-family:'Inter',sans-serif;font-size:17px;color:#a8a29e;line-height:1.7;margin-bottom:40px;">Every great image begins with a conversation. Tell us about your vision and let's bring it to life together.</p>
<a href="#" style="display:inline-block;padding:16px 48px;background-color:#d4a574;color:#1c1917;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;text-decoration:none;text-transform:uppercase;letter-spacing:2px;">Get in Touch</a>
</div>
</section>
<footer style="padding:48px 60px;background-color:#0c0a09;text-align:center;">
<p style="font-family:'Playfair Display',serif;font-size:20px;color:#d4a574;margin:0 0 8px 0;">Lens & Light Studio</p>
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#78716c;margin:0 0 4px 0;">123 Artisan Way, Brooklyn, NY 11201</p>
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#57534e;margin:16px 0 0 0;">&copy; 2026 Lens & Light Studio. All rights reserved.</p>
</footer>