Intial Phase Of Website Development
This commit is contained in:
parent
e00835f523
commit
631c79eade
253
about.html
Normal file
253
about.html
Normal file
@ -0,0 +1,253 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Learn about Venus Photo Studio And Lab, a trusted photography studio and photo lab in Karaikal known for quality photos, wedding albums, videography, and fast service.">
|
||||||
|
<title>About Venus Photo Studio And Lab | Karaikal Photography Studio</title>
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<meta name="keywords" content="Venus Photo Studio And Lab, Karaikal photography studio, photography studio in Karaikal, wedding photographer Karaikal, photo lab Karaikal, candid photography, videography, album design">
|
||||||
|
<link rel="canonical" href="/about">
|
||||||
|
<meta property="og:site_name" content="Venus Photo Studio And Lab">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:title" content="About Venus Photo Studio And Lab | Karaikal Photography Studio">
|
||||||
|
<meta property="og:description" content="Learn about Venus Photo Studio And Lab, a trusted photography studio and photo lab in Karaikal known for quality photos, wedding albums, videography, and fast service.">
|
||||||
|
<meta property="og:url" content="/about">
|
||||||
|
<meta property="og:image" content="/assets/images/logo/venus-monogram.jpg">
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="twitter:title" content="About Venus Photo Studio And Lab | Karaikal Photography Studio">
|
||||||
|
<meta name="twitter:description" content="Learn about Venus Photo Studio And Lab, a trusted photography studio and photo lab in Karaikal known for quality photos, wedding albums, videography, and fast service.">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link rel="preconnect" href="https://images.unsplash.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
window.tailwind = window.tailwind || {};
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
night: "#0B0B0B",
|
||||||
|
gold: "#D4AF37",
|
||||||
|
ivory: "#F7F2E8",
|
||||||
|
aubergine: "#241424"
|
||||||
|
},
|
||||||
|
maxWidth: {
|
||||||
|
content: "1180px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="assets/css/style.css">
|
||||||
|
</head>`
|
||||||
|
<body class="site-shell" data-page="about">
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="mx-auto flex h-20 max-w-content items-center justify-between px-5 lg:px-8">
|
||||||
|
<a href="/" class="flex items-center gap-3" aria-label="Venus Photo Studio And Lab home">
|
||||||
|
<img src="assets/images/logo/venus-monogram.jpg" class="h-11 w-11" alt="" width="44" height="44">
|
||||||
|
<span class="leading-tight">
|
||||||
|
<span class="block font-display text-lg font-bold text-white sm:text-xl">Venus Photo Studio</span>
|
||||||
|
<span class="block text-[0.62rem] font-bold uppercase tracking-[0.18em] text-gold">And Lab | Photography & Film</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<nav class="hidden items-center gap-8 lg:flex" aria-label="Primary navigation">
|
||||||
|
<a href="/" class="nav-link text-sm font-semibold" data-nav="home">Home</a>
|
||||||
|
<a href="/about" class="nav-link text-sm font-semibold" data-nav="about">About</a>
|
||||||
|
<a href="/gallery" class="nav-link text-sm font-semibold" data-nav="gallery">Gallery</a>
|
||||||
|
<a href="/services" class="nav-link text-sm font-semibold" data-nav="services">Services</a>
|
||||||
|
<a href="/contact" class="nav-link text-sm font-semibold" data-nav="contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
<div class="hidden items-center gap-3 lg:flex">
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="ghost-button">
|
||||||
|
<i data-lucide="instagram" class="h-4 w-4"></i>
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<button class="grid h-11 w-11 place-items-center border border-white/15 text-white lg:hidden" type="button" data-menu-toggle aria-expanded="false" aria-label="Open navigation">
|
||||||
|
<i data-menu-icon data-lucide="menu" class="h-5 w-5"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-panel border-t border-white/10 bg-night/95 lg:hidden" data-mobile-panel>
|
||||||
|
<nav class="mx-auto grid max-w-content gap-1 px-5 py-5" aria-label="Mobile navigation">
|
||||||
|
<a href="/" class="nav-link py-3 text-base font-semibold" data-nav="home">Home</a>
|
||||||
|
<a href="/about" class="nav-link py-3 text-base font-semibold" data-nav="about">About</a>
|
||||||
|
<a href="/gallery" class="nav-link py-3 text-base font-semibold" data-nav="gallery">Gallery</a>
|
||||||
|
<a href="/services" class="nav-link py-3 text-base font-semibold" data-nav="services">Services</a>
|
||||||
|
<a href="/contact" class="nav-link py-3 text-base font-semibold" data-nav="contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="cinematic-hero hero-about relative flex items-center bg-cover bg-center pt-28">
|
||||||
|
<div class="relative mx-auto w-full max-w-content px-5 py-16 lg:px-8">
|
||||||
|
<div class="max-w-4xl">
|
||||||
|
<span class="section-kicker reveal-text">About Venus Photo Studio And Lab</span>
|
||||||
|
<h1 class="reveal-text mt-6 font-display text-5xl font-bold leading-tight text-white sm:text-6xl lg:text-7xl">Cinematic craft with a calm, human touch.</h1>
|
||||||
|
<p class="reveal-text mt-6 max-w-2xl text-base leading-8 text-white/74 sm:text-lg">From Karaikal weddings to intimate family portraits, the studio is built around direction that feels natural, lighting that feels premium, and storytelling that ages beautifully.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="hero-scroll" aria-hidden="true"></span>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mx-auto grid max-w-content gap-10 px-5 py-20 lg:grid-cols-[0.9fr_1.1fr] lg:px-8 lg:py-28">
|
||||||
|
<div class="flex flex-col justify-center" data-aos="fade-right">
|
||||||
|
<span class="section-kicker">Studio Introduction</span>
|
||||||
|
<h2 class="mt-4 font-display text-4xl font-bold text-white sm:text-5xl">A visual studio for people who want the day to feel as good as it looks.</h2>
|
||||||
|
<p class="mt-6 leading-8 text-white/68">Venus Photo Studio And Lab focuses on weddings, couple shoots, maternity, baby portraits, event coverage, album design, and reels. Every project is treated as a story with rhythm: quiet prep, emotional ceremony, composed portraits, celebration, and legacy.</p>
|
||||||
|
<p class="mt-5 leading-8 text-white/68">The result is a gallery that feels rich without feeling loud, polished without losing warmth, and cinematic without turning real moments into performance.</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-4 sm:grid-cols-2" data-aos="fade-left">
|
||||||
|
<div class="image-frame min-h-[28rem] sm:mt-14">
|
||||||
|
<img class="parallax-img h-full" src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?auto=format&fit=crop&w=900&q=82" alt="Professional camera on a studio table" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="image-frame min-h-[28rem]">
|
||||||
|
<img class="parallax-img h-full" src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=900&q=82" alt="Camera lens with premium lighting" loading="lazy">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="border-y border-white/10 bg-white/[0.035]">
|
||||||
|
<div class="mx-auto grid max-w-content gap-10 px-5 py-20 lg:grid-cols-[1.05fr_0.95fr] lg:px-8 lg:py-28">
|
||||||
|
<div class="image-frame min-h-[34rem]" data-aos="fade-right">
|
||||||
|
<img class="parallax-img h-full" src="https://images.unsplash.com/photo-1552168324-d612d77725e3?auto=format&fit=crop&w=1100&q=82" alt="Photographer working with professional camera gear" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-center" data-aos="fade-left">
|
||||||
|
<span class="section-kicker">Photographer Details</span>
|
||||||
|
<h2 class="mt-4 font-display text-4xl font-bold text-white sm:text-5xl">Experienced direction for real people, real families, and real celebrations.</h2>
|
||||||
|
<p class="mt-6 leading-8 text-white/68">The creative team brings together event awareness, portrait posing, lighting discipline, and film sequencing. The focus is simple: make people comfortable, read the emotion in the room, and keep the final work refined.</p>
|
||||||
|
<div class="mt-8 grid gap-4 sm:grid-cols-2">
|
||||||
|
<div class="lux-card p-6">
|
||||||
|
<i data-lucide="aperture" class="h-6 w-6 text-gold"></i>
|
||||||
|
<h3 class="mt-5 font-display text-2xl font-bold">Photography</h3>
|
||||||
|
<p class="mt-3 text-sm leading-7 text-white/62">Candid, traditional, portrait, and family-led visual coverage.</p>
|
||||||
|
</div>
|
||||||
|
<div class="lux-card p-6">
|
||||||
|
<i data-lucide="film" class="h-6 w-6 text-gold"></i>
|
||||||
|
<h3 class="mt-5 font-display text-2xl font-bold">Videography</h3>
|
||||||
|
<p class="mt-3 text-sm leading-7 text-white/62">Cinematic trailers, reels, and long-form celebration films.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mx-auto max-w-content px-5 py-20 lg:px-8 lg:py-28">
|
||||||
|
<div class="mb-10 max-w-3xl" data-aos="fade-up">
|
||||||
|
<span class="section-kicker">Mission & Vision</span>
|
||||||
|
<h2 class="mt-4 font-display text-4xl font-bold text-white sm:text-5xl">Preserve personal history with a luxury visual language.</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-5 md:grid-cols-3">
|
||||||
|
<article class="lux-card p-7" data-aos="fade-up">
|
||||||
|
<i data-lucide="sparkles" class="h-7 w-7 text-gold"></i>
|
||||||
|
<h3 class="mt-8 font-display text-2xl font-bold">Mission</h3>
|
||||||
|
<p class="mt-4 text-sm leading-7 text-white/64">Create emotionally honest images and films with premium composition, reliable coverage, and respectful client direction.</p>
|
||||||
|
</article>
|
||||||
|
<article class="lux-card p-7" data-aos="fade-up" data-aos-delay="90">
|
||||||
|
<i data-lucide="telescope" class="h-7 w-7 text-gold"></i>
|
||||||
|
<h3 class="mt-8 font-display text-2xl font-bold">Vision</h3>
|
||||||
|
<p class="mt-4 text-sm leading-7 text-white/64">Become a trusted Karaikal studio known for cinematic wedding stories, polished portraits, and heirloom albums.</p>
|
||||||
|
</article>
|
||||||
|
<article class="lux-card p-7" data-aos="fade-up" data-aos-delay="180">
|
||||||
|
<i data-lucide="palette" class="h-7 w-7 text-gold"></i>
|
||||||
|
<h3 class="mt-8 font-display text-2xl font-bold">Creative Approach</h3>
|
||||||
|
<p class="mt-4 text-sm leading-7 text-white/64">Blend documentary timing with refined art direction so each gallery feels natural, graceful, and visually cohesive.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="border-y border-white/10 bg-black/40">
|
||||||
|
<div class="mx-auto max-w-content px-5 py-20 lg:px-8 lg:py-28">
|
||||||
|
<div class="grid gap-10 lg:grid-cols-[0.8fr_1.2fr]">
|
||||||
|
<div data-aos="fade-right">
|
||||||
|
<span class="section-kicker">Experience</span>
|
||||||
|
<h2 class="mt-4 font-display text-4xl font-bold text-white sm:text-5xl">Designed around calm execution.</h2>
|
||||||
|
<p class="mt-6 leading-8 text-white/68">From the first enquiry to delivery, the process is clear, considerate, and built for busy families.</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-4">
|
||||||
|
<div class="lux-card grid gap-4 p-6 sm:grid-cols-[4rem_1fr]" data-aos="fade-up">
|
||||||
|
<span class="font-display text-4xl text-gold">01</span>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-display text-2xl font-bold">Creative Consultation</h3>
|
||||||
|
<p class="mt-2 text-sm leading-7 text-white/62">Discuss the event flow, family priorities, style references, deliverables, and must-have moments.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lux-card grid gap-4 p-6 sm:grid-cols-[4rem_1fr]" data-aos="fade-up" data-aos-delay="100">
|
||||||
|
<span class="font-display text-4xl text-gold">02</span>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-display text-2xl font-bold">Shoot Direction</h3>
|
||||||
|
<p class="mt-2 text-sm leading-7 text-white/62">Guide portraits and key frames while staying attentive to candid moments and family comfort.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lux-card grid gap-4 p-6 sm:grid-cols-[4rem_1fr]" data-aos="fade-up" data-aos-delay="200">
|
||||||
|
<span class="font-display text-4xl text-gold">03</span>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-display text-2xl font-bold">Edit & Delivery</h3>
|
||||||
|
<p class="mt-2 text-sm leading-7 text-white/62">Color grading, retouching, album sequencing, and final delivery prepared for sharing and archiving.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mx-auto max-w-content px-5 py-20 lg:px-8 lg:py-28">
|
||||||
|
<div class="grid items-center gap-10 lg:grid-cols-[1fr_0.9fr]">
|
||||||
|
<div data-aos="fade-right">
|
||||||
|
<span class="section-kicker">Ready When You Are</span>
|
||||||
|
<h2 class="mt-4 font-display text-4xl font-bold text-white sm:text-5xl">Tell us the date. We will help shape the story.</h2>
|
||||||
|
<p class="mt-5 max-w-2xl leading-8 text-white/68">Share your event type, venue, guest flow, and dream visual tone. The studio can recommend coverage that fits the moment.</p>
|
||||||
|
<a href="/contact" class="lux-button mt-8">
|
||||||
|
<i data-lucide="calendar-check" class="h-4 w-4"></i>
|
||||||
|
Book Consultation
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="image-frame min-h-[26rem]" data-aos="fade-left">
|
||||||
|
<img class="h-full" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=1000&q=82" alt="Premium wedding reception table decor" loading="lazy">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="border-t border-white/10 bg-black/70">
|
||||||
|
<div class="mx-auto grid max-w-content gap-10 px-5 py-12 md:grid-cols-[1.2fr_0.8fr_0.8fr] lg:px-8">
|
||||||
|
<div>
|
||||||
|
<a href="/" class="flex items-center gap-3" aria-label="Venus Photo Studio And Lab home">
|
||||||
|
<img src="assets/images/logo/venus-monogram.jpg" class="h-11 w-11" alt="" width="44" height="44">
|
||||||
|
<span class="font-display text-2xl font-bold text-white">Venus Photo Studio And Lab</span>
|
||||||
|
</a>
|
||||||
|
<p class="mt-5 max-w-md leading-7 text-white/58">Premium photography and cinematic videography for weddings, portraits, family milestones, and events in Karaikal.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-bold uppercase tracking-[0.18em] text-gold">Studio</p>
|
||||||
|
<div class="mt-5 grid gap-3 text-sm text-white/64">
|
||||||
|
<a href="/about" class="hover:text-gold">About</a>
|
||||||
|
<a href="/gallery" class="hover:text-gold">Gallery</a>
|
||||||
|
<a href="/services" class="hover:text-gold">Services</a>
|
||||||
|
<a href="/contact" class="hover:text-gold">Contact</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-bold uppercase tracking-[0.18em] text-gold">Connect</p>
|
||||||
|
<div class="mt-5 grid gap-3 text-sm text-white/64">
|
||||||
|
<a href="tel:+919894041125" class="hover:text-gold">098940 41125</a>
|
||||||
|
<a href="https://wa.me/919894041125" target="_blank" rel="noopener" class="hover:text-gold">WhatsApp Enquiry</a>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="hover:text-gold">Instagram</a>
|
||||||
|
<span>Door no. 24, Kannadiyar St, Karaikal, Puducherry 609602</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/10 px-5 py-5 text-center text-xs font-semibold uppercase tracking-[0.16em] text-white/42">
|
||||||
|
© <span data-year></span> Venus Photo Studio And Lab. Crafted for timeless stories.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/lucide@latest"></script>
|
||||||
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||||
|
<script src="assets/js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
628
assets/css/style.css
Normal file
628
assets/css/style.css
Normal file
@ -0,0 +1,628 @@
|
|||||||
|
:root {
|
||||||
|
--black: #0b0b0b;
|
||||||
|
--black-soft: #111013;
|
||||||
|
--gold: #d4af37;
|
||||||
|
--gold-soft: #f1d783;
|
||||||
|
--white: #ffffff;
|
||||||
|
--muted: #b8b1aa;
|
||||||
|
--line: rgba(212, 175, 55, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--black);
|
||||||
|
color: var(--white);
|
||||||
|
font-family: "Montserrat", "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.menu-open {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: rgba(212, 175, 55, 0.45);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-display {
|
||||||
|
font-family: "Playfair Display", Georgia, serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-shell {
|
||||||
|
position: relative;
|
||||||
|
isolation: isolate;
|
||||||
|
min-height: 100vh;
|
||||||
|
background:
|
||||||
|
linear-gradient(118deg, transparent 0%, transparent 36%, rgba(73, 44, 112, 0.14) 46%, rgba(212, 175, 55, 0.08) 52%, transparent 65%, transparent 100%),
|
||||||
|
radial-gradient(ellipse at 18% -8%, rgba(212, 175, 55, 0.12), transparent 30rem),
|
||||||
|
radial-gradient(ellipse at 86% 18%, rgba(78, 45, 120, 0.16), transparent 28rem),
|
||||||
|
linear-gradient(135deg, #0b0b0b 0%, #151017 54%, #0b0b0b 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-shell::before,
|
||||||
|
.site-shell::after {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-shell::before {
|
||||||
|
z-index: 0;
|
||||||
|
opacity: 0.72;
|
||||||
|
background-image:
|
||||||
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='%23FFFFFF' opacity='.5'%3E%3Ccircle cx='44' cy='68' r='1.1'/%3E%3Ccircle cx='128' cy='42' r='.8'/%3E%3Ccircle cx='220' cy='96' r='1.2'/%3E%3Ccircle cx='344' cy='60' r='.9'/%3E%3Ccircle cx='472' cy='120' r='1.1'/%3E%3Ccircle cx='82' cy='220' r='.9'/%3E%3Ccircle cx='168' cy='300' r='1.3'/%3E%3Ccircle cx='286' cy='254' r='.8'/%3E%3Ccircle cx='424' cy='342' r='1.2'/%3E%3Ccircle cx='364' cy='456' r='.9'/%3E%3Ccircle cx='34' cy='438' r='1.1'/%3E%3C/g%3E%3Cg fill='%23D4AF37' opacity='.42'%3E%3Ccircle cx='392' cy='174' r='1.2'/%3E%3Ccircle cx='236' cy='392' r='1'/%3E%3Ccircle cx='486' cy='430' r='1'/%3E%3C/g%3E%3Cpath d='M44 68 128 42 220 96M286 254 392 174 472 120M168 300 236 392 364 456 486 430' fill='none' stroke='%23D4AF37' stroke-opacity='.13' stroke-width='1'/%3E%3C/svg%3E"),
|
||||||
|
radial-gradient(1px 1px at 12% 28%, rgba(255, 255, 255, 0.42), transparent 60%),
|
||||||
|
radial-gradient(1px 1px at 76% 46%, rgba(212, 175, 55, 0.36), transparent 60%),
|
||||||
|
radial-gradient(1px 1px at 42% 82%, rgba(255, 255, 255, 0.32), transparent 60%);
|
||||||
|
background-position: center top, 0 0, 0 0, 0 0;
|
||||||
|
background-size: 520px 520px, 240px 240px, 310px 310px, 380px 380px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-shell::after {
|
||||||
|
z-index: 0;
|
||||||
|
opacity: 0.42;
|
||||||
|
background:
|
||||||
|
linear-gradient(126deg, transparent 8%, rgba(46, 30, 76, 0.05) 30%, rgba(92, 58, 132, 0.18) 44%, rgba(212, 175, 55, 0.09) 52%, rgba(255, 255, 255, 0.035) 58%, transparent 76%),
|
||||||
|
repeating-linear-gradient(118deg, transparent 0 42px, rgba(212, 175, 55, 0.035) 43px, transparent 45px);
|
||||||
|
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 88%, transparent 100%);
|
||||||
|
mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 88%, transparent 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-shell > header,
|
||||||
|
.site-shell > main,
|
||||||
|
.site-shell > footer {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0 0 auto;
|
||||||
|
z-index: 50;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background: linear-gradient(180deg, rgba(11, 11, 11, 0.92), rgba(11, 11, 11, 0.42));
|
||||||
|
-webkit-backdrop-filter: blur(14px);
|
||||||
|
backdrop-filter: blur(14px);
|
||||||
|
transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header.is-scrolled {
|
||||||
|
background: rgba(11, 11, 11, 0.92);
|
||||||
|
border-color: rgba(212, 175, 55, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark {
|
||||||
|
width: 2.6rem;
|
||||||
|
height: 2.6rem;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
border: 1px solid rgba(212, 175, 55, 0.72);
|
||||||
|
color: var(--gold);
|
||||||
|
background: rgba(212, 175, 55, 0.08);
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
position: relative;
|
||||||
|
color: rgba(255, 255, 255, 0.74);
|
||||||
|
transition: color 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: -0.45rem;
|
||||||
|
height: 1px;
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: center;
|
||||||
|
background: var(--gold);
|
||||||
|
transition: transform 220ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover,
|
||||||
|
.nav-link.is-active {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover::after,
|
||||||
|
.nav-link.is-active::after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-panel {
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
transition: max-height 260ms ease, opacity 220ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-panel.is-open {
|
||||||
|
max-height: 26rem;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-home {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(90deg, rgba(11, 11, 11, 0.9), rgba(11, 11, 11, 0.48) 48%, rgba(11, 11, 11, 0.22)),
|
||||||
|
linear-gradient(180deg, rgba(11, 11, 11, 0.28), rgba(11, 11, 11, 0.95)),
|
||||||
|
url("https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=2200&q=82");
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-about {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(90deg, rgba(11, 11, 11, 0.86), rgba(11, 11, 11, 0.34)),
|
||||||
|
linear-gradient(180deg, rgba(11, 11, 11, 0.22), rgba(11, 11, 11, 0.96)),
|
||||||
|
url("https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?auto=format&fit=crop&w=2200&q=82");
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-gallery {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(90deg, rgba(11, 11, 11, 0.86), rgba(11, 11, 11, 0.36)),
|
||||||
|
linear-gradient(180deg, rgba(11, 11, 11, 0.2), rgba(11, 11, 11, 0.94)),
|
||||||
|
url("https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=2200&q=82");
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-services {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(90deg, rgba(11, 11, 11, 0.88), rgba(11, 11, 11, 0.38)),
|
||||||
|
linear-gradient(180deg, rgba(11, 11, 11, 0.22), rgba(11, 11, 11, 0.96)),
|
||||||
|
url("https://images.unsplash.com/photo-1520854221256-17451cc331bf?auto=format&fit=crop&w=2200&q=82");
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-contact {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(90deg, rgba(11, 11, 11, 0.88), rgba(11, 11, 11, 0.42)),
|
||||||
|
linear-gradient(180deg, rgba(11, 11, 11, 0.2), rgba(11, 11, 11, 0.96)),
|
||||||
|
url("https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?auto=format&fit=crop&w=2200&q=82");
|
||||||
|
}
|
||||||
|
|
||||||
|
.cinematic-hero {
|
||||||
|
min-height: 94svh;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
background-attachment: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.cinematic-hero {
|
||||||
|
min-height: 88svh;
|
||||||
|
background-attachment: scroll;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-kicker {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.65rem;
|
||||||
|
color: var(--gold-soft);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-kicker::before {
|
||||||
|
content: "";
|
||||||
|
width: 2rem;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gold-text {
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-gradient {
|
||||||
|
background: linear-gradient(100deg, #ffffff 0%, #f7e7ab 54%, #d4af37 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal-text {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(22px);
|
||||||
|
animation: revealUp 620ms ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes revealUp {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lux-button {
|
||||||
|
display: inline-flex;
|
||||||
|
min-height: 3rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
border: 1px solid rgba(212, 175, 55, 0.78);
|
||||||
|
background: linear-gradient(135deg, rgba(212, 175, 55, 0.94), rgba(241, 215, 131, 0.9));
|
||||||
|
color: #12100b;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.9rem 1.3rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
|
||||||
|
box-shadow: 0 18px 48px rgba(212, 175, 55, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lux-button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 24px 60px rgba(212, 175, 55, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ghost-button {
|
||||||
|
display: inline-flex;
|
||||||
|
min-height: 3rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
||||||
|
color: var(--white);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.9rem 1.3rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ghost-button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border-color: rgba(212, 175, 55, 0.74);
|
||||||
|
background: rgba(212, 175, 55, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-panel {
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
background: rgba(255, 255, 255, 0.055);
|
||||||
|
-webkit-backdrop-filter: blur(14px);
|
||||||
|
backdrop-filter: blur(14px);
|
||||||
|
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
|
||||||
|
}
|
||||||
|
|
||||||
|
main > section:not(:first-child) {
|
||||||
|
content-visibility: auto;
|
||||||
|
contain-intrinsic-size: 1px 820px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lux-card {
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
|
||||||
|
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lux-card:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
border-color: rgba(212, 175, 55, 0.42);
|
||||||
|
background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(255, 255, 255, 0.035));
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-frame {
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.11);
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(36, 20, 36, 0.42)),
|
||||||
|
#16120f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-frame img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transform: scale(1.005);
|
||||||
|
transition: transform 360ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-frame:hover img,
|
||||||
|
.gallery-card:hover img,
|
||||||
|
.service-card:hover img {
|
||||||
|
transform: scale(1.045);
|
||||||
|
}
|
||||||
|
|
||||||
|
.masonry-grid {
|
||||||
|
columns: 1;
|
||||||
|
column-gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.masonry-grid {
|
||||||
|
columns: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.masonry-grid {
|
||||||
|
columns: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-card {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(36, 20, 36, 0.42)),
|
||||||
|
#13100e;
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-card img {
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 360ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-card::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: auto 0 0;
|
||||||
|
height: 55%;
|
||||||
|
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-caption {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
left: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn {
|
||||||
|
min-height: 2.6rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||||
|
color: rgba(255, 255, 255, 0.72);
|
||||||
|
background: rgba(255, 255, 255, 0.035);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 0.65rem 1rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn:hover,
|
||||||
|
.filter-btn.is-active {
|
||||||
|
color: var(--black);
|
||||||
|
border-color: var(--gold);
|
||||||
|
background: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
|
||||||
|
transition: transform 180ms ease, border-color 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
border-color: rgba(212, 175, 55, 0.44);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card img {
|
||||||
|
width: 100%;
|
||||||
|
height: 15rem;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 360ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-field {
|
||||||
|
min-height: 3.25rem;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.13);
|
||||||
|
border-radius: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.055);
|
||||||
|
color: var(--white);
|
||||||
|
padding: 0.9rem 1rem;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 180ms ease, background 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-field:focus {
|
||||||
|
border-color: rgba(212, 175, 55, 0.72);
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-field::placeholder {
|
||||||
|
color: rgba(255, 255, 255, 0.42);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-frame {
|
||||||
|
min-height: 24rem;
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
filter: grayscale(1) invert(0.92) contrast(0.92);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 80;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox.is-open {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox img {
|
||||||
|
max-height: 82vh;
|
||||||
|
width: auto;
|
||||||
|
max-width: min(92vw, 74rem);
|
||||||
|
object-fit: contain;
|
||||||
|
border: 1px solid rgba(212, 175, 55, 0.32);
|
||||||
|
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox-close {
|
||||||
|
position: fixed;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
||||||
|
color: var(--white);
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.marquee-track {
|
||||||
|
display: flex;
|
||||||
|
width: max-content;
|
||||||
|
animation: marquee 30s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes marquee {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-scroll {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 2rem;
|
||||||
|
display: none;
|
||||||
|
width: 1px;
|
||||||
|
height: 5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-scroll::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
height: 45%;
|
||||||
|
background: var(--gold);
|
||||||
|
animation: scrollLine 1.8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.hero-scroll {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scrollLine {
|
||||||
|
0% {
|
||||||
|
transform: translateY(-120%);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(230%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
scroll-behavior: auto !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cinematic-hero {
|
||||||
|
background-attachment: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal-text {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-aos] {
|
||||||
|
opacity: 1 !important;
|
||||||
|
transform: none !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-shell::before {
|
||||||
|
opacity: 0.58;
|
||||||
|
background-size: 420px 420px, 260px 260px, 320px 320px, 380px 380px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-shell::after {
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
html {
|
||||||
|
scroll-behavior: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-frame:hover img,
|
||||||
|
.gallery-card:hover img,
|
||||||
|
.service-card:hover img,
|
||||||
|
.lux-card:hover,
|
||||||
|
.service-card:hover,
|
||||||
|
.lux-button:hover,
|
||||||
|
.ghost-button:hover {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marquee-track {
|
||||||
|
animation-duration: 48s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header,
|
||||||
|
.glass-panel {
|
||||||
|
-webkit-backdrop-filter: none;
|
||||||
|
backdrop-filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-aos] {
|
||||||
|
opacity: 1 !important;
|
||||||
|
transform: none !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
1
assets/fonts/.gitkeep
Normal file
1
assets/fonts/.gitkeep
Normal file
@ -0,0 +1 @@
|
|||||||
|
|
||||||
1
assets/images/gallery/.gitkeep
Normal file
1
assets/images/gallery/.gitkeep
Normal file
@ -0,0 +1 @@
|
|||||||
|
|
||||||
30
assets/images/gallery/studio-fallback.svg
Normal file
30
assets/images/gallery/studio-fallback.svg
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800" role="img" aria-labelledby="title desc">
|
||||||
|
<title id="title">Venus Photo Studio And Lab fallback image</title>
|
||||||
|
<desc id="desc">Luxury black and gold photography placeholder for unloaded gallery images.</desc>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="bg" x1="0" y1="0" x2="1200" y2="800" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0B0B0B"/>
|
||||||
|
<stop offset="0.48" stop-color="#211324"/>
|
||||||
|
<stop offset="1" stop-color="#0B0B0B"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="gold" x1="360" y1="180" x2="840" y2="620" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#FFF0B0"/>
|
||||||
|
<stop offset="0.45" stop-color="#D4AF37"/>
|
||||||
|
<stop offset="1" stop-color="#8F661D"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="1200" height="800" fill="url(#bg)"/>
|
||||||
|
<path d="M0 565 C210 485 360 602 560 514 C748 432 885 368 1200 450 V800 H0 Z" fill="#D4AF37" opacity="0.08"/>
|
||||||
|
<g fill="#FFFFFF" opacity="0.42">
|
||||||
|
<circle cx="92" cy="90" r="2"/>
|
||||||
|
<circle cx="270" cy="146" r="1.4"/>
|
||||||
|
<circle cx="1040" cy="112" r="1.8"/>
|
||||||
|
<circle cx="930" cy="292" r="1.2"/>
|
||||||
|
<circle cx="166" cy="640" r="1.5"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="600" cy="376" r="128" fill="none" stroke="url(#gold)" stroke-width="12"/>
|
||||||
|
<circle cx="600" cy="376" r="72" fill="none" stroke="#D4AF37" stroke-opacity="0.45" stroke-width="5"/>
|
||||||
|
<path d="M485 264 H528 L600 472 L672 264 H716 L621 542 H579 Z" fill="url(#gold)"/>
|
||||||
|
<text x="600" y="642" text-anchor="middle" fill="#D4AF37" font-family="Montserrat, Arial, sans-serif" font-size="30" font-weight="700">VENUS PHOTO STUDIO AND LAB</text>
|
||||||
|
<text x="600" y="686" text-anchor="middle" fill="#FFFFFF" opacity="0.62" font-family="Montserrat, Arial, sans-serif" font-size="18" font-weight="600">Photography | Videography | Photo Lab</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
1
assets/images/hero/.gitkeep
Normal file
1
assets/images/hero/.gitkeep
Normal file
@ -0,0 +1 @@
|
|||||||
|
|
||||||
BIN
assets/images/logo/venus-monogram.jpg
Normal file
BIN
assets/images/logo/venus-monogram.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
1
assets/images/services/.gitkeep
Normal file
1
assets/images/services/.gitkeep
Normal file
@ -0,0 +1 @@
|
|||||||
|
|
||||||
215
assets/js/app.js
Normal file
215
assets/js/app.js
Normal file
@ -0,0 +1,215 @@
|
|||||||
|
const qs = (selector, scope = document) => scope.querySelector(selector);
|
||||||
|
const qsa = (selector, scope = document) => [...scope.querySelectorAll(selector)];
|
||||||
|
|
||||||
|
const initHeader = () => {
|
||||||
|
const header = qs(".site-header");
|
||||||
|
const toggle = qs("[data-menu-toggle]");
|
||||||
|
const panel = qs("[data-mobile-panel]");
|
||||||
|
const page = document.body.dataset.page;
|
||||||
|
let scrollTicking = false;
|
||||||
|
|
||||||
|
if (page) {
|
||||||
|
qsa(`[data-nav="${page}"]`).forEach((link) => link.classList.add("is-active"));
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateHeader = () => {
|
||||||
|
if (!header) return;
|
||||||
|
header.classList.toggle("is-scrolled", window.scrollY > 24);
|
||||||
|
scrollTicking = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onScroll = () => {
|
||||||
|
if (scrollTicking) return;
|
||||||
|
scrollTicking = true;
|
||||||
|
window.requestAnimationFrame(updateHeader);
|
||||||
|
};
|
||||||
|
|
||||||
|
updateHeader();
|
||||||
|
window.addEventListener("scroll", onScroll, { passive: true });
|
||||||
|
|
||||||
|
if (toggle && panel) {
|
||||||
|
toggle.addEventListener("click", () => {
|
||||||
|
const isOpen = panel.classList.toggle("is-open");
|
||||||
|
document.body.classList.toggle("menu-open", isOpen);
|
||||||
|
toggle.setAttribute("aria-expanded", String(isOpen));
|
||||||
|
const icon = qs("[data-menu-icon]", toggle);
|
||||||
|
if (icon) icon.setAttribute("data-lucide", isOpen ? "x" : "menu");
|
||||||
|
if (window.lucide) window.lucide.createIcons();
|
||||||
|
});
|
||||||
|
|
||||||
|
qsa("a", panel).forEach((link) => {
|
||||||
|
link.addEventListener("click", () => {
|
||||||
|
panel.classList.remove("is-open");
|
||||||
|
document.body.classList.remove("menu-open");
|
||||||
|
toggle.setAttribute("aria-expanded", "false");
|
||||||
|
const icon = qs("[data-menu-icon]", toggle);
|
||||||
|
if (icon) icon.setAttribute("data-lucide", "menu");
|
||||||
|
if (window.lucide) window.lucide.createIcons();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const initSmoothAnchors = () => {
|
||||||
|
const smoothMotion = window.matchMedia("(prefers-reduced-motion: no-preference)").matches && window.matchMedia("(min-width: 768px)").matches;
|
||||||
|
|
||||||
|
qsa('a[href^="#"]').forEach((anchor) => {
|
||||||
|
anchor.addEventListener("click", (event) => {
|
||||||
|
const target = qs(anchor.getAttribute("href"));
|
||||||
|
if (!target) return;
|
||||||
|
event.preventDefault();
|
||||||
|
target.scrollIntoView({ behavior: smoothMotion ? "smooth" : "auto", block: "start" });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const initAnimations = () => {
|
||||||
|
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||||
|
|
||||||
|
if (window.AOS) {
|
||||||
|
AOS.init({
|
||||||
|
once: true,
|
||||||
|
duration: 560,
|
||||||
|
easing: "ease-out-cubic",
|
||||||
|
offset: 70,
|
||||||
|
disable: () => window.innerWidth < 640 || reducedMotion
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const initHeroReveal = () => {
|
||||||
|
qsa(".reveal-text").forEach((item, index) => {
|
||||||
|
item.style.animationDelay = `${Math.min(index * 70, 420)}ms`;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const initGallery = () => {
|
||||||
|
const buttons = qsa("[data-filter]");
|
||||||
|
const cards = qsa("[data-category]");
|
||||||
|
if (!buttons.length || !cards.length) return;
|
||||||
|
|
||||||
|
buttons.forEach((button) => {
|
||||||
|
button.addEventListener("click", () => {
|
||||||
|
const filter = button.dataset.filter;
|
||||||
|
buttons.forEach((item) => item.classList.remove("is-active"));
|
||||||
|
button.classList.add("is-active");
|
||||||
|
|
||||||
|
cards.forEach((card) => {
|
||||||
|
const show = filter === "all" || card.dataset.category === filter;
|
||||||
|
card.style.display = show ? "inline-block" : "none";
|
||||||
|
});
|
||||||
|
|
||||||
|
if (window.AOS) AOS.refreshHard();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const initImageHints = () => {
|
||||||
|
const fallback = "assets/images/gallery/studio-fallback.svg";
|
||||||
|
|
||||||
|
const applyFallback = (img) => {
|
||||||
|
if (img.dataset.fallbackApplied === "true") return;
|
||||||
|
img.dataset.fallbackApplied = "true";
|
||||||
|
img.src = fallback;
|
||||||
|
img.alt = img.alt || "Venus Photo Studio And Lab image preview";
|
||||||
|
|
||||||
|
const lightboxTrigger = img.closest("[data-lightbox]");
|
||||||
|
if (lightboxTrigger) {
|
||||||
|
lightboxTrigger.dataset.lightbox = fallback;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
qsa("img").forEach((img) => {
|
||||||
|
img.decoding = "async";
|
||||||
|
|
||||||
|
if (!img.hasAttribute("loading") && !img.closest(".site-header")) {
|
||||||
|
img.loading = "lazy";
|
||||||
|
}
|
||||||
|
|
||||||
|
img.addEventListener("error", () => applyFallback(img), { once: true });
|
||||||
|
|
||||||
|
if (img.complete && img.naturalWidth === 0) {
|
||||||
|
applyFallback(img);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const initLightbox = () => {
|
||||||
|
const triggers = qsa("[data-lightbox]");
|
||||||
|
if (!triggers.length) return;
|
||||||
|
|
||||||
|
const lightbox = document.createElement("div");
|
||||||
|
lightbox.className = "lightbox";
|
||||||
|
lightbox.setAttribute("role", "dialog");
|
||||||
|
lightbox.setAttribute("aria-modal", "true");
|
||||||
|
lightbox.innerHTML = `
|
||||||
|
<button class="lightbox-close" type="button" aria-label="Close preview">
|
||||||
|
<i data-lucide="x"></i>
|
||||||
|
</button>
|
||||||
|
<img alt="">
|
||||||
|
`;
|
||||||
|
document.body.appendChild(lightbox);
|
||||||
|
|
||||||
|
const image = qs("img", lightbox);
|
||||||
|
const close = qs(".lightbox-close", lightbox);
|
||||||
|
|
||||||
|
const closeLightbox = () => {
|
||||||
|
lightbox.classList.remove("is-open");
|
||||||
|
document.body.classList.remove("menu-open");
|
||||||
|
image.removeAttribute("src");
|
||||||
|
image.alt = "";
|
||||||
|
};
|
||||||
|
|
||||||
|
triggers.forEach((trigger) => {
|
||||||
|
trigger.addEventListener("click", () => {
|
||||||
|
const source = trigger.dataset.lightbox || qs("img", trigger)?.src;
|
||||||
|
const caption = trigger.dataset.caption || qs(".gallery-caption", trigger)?.textContent?.trim() || "Venus Photo Studio And Lab gallery preview";
|
||||||
|
if (!source) return;
|
||||||
|
image.src = source;
|
||||||
|
image.alt = caption;
|
||||||
|
lightbox.classList.add("is-open");
|
||||||
|
document.body.classList.add("menu-open");
|
||||||
|
if (window.lucide) window.lucide.createIcons();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
close.addEventListener("click", closeLightbox);
|
||||||
|
lightbox.addEventListener("click", (event) => {
|
||||||
|
if (event.target === lightbox) closeLightbox();
|
||||||
|
});
|
||||||
|
window.addEventListener("keydown", (event) => {
|
||||||
|
if (event.key === "Escape") closeLightbox();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const initContactForm = () => {
|
||||||
|
const form = qs("[data-contact-form]");
|
||||||
|
const note = qs("[data-form-note]");
|
||||||
|
if (!form || !note) return;
|
||||||
|
|
||||||
|
form.addEventListener("submit", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
note.textContent = "Thank you. Your enquiry is ready to send through the connected contact channel.";
|
||||||
|
note.classList.remove("hidden");
|
||||||
|
form.reset();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const initFooterYear = () => {
|
||||||
|
qsa("[data-year]").forEach((item) => {
|
||||||
|
item.textContent = String(new Date().getFullYear());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
initHeader();
|
||||||
|
initSmoothAnchors();
|
||||||
|
initHeroReveal();
|
||||||
|
initAnimations();
|
||||||
|
initGallery();
|
||||||
|
initLightbox();
|
||||||
|
initContactForm();
|
||||||
|
initImageHints();
|
||||||
|
initFooterYear();
|
||||||
|
if (window.lucide) window.lucide.createIcons();
|
||||||
|
});
|
||||||
32
components/footer.html
Normal file
32
components/footer.html
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<footer class="border-t border-white/10 bg-black/70">
|
||||||
|
<div class="mx-auto grid max-w-content gap-10 px-5 py-12 md:grid-cols-[1.2fr_0.8fr_0.8fr] lg:px-8">
|
||||||
|
<div>
|
||||||
|
<a href="/" class="flex items-center gap-3" aria-label="Venus Photo Studio And Lab home">
|
||||||
|
<img src="assets/images/logo/venus-monogram.jpg" class="h-11 w-11" alt="" width="44" height="44">
|
||||||
|
<span class="font-display text-2xl font-bold text-white">Venus Photo Studio And Lab</span>
|
||||||
|
</a>
|
||||||
|
<p class="mt-5 max-w-md leading-7 text-white/58">Premium photography and cinematic videography for weddings, portraits, family milestones, and events in Karaikal.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-bold uppercase tracking-[0.18em] text-gold">Studio</p>
|
||||||
|
<div class="mt-5 grid gap-3 text-sm text-white/64">
|
||||||
|
<a href="/about" class="hover:text-gold">About</a>
|
||||||
|
<a href="/gallery" class="hover:text-gold">Gallery</a>
|
||||||
|
<a href="/services" class="hover:text-gold">Services</a>
|
||||||
|
<a href="/contact" class="hover:text-gold">Contact</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-bold uppercase tracking-[0.18em] text-gold">Connect</p>
|
||||||
|
<div class="mt-5 grid gap-3 text-sm text-white/64">
|
||||||
|
<a href="tel:+919894041125" class="hover:text-gold">098940 41125</a>
|
||||||
|
<a href="https://wa.me/919894041125" target="_blank" rel="noopener" class="hover:text-gold">WhatsApp Enquiry</a>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="hover:text-gold">Instagram</a>
|
||||||
|
<span>Door no. 24, Kannadiyar St, Karaikal, Puducherry 609602</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/10 px-5 py-5 text-center text-xs font-semibold uppercase tracking-[0.16em] text-white/42">
|
||||||
|
© <span data-year></span> Venus Photo Studio And Lab. Crafted for timeless stories.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
34
components/navbar.html
Normal file
34
components/navbar.html
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<header class="site-header">
|
||||||
|
<div class="mx-auto flex h-20 max-w-content items-center justify-between px-5 lg:px-8">
|
||||||
|
<a href="/" class="flex items-center gap-3" aria-label="Venus Photo Studio And Lab home">
|
||||||
|
<img src="assets/images/logo/venus-monogram.jpg" class="h-11 w-11" alt="" width="44" height="44">
|
||||||
|
<span class="leading-tight">
|
||||||
|
<span class="block font-display text-lg font-bold text-white sm:text-xl">Venus Photo Studio</span>
|
||||||
|
<span class="block text-[0.62rem] font-bold uppercase tracking-[0.18em] text-gold">And Lab | Photography & Film</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<nav class="hidden items-center gap-8 lg:flex" aria-label="Primary navigation">
|
||||||
|
<a href="/" class="nav-link text-sm font-semibold" data-nav="home">Home</a>
|
||||||
|
<a href="/about" class="nav-link text-sm font-semibold" data-nav="about">About</a>
|
||||||
|
<a href="/gallery" class="nav-link text-sm font-semibold" data-nav="gallery">Gallery</a>
|
||||||
|
<a href="/services" class="nav-link text-sm font-semibold" data-nav="services">Services</a>
|
||||||
|
<a href="/contact" class="nav-link text-sm font-semibold" data-nav="contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="ghost-button hidden lg:inline-flex">
|
||||||
|
<i data-lucide="instagram" class="h-4 w-4"></i>
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
<button class="grid h-11 w-11 place-items-center border border-white/15 text-white lg:hidden" type="button" data-menu-toggle aria-expanded="false" aria-label="Open navigation">
|
||||||
|
<i data-menu-icon data-lucide="menu" class="h-5 w-5"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-panel border-t border-white/10 bg-night/95 lg:hidden" data-mobile-panel>
|
||||||
|
<nav class="mx-auto grid max-w-content gap-1 px-5 py-5" aria-label="Mobile navigation">
|
||||||
|
<a href="/" class="nav-link py-3 text-base font-semibold" data-nav="home">Home</a>
|
||||||
|
<a href="/about" class="nav-link py-3 text-base font-semibold" data-nav="about">About</a>
|
||||||
|
<a href="/gallery" class="nav-link py-3 text-base font-semibold" data-nav="gallery">Gallery</a>
|
||||||
|
<a href="/services" class="nav-link py-3 text-base font-semibold" data-nav="services">Services</a>
|
||||||
|
<a href="/contact" class="nav-link py-3 text-base font-semibold" data-nav="contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
288
contact.html
Normal file
288
contact.html
Normal file
@ -0,0 +1,288 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Contact Venus Photo Studio And Lab at Door no. 24, Kannadiyar St, Karaikal, Puducherry 609602. Call or WhatsApp 098940 41125 for bookings.">
|
||||||
|
<title>Contact Venus Photo Studio And Lab | Karaikal</title>
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<meta name="keywords" content="Venus Photo Studio And Lab, Karaikal photography studio, photography studio in Karaikal, wedding photographer Karaikal, photo lab Karaikal, candid photography, videography, album design">
|
||||||
|
<link rel="canonical" href="/contact">
|
||||||
|
<meta property="og:site_name" content="Venus Photo Studio And Lab">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:title" content="Contact Venus Photo Studio And Lab | Karaikal">
|
||||||
|
<meta property="og:description" content="Contact Venus Photo Studio And Lab at Door no. 24, Kannadiyar St, Karaikal, Puducherry 609602. Call or WhatsApp 098940 41125 for bookings.">
|
||||||
|
<meta property="og:url" content="/contact">
|
||||||
|
<meta property="og:image" content="/assets/images/logo/venus-monogram.jpg">
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="twitter:title" content="Contact Venus Photo Studio And Lab | Karaikal">
|
||||||
|
<meta name="twitter:description" content="Contact Venus Photo Studio And Lab at Door no. 24, Kannadiyar St, Karaikal, Puducherry 609602. Call or WhatsApp 098940 41125 for bookings.">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link rel="preconnect" href="https://images.unsplash.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
window.tailwind = window.tailwind || {};
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
night: "#0B0B0B",
|
||||||
|
gold: "#D4AF37",
|
||||||
|
ivory: "#F7F2E8",
|
||||||
|
aubergine: "#241424"
|
||||||
|
},
|
||||||
|
maxWidth: {
|
||||||
|
content: "1180px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="assets/css/style.css">
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "PhotographyBusiness",
|
||||||
|
"name": "Venus Photo Studio And Lab",
|
||||||
|
"telephone": "+919894041125",
|
||||||
|
"address": {
|
||||||
|
"@type": "PostalAddress",
|
||||||
|
"streetAddress": "Door no. 24, Kannadiyar St",
|
||||||
|
"addressLocality": "Karaikal",
|
||||||
|
"addressRegion": "Puducherry",
|
||||||
|
"postalCode": "609602",
|
||||||
|
"addressCountry": "IN"
|
||||||
|
},
|
||||||
|
"aggregateRating": {
|
||||||
|
"@type": "AggregateRating",
|
||||||
|
"ratingValue": "4.9",
|
||||||
|
"reviewCount": "956"
|
||||||
|
},
|
||||||
|
"sameAs": [
|
||||||
|
"https://www.instagram.com/venus_karaikal/",
|
||||||
|
"https://share.google/YNpBPkSB80YTTgXGD"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="site-shell" data-page="contact">
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="mx-auto flex h-20 max-w-content items-center justify-between px-5 lg:px-8">
|
||||||
|
<a href="/" class="flex items-center gap-3" aria-label="Venus Photo Studio And Lab home">
|
||||||
|
<img src="assets/images/logo/venus-monogram.jpg" class="h-11 w-11" alt="" width="44" height="44">
|
||||||
|
<span class="leading-tight">
|
||||||
|
<span class="block font-display text-lg font-bold text-white sm:text-xl">Venus Photo Studio</span>
|
||||||
|
<span class="block text-[0.62rem] font-bold uppercase tracking-[0.18em] text-gold">And Lab | Photography & Film</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<nav class="hidden items-center gap-8 lg:flex" aria-label="Primary navigation">
|
||||||
|
<a href="/" class="nav-link text-sm font-semibold" data-nav="home">Home</a>
|
||||||
|
<a href="/about" class="nav-link text-sm font-semibold" data-nav="about">About</a>
|
||||||
|
<a href="/gallery" class="nav-link text-sm font-semibold" data-nav="gallery">Gallery</a>
|
||||||
|
<a href="/services" class="nav-link text-sm font-semibold" data-nav="services">Services</a>
|
||||||
|
<a href="/contact" class="nav-link text-sm font-semibold" data-nav="contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
<div class="hidden items-center gap-3 lg:flex">
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="ghost-button">
|
||||||
|
<i data-lucide="instagram" class="h-4 w-4"></i>
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<button class="grid h-11 w-11 place-items-center border border-white/15 text-white lg:hidden" type="button" data-menu-toggle aria-expanded="false" aria-label="Open navigation">
|
||||||
|
<i data-menu-icon data-lucide="menu" class="h-5 w-5"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-panel border-t border-white/10 bg-night/95 lg:hidden" data-mobile-panel>
|
||||||
|
<nav class="mx-auto grid max-w-content gap-1 px-5 py-5" aria-label="Mobile navigation">
|
||||||
|
<a href="/" class="nav-link py-3 text-base font-semibold" data-nav="home">Home</a>
|
||||||
|
<a href="/about" class="nav-link py-3 text-base font-semibold" data-nav="about">About</a>
|
||||||
|
<a href="/gallery" class="nav-link py-3 text-base font-semibold" data-nav="gallery">Gallery</a>
|
||||||
|
<a href="/services" class="nav-link py-3 text-base font-semibold" data-nav="services">Services</a>
|
||||||
|
<a href="/contact" class="nav-link py-3 text-base font-semibold" data-nav="contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="cinematic-hero hero-contact relative flex items-center bg-cover bg-center pt-28">
|
||||||
|
<div class="relative mx-auto w-full max-w-content px-5 py-16 lg:px-8">
|
||||||
|
<div class="max-w-4xl">
|
||||||
|
<span class="section-kicker reveal-text">Contact Venus Photo Studio And Lab</span>
|
||||||
|
<h1 class="reveal-text mt-6 font-display text-5xl font-bold leading-tight text-white sm:text-6xl lg:text-7xl">Start your visual story with one simple enquiry.</h1>
|
||||||
|
<p class="reveal-text mt-6 max-w-2xl text-base leading-8 text-white/74 sm:text-lg">Send your date, event type, and preferred coverage. The studio will help you choose a photo, film, or complete visual package.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="hero-scroll" aria-hidden="true"></span>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mx-auto grid max-w-content gap-10 px-5 py-20 lg:grid-cols-[1.1fr_0.9fr] lg:px-8 lg:py-28">
|
||||||
|
<div data-aos="fade-right">
|
||||||
|
<span class="section-kicker">Contact Form</span>
|
||||||
|
<h2 class="mt-4 font-display text-4xl font-bold text-white sm:text-5xl">Tell us what you are planning.</h2>
|
||||||
|
<form class="mt-8 grid gap-4" data-contact-form>
|
||||||
|
<div class="grid gap-4 sm:grid-cols-2">
|
||||||
|
<label>
|
||||||
|
<span class="mb-2 block text-xs font-bold uppercase tracking-[0.16em] text-white/50">Name</span>
|
||||||
|
<input class="input-field" type="text" name="name" placeholder="Your name" required>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<span class="mb-2 block text-xs font-bold uppercase tracking-[0.16em] text-white/50">Phone</span>
|
||||||
|
<input class="input-field" type="tel" name="phone" placeholder="+91 ..." required>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-4 sm:grid-cols-2">
|
||||||
|
<label>
|
||||||
|
<span class="mb-2 block text-xs font-bold uppercase tracking-[0.16em] text-white/50">Event Type</span>
|
||||||
|
<select class="input-field" name="event" required>
|
||||||
|
<option value="">Choose service</option>
|
||||||
|
<option>Wedding Photography</option>
|
||||||
|
<option>Cinematic Videography</option>
|
||||||
|
<option>Couple Shoot</option>
|
||||||
|
<option>Maternity Shoot</option>
|
||||||
|
<option>Baby Shoot</option>
|
||||||
|
<option>Event Coverage</option>
|
||||||
|
<option>Album Design</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<span class="mb-2 block text-xs font-bold uppercase tracking-[0.16em] text-white/50">Event Date</span>
|
||||||
|
<input class="input-field" type="date" name="date">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<label>
|
||||||
|
<span class="mb-2 block text-xs font-bold uppercase tracking-[0.16em] text-white/50">Message</span>
|
||||||
|
<textarea class="input-field min-h-40 resize-y" name="message" placeholder="Location, ceremony flow, guest count, and the mood you want..." required></textarea>
|
||||||
|
</label>
|
||||||
|
<button class="lux-button justify-self-start" type="submit">
|
||||||
|
<i data-lucide="send" class="h-4 w-4"></i>
|
||||||
|
Send Enquiry
|
||||||
|
</button>
|
||||||
|
<p class="hidden text-sm font-semibold text-gold" data-form-note role="status"></p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="grid content-start gap-5" data-aos="fade-left">
|
||||||
|
<div class="lux-card p-7">
|
||||||
|
<i data-lucide="phone" class="h-6 w-6 text-gold"></i>
|
||||||
|
<h3 class="mt-5 font-display text-2xl font-bold">Phone</h3>
|
||||||
|
<a href="tel:+919894041125" class="mt-3 block text-white/68 hover:text-gold">098940 41125</a>
|
||||||
|
</div>
|
||||||
|
<div class="lux-card p-7">
|
||||||
|
<i data-lucide="message-circle" class="h-6 w-6 text-gold"></i>
|
||||||
|
<h3 class="mt-5 font-display text-2xl font-bold">WhatsApp</h3>
|
||||||
|
<a href="https://wa.me/919894041125" target="_blank" rel="noopener" class="mt-3 inline-flex items-center gap-2 text-white/68 hover:text-gold">Chat Now <i data-lucide="arrow-up-right" class="h-4 w-4"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="lux-card p-7">
|
||||||
|
<i data-lucide="instagram" class="h-6 w-6 text-gold"></i>
|
||||||
|
<h3 class="mt-5 font-display text-2xl font-bold">Instagram</h3>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="mt-3 inline-flex items-center gap-2 text-white/68 hover:text-gold">@venus_karaikal <i data-lucide="arrow-up-right" class="h-4 w-4"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="lux-card p-7">
|
||||||
|
<i data-lucide="star" class="h-6 w-6 text-gold"></i>
|
||||||
|
<h3 class="mt-5 font-display text-2xl font-bold">Google Rating</h3>
|
||||||
|
<p class="mt-3 text-white/68">4.9 rating from 956 Google reviews</p>
|
||||||
|
<a href="https://share.google/YNpBPkSB80YTTgXGD" target="_blank" rel="noopener" class="mt-4 inline-flex items-center gap-2 text-white/68 hover:text-gold">Read Reviews <i data-lucide="arrow-up-right" class="h-4 w-4"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="lux-card p-7">
|
||||||
|
<i data-lucide="map-pin" class="h-6 w-6 text-gold"></i>
|
||||||
|
<h3 class="mt-5 font-display text-2xl font-bold">Studio Location</h3>
|
||||||
|
<p class="mt-3 leading-7 text-white/68">Door no. 24, Kannadiyar St, Karaikal, Puducherry 609602</p>
|
||||||
|
<p class="mt-3 text-sm text-white/52">Open 9:40 AM to 9:00 PM, Friday closed</p>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="border-y border-white/10 bg-white/[0.035]">
|
||||||
|
<div class="mx-auto grid max-w-content gap-10 px-5 py-20 lg:grid-cols-[0.8fr_1.2fr] lg:px-8 lg:py-28">
|
||||||
|
<div data-aos="fade-right">
|
||||||
|
<span class="section-kicker">Visit Studio</span>
|
||||||
|
<h2 class="mt-4 font-display text-4xl font-bold text-white sm:text-5xl">Door no. 24, Kannadiyar Street studio access.</h2>
|
||||||
|
<p class="mt-5 leading-8 text-white/68">Use the embedded map to plan your route, then call or WhatsApp before visiting for a consultation slot.</p>
|
||||||
|
<div class="mt-8 flex flex-col gap-3 sm:flex-row">
|
||||||
|
<a href="https://maps.google.com/?q=Door%20no%2024%2C%20Kannadiyar%20St%2C%20Karaikal%2C%20Puducherry%20609602" target="_blank" rel="noopener" class="lux-button">
|
||||||
|
<i data-lucide="navigation" class="h-4 w-4"></i>
|
||||||
|
Directions
|
||||||
|
</a>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="ghost-button">
|
||||||
|
<i data-lucide="instagram" class="h-4 w-4"></i>
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="overflow-hidden border border-white/10" data-aos="fade-left">
|
||||||
|
<iframe
|
||||||
|
class="map-frame"
|
||||||
|
loading="lazy"
|
||||||
|
referrerpolicy="no-referrer-when-downgrade"
|
||||||
|
src="https://www.google.com/maps?q=Door%20no%2024%2C%20Kannadiyar%20St%2C%20Karaikal%2C%20Puducherry%20609602&output=embed"
|
||||||
|
title="Venus Photo Studio And Lab location map">
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mx-auto max-w-content px-5 py-20 lg:px-8 lg:py-28">
|
||||||
|
<div class="grid items-center gap-10 lg:grid-cols-[1fr_0.9fr]">
|
||||||
|
<div data-aos="fade-right">
|
||||||
|
<span class="section-kicker">Fast Links</span>
|
||||||
|
<h2 class="mt-4 font-display text-4xl font-bold text-white sm:text-5xl">Prefer a direct message?</h2>
|
||||||
|
<p class="mt-5 max-w-2xl leading-8 text-white/68">WhatsApp is the fastest way to share dates, references, and event details. Instagram is ideal for checking the current visual style.</p>
|
||||||
|
<div class="mt-8 flex flex-col gap-3 sm:flex-row">
|
||||||
|
<a href="https://wa.me/919894041125" target="_blank" rel="noopener" class="lux-button">
|
||||||
|
<i data-lucide="message-circle" class="h-4 w-4"></i>
|
||||||
|
WhatsApp
|
||||||
|
</a>
|
||||||
|
<a href="tel:+919894041125" class="ghost-button">
|
||||||
|
<i data-lucide="phone-call" class="h-4 w-4"></i>
|
||||||
|
Call Studio
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="image-frame min-h-[28rem]" data-aos="fade-left">
|
||||||
|
<img class="h-full" src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=1000&q=82" alt="Camera lens closeup for contact section" loading="lazy">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="border-t border-white/10 bg-black/70">
|
||||||
|
<div class="mx-auto grid max-w-content gap-10 px-5 py-12 md:grid-cols-[1.2fr_0.8fr_0.8fr] lg:px-8">
|
||||||
|
<div>
|
||||||
|
<a href="/" class="flex items-center gap-3" aria-label="Venus Photo Studio And Lab home">
|
||||||
|
<img src="assets/images/logo/venus-monogram.jpg" class="h-11 w-11" alt="" width="44" height="44">
|
||||||
|
<span class="font-display text-2xl font-bold text-white">Venus Photo Studio And Lab</span>
|
||||||
|
</a>
|
||||||
|
<p class="mt-5 max-w-md leading-7 text-white/58">Premium photography and cinematic videography for weddings, portraits, family milestones, and events in Karaikal.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-bold uppercase tracking-[0.18em] text-gold">Studio</p>
|
||||||
|
<div class="mt-5 grid gap-3 text-sm text-white/64">
|
||||||
|
<a href="/about" class="hover:text-gold">About</a>
|
||||||
|
<a href="/gallery" class="hover:text-gold">Gallery</a>
|
||||||
|
<a href="/services" class="hover:text-gold">Services</a>
|
||||||
|
<a href="/contact" class="hover:text-gold">Contact</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-bold uppercase tracking-[0.18em] text-gold">Connect</p>
|
||||||
|
<div class="mt-5 grid gap-3 text-sm text-white/64">
|
||||||
|
<a href="tel:+919894041125" class="hover:text-gold">098940 41125</a>
|
||||||
|
<a href="https://wa.me/919894041125" target="_blank" rel="noopener" class="hover:text-gold">WhatsApp Enquiry</a>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="hover:text-gold">Instagram</a>
|
||||||
|
<span>Door no. 24, Kannadiyar St, Karaikal, Puducherry 609602</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/10 px-5 py-5 text-center text-xs font-semibold uppercase tracking-[0.16em] text-white/42">
|
||||||
|
© <span data-year></span> Venus Photo Studio And Lab. Crafted for timeless stories.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/lucide@latest"></script>
|
||||||
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||||
|
<script src="assets/js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
216
gallery.html
Normal file
216
gallery.html
Normal file
@ -0,0 +1,216 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="View the Venus Photo Studio And Lab gallery for wedding photography, couple shoots, maternity, baby photography, events, and cinematic reels in Karaikal.">
|
||||||
|
<title>Gallery | Venus Photo Studio And Lab Karaikal</title>
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<meta name="keywords" content="Venus Photo Studio And Lab, Karaikal photography studio, photography studio in Karaikal, wedding photographer Karaikal, photo lab Karaikal, candid photography, videography, album design">
|
||||||
|
<link rel="canonical" href="/gallery">
|
||||||
|
<meta property="og:site_name" content="Venus Photo Studio And Lab">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:title" content="Gallery | Venus Photo Studio And Lab Karaikal">
|
||||||
|
<meta property="og:description" content="View the Venus Photo Studio And Lab gallery for wedding photography, couple shoots, maternity, baby photography, events, and cinematic reels in Karaikal.">
|
||||||
|
<meta property="og:url" content="/gallery">
|
||||||
|
<meta property="og:image" content="/assets/images/logo/venus-monogram.jpg">
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="twitter:title" content="Gallery | Venus Photo Studio And Lab Karaikal">
|
||||||
|
<meta name="twitter:description" content="View the Venus Photo Studio And Lab gallery for wedding photography, couple shoots, maternity, baby photography, events, and cinematic reels in Karaikal.">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link rel="preconnect" href="https://images.unsplash.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
window.tailwind = window.tailwind || {};
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
night: "#0B0B0B",
|
||||||
|
gold: "#D4AF37",
|
||||||
|
ivory: "#F7F2E8",
|
||||||
|
aubergine: "#241424"
|
||||||
|
},
|
||||||
|
maxWidth: {
|
||||||
|
content: "1180px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="assets/css/style.css">
|
||||||
|
</head>
|
||||||
|
<body class="site-shell" data-page="gallery">
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="mx-auto flex h-20 max-w-content items-center justify-between px-5 lg:px-8">
|
||||||
|
<a href="/" class="flex items-center gap-3" aria-label="Venus Photo Studio And Lab home">
|
||||||
|
<img src="assets/images/logo/venus-monogram.jpg" class="h-11 w-11" alt="" width="44" height="44">
|
||||||
|
<span class="leading-tight">
|
||||||
|
<span class="block font-display text-lg font-bold text-white sm:text-xl">Venus Photo Studio</span>
|
||||||
|
<span class="block text-[0.62rem] font-bold uppercase tracking-[0.18em] text-gold">And Lab | Photography & Film</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<nav class="hidden items-center gap-8 lg:flex" aria-label="Primary navigation">
|
||||||
|
<a href="/" class="nav-link text-sm font-semibold" data-nav="home">Home</a>
|
||||||
|
<a href="/about" class="nav-link text-sm font-semibold" data-nav="about">About</a>
|
||||||
|
<a href="/gallery" class="nav-link text-sm font-semibold" data-nav="gallery">Gallery</a>
|
||||||
|
<a href="/services" class="nav-link text-sm font-semibold" data-nav="services">Services</a>
|
||||||
|
<a href="/contact" class="nav-link text-sm font-semibold" data-nav="contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
<div class="hidden items-center gap-3 lg:flex">
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="ghost-button">
|
||||||
|
<i data-lucide="instagram" class="h-4 w-4"></i>
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<button class="grid h-11 w-11 place-items-center border border-white/15 text-white lg:hidden" type="button" data-menu-toggle aria-expanded="false" aria-label="Open navigation">
|
||||||
|
<i data-menu-icon data-lucide="menu" class="h-5 w-5"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-panel border-t border-white/10 bg-night/95 lg:hidden" data-mobile-panel>
|
||||||
|
<nav class="mx-auto grid max-w-content gap-1 px-5 py-5" aria-label="Mobile navigation">
|
||||||
|
<a href="/" class="nav-link py-3 text-base font-semibold" data-nav="home">Home</a>
|
||||||
|
<a href="/about" class="nav-link py-3 text-base font-semibold" data-nav="about">About</a>
|
||||||
|
<a href="/gallery" class="nav-link py-3 text-base font-semibold" data-nav="gallery">Gallery</a>
|
||||||
|
<a href="/services" class="nav-link py-3 text-base font-semibold" data-nav="services">Services</a>
|
||||||
|
<a href="/contact" class="nav-link py-3 text-base font-semibold" data-nav="contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="cinematic-hero hero-gallery relative flex items-center bg-cover bg-center pt-28">
|
||||||
|
<div class="relative mx-auto w-full max-w-content px-5 py-16 lg:px-8">
|
||||||
|
<div class="max-w-4xl">
|
||||||
|
<span class="section-kicker reveal-text">Gallery</span>
|
||||||
|
<h1 class="reveal-text mt-6 font-display text-5xl font-bold leading-tight text-white sm:text-6xl lg:text-7xl">Masonry stories in light, emotion, and movement.</h1>
|
||||||
|
<p class="reveal-text mt-6 max-w-2xl text-base leading-8 text-white/74 sm:text-lg">Browse wedding, couple, maternity, baby, event, and reel-style frames with touch-friendly previews.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="hero-scroll" aria-hidden="true"></span>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mx-auto max-w-content px-5 py-16 lg:px-8 lg:py-24">
|
||||||
|
<div class="mb-9 flex flex-col justify-between gap-6 lg:flex-row lg:items-end">
|
||||||
|
<div data-aos="fade-up">
|
||||||
|
<span class="section-kicker">Portfolio Categories</span>
|
||||||
|
<h2 class="mt-4 max-w-2xl font-display text-4xl font-bold text-white sm:text-5xl">Choose a mood, then open any frame.</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-2" data-aos="fade-up" data-aos-delay="120" aria-label="Gallery filters">
|
||||||
|
<button class="filter-btn is-active" type="button" data-filter="all">All</button>
|
||||||
|
<button class="filter-btn" type="button" data-filter="wedding">Wedding</button>
|
||||||
|
<button class="filter-btn" type="button" data-filter="couple">Couple</button>
|
||||||
|
<button class="filter-btn" type="button" data-filter="maternity">Maternity</button>
|
||||||
|
<button class="filter-btn" type="button" data-filter="baby">Baby</button>
|
||||||
|
<button class="filter-btn" type="button" data-filter="events">Events</button>
|
||||||
|
<button class="filter-btn" type="button" data-filter="reels">Reels</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="masonry-grid">
|
||||||
|
<button class="gallery-card" type="button" data-category="wedding" data-lightbox="https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1600&q=82" data-caption="Wedding couple portrait">
|
||||||
|
<img src="https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=900&q=80" alt="Wedding couple portrait" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-2xl font-bold">Velvet Vows</span><span class="mt-1 block text-xs uppercase tracking-[0.18em] text-gold">Wedding</span></span>
|
||||||
|
</button>
|
||||||
|
<button class="gallery-card" type="button" data-category="couple" data-lightbox="https://images.unsplash.com/photo-1518199266791-5375a83190b7?auto=format&fit=crop&w=1600&q=82" data-caption="Couple shoot in soft light">
|
||||||
|
<img src="https://images.unsplash.com/photo-1518199266791-5375a83190b7?auto=format&fit=crop&w=900&q=80" alt="Couple shoot in soft light" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-2xl font-bold">Golden Hour</span><span class="mt-1 block text-xs uppercase tracking-[0.18em] text-gold">Couple</span></span>
|
||||||
|
</button>
|
||||||
|
<button class="gallery-card" type="button" data-category="maternity" data-lightbox="https://images.unsplash.com/photo-1493894473891-10fc1e5dbd22?auto=format&fit=crop&w=1600&q=82" data-caption="Maternity portrait">
|
||||||
|
<img src="https://images.unsplash.com/photo-1493894473891-10fc1e5dbd22?auto=format&fit=crop&w=900&q=80" alt="Maternity portrait" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-2xl font-bold">Waiting Light</span><span class="mt-1 block text-xs uppercase tracking-[0.18em] text-gold">Maternity</span></span>
|
||||||
|
</button>
|
||||||
|
<button class="gallery-card" type="button" data-category="events" data-lightbox="https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=1600&q=82" data-caption="Premium event decor">
|
||||||
|
<img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=900&q=80" alt="Premium event decor" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-2xl font-bold">Reception Glow</span><span class="mt-1 block text-xs uppercase tracking-[0.18em] text-gold">Events</span></span>
|
||||||
|
</button>
|
||||||
|
<button class="gallery-card" type="button" data-category="baby" data-lightbox="https://images.unsplash.com/photo-1546015720-b8b30df5aa27?auto=format&fit=crop&w=1600&q=82" data-caption="Baby portrait session">
|
||||||
|
<img src="https://images.unsplash.com/photo-1546015720-b8b30df5aa27?auto=format&fit=crop&w=900&q=80" alt="Baby portrait session" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-2xl font-bold">Little Wonder</span><span class="mt-1 block text-xs uppercase tracking-[0.18em] text-gold">Baby</span></span>
|
||||||
|
</button>
|
||||||
|
<button class="gallery-card" type="button" data-category="reels" data-lightbox="https://images.unsplash.com/photo-1530023367847-a683933f4172?auto=format&fit=crop&w=1600&q=82" data-caption="Cinematic reels camera moment">
|
||||||
|
<img src="https://images.unsplash.com/photo-1530023367847-a683933f4172?auto=format&fit=crop&w=900&q=80" alt="Cinematic reels camera moment" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-2xl font-bold">Motion Cut</span><span class="mt-1 block text-xs uppercase tracking-[0.18em] text-gold">Reels</span></span>
|
||||||
|
</button>
|
||||||
|
<button class="gallery-card" type="button" data-category="wedding" data-lightbox="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=1600&q=82" data-caption="Wedding ceremony detail">
|
||||||
|
<img src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=900&q=80" alt="Wedding ceremony detail" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-2xl font-bold">Sacred Detail</span><span class="mt-1 block text-xs uppercase tracking-[0.18em] text-gold">Wedding</span></span>
|
||||||
|
</button>
|
||||||
|
<button class="gallery-card" type="button" data-category="couple" data-lightbox="https://images.unsplash.com/photo-1518199266791-5375a83190b7?auto=format&fit=crop&w=1600&q=82" data-caption="Couple hand detail">
|
||||||
|
<img src="https://images.unsplash.com/photo-1518199266791-5375a83190b7?auto=format&fit=crop&w=900&q=80" alt="Couple hand detail" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-2xl font-bold">Soft Promise</span><span class="mt-1 block text-xs uppercase tracking-[0.18em] text-gold">Couple</span></span>
|
||||||
|
</button>
|
||||||
|
<button class="gallery-card" type="button" data-category="events" data-lightbox="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?auto=format&fit=crop&w=1600&q=82" data-caption="Celebration lights">
|
||||||
|
<img src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?auto=format&fit=crop&w=900&q=80" alt="Celebration lights and dining setup" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-2xl font-bold">Evening Story</span><span class="mt-1 block text-xs uppercase tracking-[0.18em] text-gold">Events</span></span>
|
||||||
|
</button>
|
||||||
|
<button class="gallery-card" type="button" data-category="baby" data-lightbox="https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?auto=format&fit=crop&w=1600&q=82" data-caption="Baby lifestyle portrait">
|
||||||
|
<img src="https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?auto=format&fit=crop&w=900&q=80" alt="Baby lifestyle portrait" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-2xl font-bold">Tiny Frames</span><span class="mt-1 block text-xs uppercase tracking-[0.18em] text-gold">Baby</span></span>
|
||||||
|
</button>
|
||||||
|
<button class="gallery-card" type="button" data-category="maternity" data-lightbox="https://images.unsplash.com/photo-1555252333-9f8e92e65df9?auto=format&fit=crop&w=1600&q=82" data-caption="Maternity family portrait">
|
||||||
|
<img src="https://images.unsplash.com/photo-1555252333-9f8e92e65df9?auto=format&fit=crop&w=900&q=80" alt="Maternity family portrait" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-2xl font-bold">New Chapter</span><span class="mt-1 block text-xs uppercase tracking-[0.18em] text-gold">Maternity</span></span>
|
||||||
|
</button>
|
||||||
|
<button class="gallery-card" type="button" data-category="reels" data-lightbox="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=82" data-caption="Outdoor cinematic reel frame">
|
||||||
|
<img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80" alt="Outdoor cinematic reel frame" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-2xl font-bold">Travel Frame</span><span class="mt-1 block text-xs uppercase tracking-[0.18em] text-gold">Reels</span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mx-auto max-w-content px-5 pb-20 lg:px-8 lg:pb-28">
|
||||||
|
<div class="border border-gold/25 bg-[linear-gradient(135deg,rgba(36,20,36,0.9),rgba(11,11,11,0.96))] p-7 sm:p-10 lg:p-14" data-aos="fade-up">
|
||||||
|
<span class="section-kicker">Like This Mood?</span>
|
||||||
|
<div class="mt-5 flex flex-col justify-between gap-8 lg:flex-row lg:items-end">
|
||||||
|
<h2 class="max-w-3xl font-display text-4xl font-bold text-white sm:text-5xl">Let us build a gallery around your story, family, and location.</h2>
|
||||||
|
<a href="/contact" class="lux-button self-start lg:self-end">
|
||||||
|
<i data-lucide="send" class="h-4 w-4"></i>
|
||||||
|
Enquire Now
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="border-t border-white/10 bg-black/70">
|
||||||
|
<div class="mx-auto grid max-w-content gap-10 px-5 py-12 md:grid-cols-[1.2fr_0.8fr_0.8fr] lg:px-8">
|
||||||
|
<div>
|
||||||
|
<a href="/" class="flex items-center gap-3" aria-label="Venus Photo Studio And Lab home">
|
||||||
|
<img src="assets/images/logo/venus-monogram.jpg" class="h-11 w-11" alt="" width="44" height="44">
|
||||||
|
<span class="font-display text-2xl font-bold text-white">Venus Photo Studio And Lab</span>
|
||||||
|
</a>
|
||||||
|
<p class="mt-5 max-w-md leading-7 text-white/58">Premium photography and cinematic videography for weddings, portraits, family milestones, and events in Karaikal.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-bold uppercase tracking-[0.18em] text-gold">Studio</p>
|
||||||
|
<div class="mt-5 grid gap-3 text-sm text-white/64">
|
||||||
|
<a href="/about" class="hover:text-gold">About</a>
|
||||||
|
<a href="/gallery" class="hover:text-gold">Gallery</a>
|
||||||
|
<a href="/services" class="hover:text-gold">Services</a>
|
||||||
|
<a href="/contact" class="hover:text-gold">Contact</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-bold uppercase tracking-[0.18em] text-gold">Connect</p>
|
||||||
|
<div class="mt-5 grid gap-3 text-sm text-white/64">
|
||||||
|
<a href="tel:+919894041125" class="hover:text-gold">098940 41125</a>
|
||||||
|
<a href="https://wa.me/919894041125" target="_blank" rel="noopener" class="hover:text-gold">WhatsApp Enquiry</a>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="hover:text-gold">Instagram</a>
|
||||||
|
<span>Door no. 24, Kannadiyar St, Karaikal, Puducherry 609602</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/10 px-5 py-5 text-center text-xs font-semibold uppercase tracking-[0.16em] text-white/42">
|
||||||
|
© <span data-year></span> Venus Photo Studio And Lab. Crafted for timeless stories.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/lucide@latest"></script>
|
||||||
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||||
|
<script src="assets/js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
407
index.html
Normal file
407
index.html
Normal file
@ -0,0 +1,407 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Venus Photo Studio And Lab is a top-rated photography studio and photo lab in Karaikal for wedding photography, videography, portraits, baby shoots, albums, and events.">
|
||||||
|
<title>Venus Photo Studio And Lab | Photography Studio in Karaikal</title>
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<meta name="keywords" content="Venus Photo Studio And Lab, Karaikal photography studio, photography studio in Karaikal, wedding photographer Karaikal, photo lab Karaikal, candid photography, videography, album design">
|
||||||
|
<link rel="canonical" href="/">
|
||||||
|
<meta property="og:site_name" content="Venus Photo Studio And Lab">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:title" content="Venus Photo Studio And Lab | Photography Studio in Karaikal">
|
||||||
|
<meta property="og:description" content="Venus Photo Studio And Lab is a top-rated photography studio and photo lab in Karaikal for wedding photography, videography, portraits, baby shoots, albums, and events.">
|
||||||
|
<meta property="og:url" content="/">
|
||||||
|
<meta property="og:image" content="/assets/images/logo/venus-monogram.jpg">
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="twitter:title" content="Venus Photo Studio And Lab | Photography Studio in Karaikal">
|
||||||
|
<meta name="twitter:description" content="Venus Photo Studio And Lab is a top-rated photography studio and photo lab in Karaikal for wedding photography, videography, portraits, baby shoots, albums, and events.">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link rel="preconnect" href="https://images.unsplash.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
window.tailwind = window.tailwind || {};
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
night: "#0B0B0B",
|
||||||
|
gold: "#D4AF37",
|
||||||
|
ivory: "#F7F2E8",
|
||||||
|
aubergine: "#241424"
|
||||||
|
},
|
||||||
|
maxWidth: {
|
||||||
|
content: "1180px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="assets/css/style.css">
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "PhotographyBusiness",
|
||||||
|
"name": "Venus Photo Studio And Lab",
|
||||||
|
"description": "Photography studio and photo lab in Karaikal offering wedding photography, videography, portraits, albums, baby shoots, and event coverage.",
|
||||||
|
"telephone": "+919894041125",
|
||||||
|
"address": {
|
||||||
|
"@type": "PostalAddress",
|
||||||
|
"streetAddress": "Door no. 24, Kannadiyar St",
|
||||||
|
"addressLocality": "Karaikal",
|
||||||
|
"addressRegion": "Puducherry",
|
||||||
|
"postalCode": "609602",
|
||||||
|
"addressCountry": "IN"
|
||||||
|
},
|
||||||
|
"aggregateRating": {
|
||||||
|
"@type": "AggregateRating",
|
||||||
|
"ratingValue": "4.9",
|
||||||
|
"reviewCount": "956"
|
||||||
|
},
|
||||||
|
"openingHoursSpecification": [
|
||||||
|
{
|
||||||
|
"@type": "OpeningHoursSpecification",
|
||||||
|
"dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Saturday", "Sunday"],
|
||||||
|
"opens": "09:40",
|
||||||
|
"closes": "21:00"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"sameAs": [
|
||||||
|
"https://www.instagram.com/venus_karaikal/",
|
||||||
|
"https://share.google/YNpBPkSB80YTTgXGD"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="site-shell" data-page="home">
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="mx-auto flex h-20 max-w-content items-center justify-between px-5 lg:px-8">
|
||||||
|
<a href="/" class="flex items-center gap-3" aria-label="Venus Photo Studio And Lab home">
|
||||||
|
<img src="assets/images/logo/venus-monogram.jpg" class="h-11 w-11" alt="" width="44" height="44">
|
||||||
|
<span class="leading-tight">
|
||||||
|
<span class="block font-display text-lg font-bold text-white sm:text-xl">Venus Photo Studio</span>
|
||||||
|
<span class="block text-[0.62rem] font-bold uppercase tracking-[0.18em] text-gold">And Lab | Photography & Film</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<nav class="hidden items-center gap-8 lg:flex" aria-label="Primary navigation">
|
||||||
|
<a href="/" class="nav-link text-sm font-semibold" data-nav="home">Home</a>
|
||||||
|
<a href="/about" class="nav-link text-sm font-semibold" data-nav="about">About</a>
|
||||||
|
<a href="/gallery" class="nav-link text-sm font-semibold" data-nav="gallery">Gallery</a>
|
||||||
|
<a href="/services" class="nav-link text-sm font-semibold" data-nav="services">Services</a>
|
||||||
|
<a href="/contact" class="nav-link text-sm font-semibold" data-nav="contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
<div class="hidden items-center gap-3 lg:flex">
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="ghost-button">
|
||||||
|
<i data-lucide="instagram" class="h-4 w-4"></i>
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<button class="grid h-11 w-11 place-items-center border border-white/15 text-white lg:hidden" type="button" data-menu-toggle aria-expanded="false" aria-label="Open navigation">
|
||||||
|
<i data-menu-icon data-lucide="menu" class="h-5 w-5"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-panel border-t border-white/10 bg-night/95 lg:hidden" data-mobile-panel>
|
||||||
|
<nav class="mx-auto grid max-w-content gap-1 px-5 py-5" aria-label="Mobile navigation">
|
||||||
|
<a href="/" class="nav-link py-3 text-base font-semibold" data-nav="home">Home</a>
|
||||||
|
<a href="/about" class="nav-link py-3 text-base font-semibold" data-nav="about">About</a>
|
||||||
|
<a href="/gallery" class="nav-link py-3 text-base font-semibold" data-nav="gallery">Gallery</a>
|
||||||
|
<a href="/services" class="nav-link py-3 text-base font-semibold" data-nav="services">Services</a>
|
||||||
|
<a href="/contact" class="nav-link py-3 text-base font-semibold" data-nav="contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="cinematic-hero hero-home relative flex items-center bg-cover bg-center pt-28">
|
||||||
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_72%_20%,rgba(212,175,55,0.14),transparent_24rem)]"></div>
|
||||||
|
<div class="relative mx-auto w-full max-w-content px-5 py-16 lg:px-8">
|
||||||
|
<div class="max-w-4xl">
|
||||||
|
<span class="section-kicker reveal-text">Karaikal Luxury Visual Stories</span>
|
||||||
|
<h1 class="reveal-text mt-6 font-display text-6xl font-bold leading-[0.95] text-white sm:text-7xl lg:text-8xl">Venus Photo Studio And Lab</h1>
|
||||||
|
<p class="reveal-text mt-6 max-w-2xl text-base leading-8 text-white/76 sm:text-lg">Cinematic wedding photography, soulful portraits, and graceful family films crafted with rich color, patient direction, and a timeless editorial eye.</p>
|
||||||
|
<div class="reveal-text mt-9 flex flex-col gap-3 sm:flex-row">
|
||||||
|
<a href="/gallery" class="lux-button">
|
||||||
|
<i data-lucide="images" class="h-4 w-4"></i>
|
||||||
|
View Gallery
|
||||||
|
</a>
|
||||||
|
<a href="/contact" class="ghost-button">
|
||||||
|
<i data-lucide="message-circle" class="h-4 w-4"></i>
|
||||||
|
Contact Us
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="reveal-text mt-14 grid max-w-3xl grid-cols-3 border border-white/10 bg-black/30 backdrop-blur md:ml-auto">
|
||||||
|
<div class="p-4 sm:p-6">
|
||||||
|
<p class="font-display text-3xl text-gold">01</p>
|
||||||
|
<p class="mt-1 text-xs font-bold uppercase tracking-[0.18em] text-white/60">Direction</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-x border-white/10 p-4 sm:p-6">
|
||||||
|
<p class="font-display text-3xl text-gold">4K</p>
|
||||||
|
<p class="mt-1 text-xs font-bold uppercase tracking-[0.18em] text-white/60">Films</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 sm:p-6">
|
||||||
|
<p class="font-display text-3xl text-gold">24h</p>
|
||||||
|
<p class="mt-1 text-xs font-bold uppercase tracking-[0.18em] text-white/60">Highlights</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="hero-scroll" aria-hidden="true"></span>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="featured" class="mx-auto max-w-content px-5 py-20 lg:px-8 lg:py-28">
|
||||||
|
<div class="mb-10 flex flex-col justify-between gap-6 md:flex-row md:items-end">
|
||||||
|
<div data-aos="fade-up">
|
||||||
|
<span class="section-kicker">Featured Photography</span>
|
||||||
|
<h2 class="mt-4 max-w-2xl font-display text-4xl font-bold text-white sm:text-5xl">Frames that feel composed, emotional, and quietly grand.</h2>
|
||||||
|
</div>
|
||||||
|
<a href="/gallery" class="ghost-button self-start md:self-end">
|
||||||
|
<i data-lucide="arrow-up-right" class="h-4 w-4"></i>
|
||||||
|
Explore Work
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-5 md:grid-cols-3">
|
||||||
|
<figure class="image-frame min-h-[28rem]" data-aos="fade-up">
|
||||||
|
<img class="parallax-img h-[30rem]" src="https://images.unsplash.com/photo-1523438885200-e635ba2c371e?auto=format&fit=crop&w=900&q=80" alt="Elegant bridal portrait with warm cinematic light" loading="lazy">
|
||||||
|
<figcaption class="sr-only">Bridal Portraits</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="image-frame mt-0 min-h-[28rem] md:mt-16" data-aos="fade-up" data-aos-delay="120">
|
||||||
|
<img class="parallax-img h-[30rem]" src="https://images.unsplash.com/photo-1520854221256-17451cc331bf?auto=format&fit=crop&w=900&q=80" alt="Couple wedding portrait outdoors" loading="lazy">
|
||||||
|
<figcaption class="sr-only">Wedding Stories</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="image-frame min-h-[28rem]" data-aos="fade-up" data-aos-delay="220">
|
||||||
|
<img class="parallax-img h-[30rem]" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?auto=format&fit=crop&w=900&q=80" alt="Studio portrait captured with polished lighting" loading="lazy">
|
||||||
|
<figcaption class="sr-only">Editorial Portraits</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="border-y border-white/10 bg-white/[0.035]">
|
||||||
|
<div class="mx-auto grid max-w-content gap-10 px-5 py-20 lg:grid-cols-[0.95fr_1.05fr] lg:px-8 lg:py-28">
|
||||||
|
<div class="image-frame min-h-[30rem]" data-aos="fade-right">
|
||||||
|
<img class="parallax-img h-full" src="https://images.unsplash.com/photo-1452587925148-ce544e77e70d?auto=format&fit=crop&w=1100&q=82" alt="Photographer holding a professional camera" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-center" data-aos="fade-left">
|
||||||
|
<span class="section-kicker">About Studio</span>
|
||||||
|
<h2 class="mt-4 font-display text-4xl font-bold text-white sm:text-5xl">A premium studio for moments that deserve more than documentation.</h2>
|
||||||
|
<p class="mt-6 leading-8 text-white/68">Venus Photo Studio And Lab blends candid observation with refined direction, creating wedding albums, family portraits, event stories, and cinematic reels with a polished brand sensibility.</p>
|
||||||
|
<div class="mt-8 grid gap-4 sm:grid-cols-3">
|
||||||
|
<div class="lux-card p-5">
|
||||||
|
<i data-lucide="camera" class="h-5 w-5 text-gold"></i>
|
||||||
|
<p class="mt-4 text-sm font-bold uppercase tracking-[0.15em] text-white/72">Photography</p>
|
||||||
|
</div>
|
||||||
|
<div class="lux-card p-5">
|
||||||
|
<i data-lucide="clapperboard" class="h-5 w-5 text-gold"></i>
|
||||||
|
<p class="mt-4 text-sm font-bold uppercase tracking-[0.15em] text-white/72">Cinematography</p>
|
||||||
|
</div>
|
||||||
|
<div class="lux-card p-5">
|
||||||
|
<i data-lucide="book-open" class="h-5 w-5 text-gold"></i>
|
||||||
|
<p class="mt-4 text-sm font-bold uppercase tracking-[0.15em] text-white/72">Albums</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="/about" class="lux-button mt-9 self-start">
|
||||||
|
<i data-lucide="arrow-right" class="h-4 w-4"></i>
|
||||||
|
Our Story
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mx-auto max-w-content px-5 py-20 lg:px-8 lg:py-28">
|
||||||
|
<div class="mb-10 max-w-3xl" data-aos="fade-up">
|
||||||
|
<span class="section-kicker">Services</span>
|
||||||
|
<h2 class="mt-4 font-display text-4xl font-bold text-white sm:text-5xl">Complete visual coverage for family milestones and grand celebrations.</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
<article class="lux-card p-7" data-aos="fade-up">
|
||||||
|
<i data-lucide="gem" class="h-7 w-7 text-gold"></i>
|
||||||
|
<h3 class="mt-8 font-display text-2xl font-bold text-white">Wedding Photography</h3>
|
||||||
|
<p class="mt-4 text-sm leading-7 text-white/64">Candid, traditional, and editorial coverage with polished retouching and album-ready sequencing.</p>
|
||||||
|
</article>
|
||||||
|
<article class="lux-card p-7" data-aos="fade-up" data-aos-delay="80">
|
||||||
|
<i data-lucide="video" class="h-7 w-7 text-gold"></i>
|
||||||
|
<h3 class="mt-8 font-display text-2xl font-bold text-white">Cinematic Videography</h3>
|
||||||
|
<p class="mt-4 text-sm leading-7 text-white/64">Trailer edits, long-form films, reels, drone-style framing, and music-led storytelling.</p>
|
||||||
|
</article>
|
||||||
|
<article class="lux-card p-7" data-aos="fade-up" data-aos-delay="160">
|
||||||
|
<i data-lucide="heart" class="h-7 w-7 text-gold"></i>
|
||||||
|
<h3 class="mt-8 font-display text-2xl font-bold text-white">Couple Sessions</h3>
|
||||||
|
<p class="mt-4 text-sm leading-7 text-white/64">Pre-wedding, engagement, and anniversary shoots shaped around your location and mood.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="overflow-hidden border-y border-white/10 bg-black/40 py-8" aria-label="Studio specialties">
|
||||||
|
<div class="marquee-track gap-8 text-sm font-bold uppercase tracking-[0.18em] text-white/42">
|
||||||
|
<span>Wedding Films</span><span class="text-gold">/</span><span>Baby Shoots</span><span class="text-gold">/</span><span>Maternity</span><span class="text-gold">/</span><span>Events</span><span class="text-gold">/</span><span>Albums</span><span class="text-gold">/</span><span>Reels</span>
|
||||||
|
<span>Wedding Films</span><span class="text-gold">/</span><span>Baby Shoots</span><span class="text-gold">/</span><span>Maternity</span><span class="text-gold">/</span><span>Events</span><span class="text-gold">/</span><span>Albums</span><span class="text-gold">/</span><span>Reels</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mx-auto max-w-content px-5 py-20 lg:px-8 lg:py-28">
|
||||||
|
<div class="mb-10 flex flex-col justify-between gap-6 md:flex-row md:items-end">
|
||||||
|
<div data-aos="fade-up">
|
||||||
|
<span class="section-kicker">Portfolio Preview</span>
|
||||||
|
<h2 class="mt-4 max-w-2xl font-display text-4xl font-bold text-white sm:text-5xl">A glimpse into wedding days, portraits, and celebration energy.</h2>
|
||||||
|
</div>
|
||||||
|
<a href="/gallery" class="ghost-button self-start md:self-end">
|
||||||
|
<i data-lucide="grid-3x3" class="h-4 w-4"></i>
|
||||||
|
Full Gallery
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="grid auto-rows-[16rem] gap-4 md:grid-cols-4 md:auto-rows-[14rem]">
|
||||||
|
<button class="gallery-card md:col-span-2 md:row-span-2" type="button" data-lightbox="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=1600&q=82" data-caption="Wedding ceremony detail">
|
||||||
|
<img class="h-full" src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=900&q=80" alt="Wedding ceremony detail" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-2xl font-bold">Wedding Rituals</span><span class="mt-1 block text-xs uppercase tracking-[0.18em] text-gold">Ceremony</span></span>
|
||||||
|
</button>
|
||||||
|
<button class="gallery-card" type="button" data-lightbox="https://images.unsplash.com/photo-1518199266791-5375a83190b7?auto=format&fit=crop&w=1400&q=82" data-caption="Couple portrait">
|
||||||
|
<img class="h-full" src="https://images.unsplash.com/photo-1518199266791-5375a83190b7?auto=format&fit=crop&w=700&q=80" alt="Couple portrait" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-xl font-bold">Couple</span></span>
|
||||||
|
</button>
|
||||||
|
<button class="gallery-card" type="button" data-lightbox="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?auto=format&fit=crop&w=1400&q=82" data-caption="Portrait session">
|
||||||
|
<img class="h-full" src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?auto=format&fit=crop&w=700&q=80" alt="Portrait session" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-xl font-bold">Portraits</span></span>
|
||||||
|
</button>
|
||||||
|
<button class="gallery-card md:col-span-2" type="button" data-lightbox="https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=1600&q=82" data-caption="Event reception decor">
|
||||||
|
<img class="h-full" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=1000&q=80" alt="Event reception decor" loading="lazy">
|
||||||
|
<span class="gallery-caption text-left"><span class="font-display text-xl font-bold">Celebrations</span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="border-y border-white/10 bg-white/[0.035]">
|
||||||
|
<div class="mx-auto max-w-content px-5 py-20 lg:px-8 lg:py-28">
|
||||||
|
<div class="mx-auto mb-10 max-w-3xl text-center" data-aos="fade-up">
|
||||||
|
<span class="section-kicker justify-center">Testimonials</span>
|
||||||
|
<h2 class="mt-4 font-display text-4xl font-bold text-white sm:text-5xl">Clients come for coverage. They remember the calm.</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-5 md:grid-cols-3">
|
||||||
|
<article class="lux-card p-7" data-aos="fade-up">
|
||||||
|
<i data-lucide="quote" class="h-8 w-8 text-gold"></i>
|
||||||
|
<p class="mt-6 leading-7 text-white/70">The team guided every pose gently and still captured so many natural moments. Our album feels elegant and very personal.</p>
|
||||||
|
<p class="mt-7 text-sm font-bold uppercase tracking-[0.16em] text-gold">Wedding Client</p>
|
||||||
|
</article>
|
||||||
|
<article class="lux-card p-7" data-aos="fade-up" data-aos-delay="100">
|
||||||
|
<i data-lucide="quote" class="h-8 w-8 text-gold"></i>
|
||||||
|
<p class="mt-6 leading-7 text-white/70">The highlight video looked cinematic without feeling artificial. It brought the whole event back in minutes.</p>
|
||||||
|
<p class="mt-7 text-sm font-bold uppercase tracking-[0.16em] text-gold">Event Client</p>
|
||||||
|
</article>
|
||||||
|
<article class="lux-card p-7" data-aos="fade-up" data-aos-delay="200">
|
||||||
|
<i data-lucide="quote" class="h-8 w-8 text-gold"></i>
|
||||||
|
<p class="mt-6 leading-7 text-white/70">Our baby shoot was relaxed, patient, and beautifully lit. The final pictures are now framed at home.</p>
|
||||||
|
<p class="mt-7 text-sm font-bold uppercase tracking-[0.16em] text-gold">Family Client</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mx-auto max-w-content px-5 py-20 lg:px-8 lg:py-28">
|
||||||
|
<div class="grid items-center gap-10 border border-gold/25 bg-black/45 p-7 sm:p-10 lg:grid-cols-[0.8fr_1.2fr] lg:p-14" data-aos="fade-up">
|
||||||
|
<div>
|
||||||
|
<span class="section-kicker">Google Reviews</span>
|
||||||
|
<p class="mt-6 font-display text-7xl font-bold text-gold">4.9</p>
|
||||||
|
<p class="mt-2 text-sm font-bold uppercase tracking-[0.18em] text-white/60">956 Google reviews</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="font-display text-4xl font-bold text-white sm:text-5xl">Trusted by families across Karaikal.</h2>
|
||||||
|
<p class="mt-5 leading-8 text-white/68">Clients highlight friendly service, quality photos, wedding albums, timely delivery, and strong photography output from Venus Photo Studio And Lab.</p>
|
||||||
|
<div class="mt-7 flex flex-col gap-3 sm:flex-row">
|
||||||
|
<a href="https://share.google/YNpBPkSB80YTTgXGD" target="_blank" rel="noopener" class="lux-button">
|
||||||
|
<i data-lucide="star" class="h-4 w-4"></i>
|
||||||
|
View Google Reviews
|
||||||
|
</a>
|
||||||
|
<a href="https://wa.me/919894041125" target="_blank" rel="noopener" class="ghost-button">
|
||||||
|
<i data-lucide="message-circle" class="h-4 w-4"></i>
|
||||||
|
WhatsApp Booking
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mx-auto max-w-content px-5 py-20 lg:px-8 lg:py-28">
|
||||||
|
<div class="mb-10 flex flex-col justify-between gap-6 md:flex-row md:items-end">
|
||||||
|
<div data-aos="fade-up">
|
||||||
|
<span class="section-kicker">Instagram Gallery</span>
|
||||||
|
<h2 class="mt-4 max-w-2xl font-display text-4xl font-bold text-white sm:text-5xl">Fresh visual stories from the studio feed.</h2>
|
||||||
|
</div>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="ghost-button self-start md:self-end">
|
||||||
|
<i data-lucide="instagram" class="h-4 w-4"></i>
|
||||||
|
@venus_karaikal
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6">
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="image-frame aspect-square" data-aos="zoom-in"><img src="https://images.unsplash.com/photo-1520854221256-17451cc331bf?auto=format&fit=crop&w=520&q=78" alt="Instagram wedding preview" loading="lazy"></a>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="image-frame aspect-square" data-aos="zoom-in" data-aos-delay="60"><img src="https://images.unsplash.com/photo-1518199266791-5375a83190b7?auto=format&fit=crop&w=520&q=78" alt="Instagram couple preview" loading="lazy"></a>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="image-frame aspect-square" data-aos="zoom-in" data-aos-delay="120"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?auto=format&fit=crop&w=520&q=78" alt="Instagram portrait preview" loading="lazy"></a>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="image-frame aspect-square" data-aos="zoom-in" data-aos-delay="180"><img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=520&q=78" alt="Instagram event preview" loading="lazy"></a>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="image-frame aspect-square" data-aos="zoom-in" data-aos-delay="240"><img src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?auto=format&fit=crop&w=520&q=78" alt="Instagram portrait preview" loading="lazy"></a>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="image-frame aspect-square" data-aos="zoom-in" data-aos-delay="300"><img src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=520&q=78" alt="Instagram ceremony preview" loading="lazy"></a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mx-auto max-w-content px-5 pb-20 lg:px-8 lg:pb-28">
|
||||||
|
<div class="grid overflow-hidden border border-gold/25 bg-[linear-gradient(135deg,rgba(36,20,36,0.92),rgba(11,11,11,0.96)_58%,rgba(212,175,55,0.18))] lg:grid-cols-[1fr_0.8fr]">
|
||||||
|
<div class="p-7 sm:p-10 lg:p-14" data-aos="fade-right">
|
||||||
|
<span class="section-kicker">Contact CTA</span>
|
||||||
|
<h2 class="mt-4 max-w-2xl font-display text-4xl font-bold text-white sm:text-5xl">Planning a wedding, portrait session, or family milestone?</h2>
|
||||||
|
<p class="mt-5 max-w-xl leading-8 text-white/68">Share your date, location, and dream mood. Venus Photo Studio And Lab will help shape the coverage into a calm, elegant visual plan.</p>
|
||||||
|
<div class="mt-8 flex flex-col gap-3 sm:flex-row">
|
||||||
|
<a href="/contact" class="lux-button">
|
||||||
|
<i data-lucide="send" class="h-4 w-4"></i>
|
||||||
|
Start Enquiry
|
||||||
|
</a>
|
||||||
|
<a href="https://wa.me/919894041125" target="_blank" rel="noopener" class="ghost-button">
|
||||||
|
<i data-lucide="message-circle" class="h-4 w-4"></i>
|
||||||
|
WhatsApp
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="image-frame min-h-[24rem] border-0" data-aos="fade-left">
|
||||||
|
<img class="h-full" src="https://images.unsplash.com/photo-1523438885200-e635ba2c371e?auto=format&fit=crop&w=1000&q=82" alt="Bridal portrait used as contact call to action" loading="lazy">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="border-t border-white/10 bg-black/70">
|
||||||
|
<div class="mx-auto grid max-w-content gap-10 px-5 py-12 md:grid-cols-[1.2fr_0.8fr_0.8fr] lg:px-8">
|
||||||
|
<div>
|
||||||
|
<a href="/" class="flex items-center gap-3" aria-label="Venus Photo Studio And Lab home">
|
||||||
|
<img src="assets/images/logo/venus-monogram.jpg" class="h-11 w-11" alt="" width="44" height="44">
|
||||||
|
<span class="font-display text-2xl font-bold text-white">Venus Photo Studio And Lab</span>
|
||||||
|
</a>
|
||||||
|
<p class="mt-5 max-w-md leading-7 text-white/58">Premium photography and cinematic videography for weddings, portraits, family milestones, and events in Karaikal.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-bold uppercase tracking-[0.18em] text-gold">Studio</p>
|
||||||
|
<div class="mt-5 grid gap-3 text-sm text-white/64">
|
||||||
|
<a href="/about" class="hover:text-gold">About</a>
|
||||||
|
<a href="/gallery" class="hover:text-gold">Gallery</a>
|
||||||
|
<a href="/services" class="hover:text-gold">Services</a>
|
||||||
|
<a href="/contact" class="hover:text-gold">Contact</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-bold uppercase tracking-[0.18em] text-gold">Connect</p>
|
||||||
|
<div class="mt-5 grid gap-3 text-sm text-white/64">
|
||||||
|
<a href="tel:+919894041125" class="hover:text-gold">098940 41125</a>
|
||||||
|
<a href="https://wa.me/919894041125" target="_blank" rel="noopener" class="hover:text-gold">WhatsApp Enquiry</a>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="hover:text-gold">Instagram</a>
|
||||||
|
<span>Door no. 24, Kannadiyar St, Karaikal, Puducherry 609602</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/10 px-5 py-5 text-center text-xs font-semibold uppercase tracking-[0.16em] text-white/42">
|
||||||
|
© <span data-year></span> Venus Photo Studio And Lab. Crafted for timeless stories.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/lucide@latest"></script>
|
||||||
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||||
|
<script src="assets/js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
109
main.go
Normal file
109
main.go
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"fmt"
|
||||||
|
"log"
|
||||||
|
"net/http"
|
||||||
|
"os"
|
||||||
|
"path/filepath"
|
||||||
|
"time"
|
||||||
|
)
|
||||||
|
|
||||||
|
type pageRoute struct {
|
||||||
|
Path string
|
||||||
|
File string
|
||||||
|
}
|
||||||
|
|
||||||
|
func main() {
|
||||||
|
|
||||||
|
port := os.Getenv("PORT")
|
||||||
|
|
||||||
|
if port == "" {
|
||||||
|
port = "8080"
|
||||||
|
}
|
||||||
|
|
||||||
|
root, err := filepath.Abs(".")
|
||||||
|
if err != nil {
|
||||||
|
log.Fatalf("resolve website directory: %v", err)
|
||||||
|
}
|
||||||
|
|
||||||
|
mux := http.NewServeMux()
|
||||||
|
registerPages(mux, root)
|
||||||
|
registerAssets(mux, root)
|
||||||
|
|
||||||
|
server := &http.Server{
|
||||||
|
Addr: ":" + port,
|
||||||
|
Handler: mux,
|
||||||
|
ReadHeaderTimeout: 5 * time.Second,
|
||||||
|
}
|
||||||
|
|
||||||
|
fmt.Printf("Venus Photo Studio And Lab running on port %s\n", port)
|
||||||
|
|
||||||
|
if err := server.ListenAndServe(); err != nil && err != http.ErrServerClosed {
|
||||||
|
log.Fatalf("start server: %v", err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
func registerPages(mux *http.ServeMux, root string) {
|
||||||
|
pages := []pageRoute{
|
||||||
|
{Path: "/", File: "index.html"},
|
||||||
|
{Path: "/about", File: "about.html"},
|
||||||
|
{Path: "/gallery", File: "gallery.html"},
|
||||||
|
{Path: "/services", File: "services.html"},
|
||||||
|
{Path: "/contact", File: "contact.html"},
|
||||||
|
}
|
||||||
|
|
||||||
|
for _, page := range pages {
|
||||||
|
route := page
|
||||||
|
|
||||||
|
mux.HandleFunc(route.Path, func(w http.ResponseWriter, r *http.Request) {
|
||||||
|
|
||||||
|
if r.URL.Path != route.Path {
|
||||||
|
http.NotFound(w, r)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
servePage(w, r, filepath.Join(root, route.File))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
redirects := map[string]string{
|
||||||
|
"/index.html": "/",
|
||||||
|
"/about.html": "/about",
|
||||||
|
"/gallery.html": "/gallery",
|
||||||
|
"/services.html": "/services",
|
||||||
|
"/contact.html": "/contact",
|
||||||
|
}
|
||||||
|
|
||||||
|
for from, to := range redirects {
|
||||||
|
|
||||||
|
target := to
|
||||||
|
|
||||||
|
mux.HandleFunc(from, func(w http.ResponseWriter, r *http.Request) {
|
||||||
|
http.Redirect(w, r, target, http.StatusMovedPermanently)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
func registerAssets(mux *http.ServeMux, root string) {
|
||||||
|
|
||||||
|
fileServer := http.FileServer(http.Dir(root))
|
||||||
|
|
||||||
|
mux.Handle("/assets/", fileServer)
|
||||||
|
|
||||||
|
mux.HandleFunc("/tailwind.config.js", func(w http.ResponseWriter, r *http.Request) {
|
||||||
|
http.ServeFile(w, r, filepath.Join(root, "tailwind.config.js"))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
func servePage(w http.ResponseWriter, r *http.Request, file string) {
|
||||||
|
|
||||||
|
if r.Method != http.MethodGet && r.Method != http.MethodHead {
|
||||||
|
http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
w.Header().Set("Cache-Control", "no-cache")
|
||||||
|
|
||||||
|
http.ServeFile(w, r, file)
|
||||||
|
}
|
||||||
19
package.json
Normal file
19
package.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"name": "venus-photo-studio-and-lab",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Go-served premium website for Venus Photo Studio And Lab photography and videography.",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "go run main.go",
|
||||||
|
"start": "go run main.go"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"photography",
|
||||||
|
"golang",
|
||||||
|
"static-site",
|
||||||
|
"tailwind",
|
||||||
|
"aos"
|
||||||
|
],
|
||||||
|
"author": "Venus Photo Studio And Lab",
|
||||||
|
"license": "UNLICENSED"
|
||||||
|
}
|
||||||
280
services.html
Normal file
280
services.html
Normal file
@ -0,0 +1,280 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Explore photography and videography services from Venus Photo Studio And Lab including wedding photography, cinematic video, kids photography, albums, and event coverage.">
|
||||||
|
<title>Services | Venus Photo Studio And Lab Karaikal</title>
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<meta name="keywords" content="Venus Photo Studio And Lab, Karaikal photography studio, photography studio in Karaikal, wedding photographer Karaikal, photo lab Karaikal, candid photography, videography, album design">
|
||||||
|
<link rel="canonical" href="/services">
|
||||||
|
<meta property="og:site_name" content="Venus Photo Studio And Lab">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:title" content="Services | Venus Photo Studio And Lab Karaikal">
|
||||||
|
<meta property="og:description" content="Explore photography and videography services from Venus Photo Studio And Lab including wedding photography, cinematic video, kids photography, albums, and event coverage.">
|
||||||
|
<meta property="og:url" content="/services">
|
||||||
|
<meta property="og:image" content="/assets/images/logo/venus-monogram.jpg">
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="twitter:title" content="Services | Venus Photo Studio And Lab Karaikal">
|
||||||
|
<meta name="twitter:description" content="Explore photography and videography services from Venus Photo Studio And Lab including wedding photography, cinematic video, kids photography, albums, and event coverage.">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link rel="preconnect" href="https://images.unsplash.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
window.tailwind = window.tailwind || {};
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
night: "#0B0B0B",
|
||||||
|
gold: "#D4AF37",
|
||||||
|
ivory: "#F7F2E8",
|
||||||
|
aubergine: "#241424"
|
||||||
|
},
|
||||||
|
maxWidth: {
|
||||||
|
content: "1180px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="assets/css/style.css">
|
||||||
|
</head>
|
||||||
|
<body class="site-shell" data-page="services">
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="mx-auto flex h-20 max-w-content items-center justify-between px-5 lg:px-8">
|
||||||
|
<a href="/" class="flex items-center gap-3" aria-label="Venus Photo Studio And Lab home">
|
||||||
|
<img src="assets/images/logo/venus-monogram.jpg" class="h-11 w-11" alt="" width="44" height="44">
|
||||||
|
<span class="leading-tight">
|
||||||
|
<span class="block font-display text-lg font-bold text-white sm:text-xl">Venus Photo Studio</span>
|
||||||
|
<span class="block text-[0.62rem] font-bold uppercase tracking-[0.18em] text-gold">And Lab | Photography & Film</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<nav class="hidden items-center gap-8 lg:flex" aria-label="Primary navigation">
|
||||||
|
<a href="/" class="nav-link text-sm font-semibold" data-nav="home">Home</a>
|
||||||
|
<a href="/about" class="nav-link text-sm font-semibold" data-nav="about">About</a>
|
||||||
|
<a href="/gallery" class="nav-link text-sm font-semibold" data-nav="gallery">Gallery</a>
|
||||||
|
<a href="/services" class="nav-link text-sm font-semibold" data-nav="services">Services</a>
|
||||||
|
<a href="/contact" class="nav-link text-sm font-semibold" data-nav="contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
<div class="hidden items-center gap-3 lg:flex">
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="ghost-button">
|
||||||
|
<i data-lucide="instagram" class="h-4 w-4"></i>
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<button class="grid h-11 w-11 place-items-center border border-white/15 text-white lg:hidden" type="button" data-menu-toggle aria-expanded="false" aria-label="Open navigation">
|
||||||
|
<i data-menu-icon data-lucide="menu" class="h-5 w-5"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-panel border-t border-white/10 bg-night/95 lg:hidden" data-mobile-panel>
|
||||||
|
<nav class="mx-auto grid max-w-content gap-1 px-5 py-5" aria-label="Mobile navigation">
|
||||||
|
<a href="/" class="nav-link py-3 text-base font-semibold" data-nav="home">Home</a>
|
||||||
|
<a href="/about" class="nav-link py-3 text-base font-semibold" data-nav="about">About</a>
|
||||||
|
<a href="/gallery" class="nav-link py-3 text-base font-semibold" data-nav="gallery">Gallery</a>
|
||||||
|
<a href="/services" class="nav-link py-3 text-base font-semibold" data-nav="services">Services</a>
|
||||||
|
<a href="/contact" class="nav-link py-3 text-base font-semibold" data-nav="contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="cinematic-hero hero-services relative flex items-center bg-cover bg-center pt-28">
|
||||||
|
<div class="relative mx-auto w-full max-w-content px-5 py-16 lg:px-8">
|
||||||
|
<div class="max-w-4xl">
|
||||||
|
<span class="section-kicker reveal-text">Services</span>
|
||||||
|
<h1 class="reveal-text mt-6 font-display text-5xl font-bold leading-tight text-white sm:text-6xl lg:text-7xl">Premium coverage for the moments that become legacy.</h1>
|
||||||
|
<p class="reveal-text mt-6 max-w-2xl text-base leading-8 text-white/74 sm:text-lg">Choose focused coverage or build a custom collection across photography, cinematography, albums, reels, and event storytelling.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="hero-scroll" aria-hidden="true"></span>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mx-auto max-w-content px-5 py-20 lg:px-8 lg:py-28">
|
||||||
|
<div class="mb-10 max-w-3xl" data-aos="fade-up">
|
||||||
|
<span class="section-kicker">Service Cards</span>
|
||||||
|
<h2 class="mt-4 font-display text-4xl font-bold text-white sm:text-5xl">Every offering is shaped for clarity, elegance, and delivery quality.</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
<article class="service-card" data-aos="fade-up">
|
||||||
|
<div class="relative">
|
||||||
|
<img src="https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=900&q=80" alt="Wedding photography service" loading="lazy">
|
||||||
|
<span class="absolute left-5 top-5 grid h-11 w-11 place-items-center bg-black/70 text-gold backdrop-blur"><i data-lucide="gem" class="h-5 w-5"></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="font-display text-2xl font-bold text-white">Wedding Photography</h3>
|
||||||
|
<p class="mt-3 text-sm leading-7 text-white/64">Full-day candid, traditional, portrait, ritual, family, and decor coverage with refined color grading.</p>
|
||||||
|
<a href="https://wa.me/919894041125?text=Hi%20Venus%20Photo%20Studio%20And%20Lab%2C%20I%20want%20to%20enquire%20about%20Wedding%20Photography." target="_blank" rel="noopener" class="ghost-button mt-6">
|
||||||
|
<i data-lucide="message-circle" class="h-4 w-4"></i>
|
||||||
|
WhatsApp
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="service-card" data-aos="fade-up" data-aos-delay="80">
|
||||||
|
<div class="relative">
|
||||||
|
<img src="https://images.unsplash.com/photo-1530023367847-a683933f4172?auto=format&fit=crop&w=900&q=80" alt="Cinematic videography service" loading="lazy">
|
||||||
|
<span class="absolute left-5 top-5 grid h-11 w-11 place-items-center bg-black/70 text-gold backdrop-blur"><i data-lucide="video" class="h-5 w-5"></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="font-display text-2xl font-bold text-white">Cinematic Videography</h3>
|
||||||
|
<p class="mt-3 text-sm leading-7 text-white/64">Trailer films, highlight reels, long-form edits, interviews, and mood-led storytelling for every event rhythm.</p>
|
||||||
|
<a href="https://wa.me/919894041125?text=Hi%20Venus%20Photo%20Studio%20And%20Lab%2C%20I%20want%20to%20enquire%20about%20Cinematic%20Videography." target="_blank" rel="noopener" class="ghost-button mt-6">
|
||||||
|
<i data-lucide="message-circle" class="h-4 w-4"></i>
|
||||||
|
WhatsApp
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="service-card" data-aos="fade-up" data-aos-delay="160">
|
||||||
|
<div class="relative">
|
||||||
|
<img src="https://images.unsplash.com/photo-1518199266791-5375a83190b7?auto=format&fit=crop&w=900&q=80" alt="Couple shoot service" loading="lazy">
|
||||||
|
<span class="absolute left-5 top-5 grid h-11 w-11 place-items-center bg-black/70 text-gold backdrop-blur"><i data-lucide="heart" class="h-5 w-5"></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="font-display text-2xl font-bold text-white">Couple Shoots</h3>
|
||||||
|
<p class="mt-3 text-sm leading-7 text-white/64">Pre-wedding, engagement, anniversary, and editorial couple portraits directed with a relaxed mood.</p>
|
||||||
|
<a href="https://wa.me/919894041125?text=Hi%20Venus%20Photo%20Studio%20And%20Lab%2C%20I%20want%20to%20enquire%20about%20Couple%20Shoots." target="_blank" rel="noopener" class="ghost-button mt-6">
|
||||||
|
<i data-lucide="message-circle" class="h-4 w-4"></i>
|
||||||
|
WhatsApp
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="service-card" data-aos="fade-up">
|
||||||
|
<div class="relative">
|
||||||
|
<img src="https://images.unsplash.com/photo-1546015720-b8b30df5aa27?auto=format&fit=crop&w=900&q=80" alt="Kids photography service" loading="lazy">
|
||||||
|
<span class="absolute left-5 top-5 grid h-11 w-11 place-items-center bg-black/70 text-gold backdrop-blur"><i data-lucide="baby" class="h-5 w-5"></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="font-display text-2xl font-bold text-white">Kids Photography</h3>
|
||||||
|
<p class="mt-3 text-sm leading-7 text-white/64">Baby portraits, birthdays, family lifestyle sessions, and patient studio direction for little personalities.</p>
|
||||||
|
<a href="https://wa.me/919894041125?text=Hi%20Venus%20Photo%20Studio%20And%20Lab%2C%20I%20want%20to%20enquire%20about%20Kids%20Photography." target="_blank" rel="noopener" class="ghost-button mt-6">
|
||||||
|
<i data-lucide="message-circle" class="h-4 w-4"></i>
|
||||||
|
WhatsApp
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="service-card" data-aos="fade-up" data-aos-delay="80">
|
||||||
|
<div class="relative">
|
||||||
|
<img src="https://images.unsplash.com/photo-1495020689067-958852a7765e?auto=format&fit=crop&w=900&q=80" alt="Album design service" loading="lazy">
|
||||||
|
<span class="absolute left-5 top-5 grid h-11 w-11 place-items-center bg-black/70 text-gold backdrop-blur"><i data-lucide="book-open" class="h-5 w-5"></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="font-display text-2xl font-bold text-white">Album Design</h3>
|
||||||
|
<p class="mt-3 text-sm leading-7 text-white/64">Heirloom album layouts, photo selection, sequencing, cover design, and print-ready storytelling.</p>
|
||||||
|
<a href="https://wa.me/919894041125?text=Hi%20Venus%20Photo%20Studio%20And%20Lab%2C%20I%20want%20to%20enquire%20about%20Album%20Design." target="_blank" rel="noopener" class="ghost-button mt-6">
|
||||||
|
<i data-lucide="message-circle" class="h-4 w-4"></i>
|
||||||
|
WhatsApp
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="service-card" data-aos="fade-up" data-aos-delay="160">
|
||||||
|
<div class="relative">
|
||||||
|
<img src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?auto=format&fit=crop&w=900&q=80" alt="Event coverage service" loading="lazy">
|
||||||
|
<span class="absolute left-5 top-5 grid h-11 w-11 place-items-center bg-black/70 text-gold backdrop-blur"><i data-lucide="sparkles" class="h-5 w-5"></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="font-display text-2xl font-bold text-white">Event Coverage</h3>
|
||||||
|
<p class="mt-3 text-sm leading-7 text-white/64">Birthdays, engagements, corporate events, stage programs, rituals, and social celebrations.</p>
|
||||||
|
<a href="https://wa.me/919894041125?text=Hi%20Venus%20Photo%20Studio%20And%20Lab%2C%20I%20want%20to%20enquire%20about%20Event%20Coverage." target="_blank" rel="noopener" class="ghost-button mt-6">
|
||||||
|
<i data-lucide="message-circle" class="h-4 w-4"></i>
|
||||||
|
WhatsApp
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="border-y border-white/10 bg-white/[0.035]">
|
||||||
|
<div class="mx-auto max-w-content px-5 py-20 lg:px-8 lg:py-28">
|
||||||
|
<div class="mb-10 max-w-3xl" data-aos="fade-up">
|
||||||
|
<span class="section-kicker">Booking Flow</span>
|
||||||
|
<h2 class="mt-4 font-display text-4xl font-bold text-white sm:text-5xl">A clear process keeps the creative work effortless.</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-4 md:grid-cols-4">
|
||||||
|
<div class="lux-card p-6" data-aos="fade-up">
|
||||||
|
<span class="font-display text-4xl text-gold">01</span>
|
||||||
|
<h3 class="mt-5 font-display text-2xl font-bold">Enquire</h3>
|
||||||
|
<p class="mt-3 text-sm leading-7 text-white/62">Share date, event type, venue, and expected coverage.</p>
|
||||||
|
</div>
|
||||||
|
<div class="lux-card p-6" data-aos="fade-up" data-aos-delay="80">
|
||||||
|
<span class="font-display text-4xl text-gold">02</span>
|
||||||
|
<h3 class="mt-5 font-display text-2xl font-bold">Plan</h3>
|
||||||
|
<p class="mt-3 text-sm leading-7 text-white/62">Choose services, timeline, deliverables, and visual mood.</p>
|
||||||
|
</div>
|
||||||
|
<div class="lux-card p-6" data-aos="fade-up" data-aos-delay="160">
|
||||||
|
<span class="font-display text-4xl text-gold">03</span>
|
||||||
|
<h3 class="mt-5 font-display text-2xl font-bold">Capture</h3>
|
||||||
|
<p class="mt-3 text-sm leading-7 text-white/62">Work with a prepared team and thoughtful on-day direction.</p>
|
||||||
|
</div>
|
||||||
|
<div class="lux-card p-6" data-aos="fade-up" data-aos-delay="240">
|
||||||
|
<span class="font-display text-4xl text-gold">04</span>
|
||||||
|
<h3 class="mt-5 font-display text-2xl font-bold">Deliver</h3>
|
||||||
|
<p class="mt-3 text-sm leading-7 text-white/62">Receive edited photos, films, reels, and album-ready files.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mx-auto max-w-content px-5 py-20 lg:px-8 lg:py-28">
|
||||||
|
<div class="grid items-center gap-10 lg:grid-cols-[0.9fr_1.1fr]">
|
||||||
|
<div data-aos="fade-right">
|
||||||
|
<span class="section-kicker">Custom Packages</span>
|
||||||
|
<h2 class="mt-4 font-display text-4xl font-bold text-white sm:text-5xl">Need a combined photo, film, album, and reel plan?</h2>
|
||||||
|
<p class="mt-5 leading-8 text-white/68">Venus Photo Studio And Lab can design a custom collection for multi-day weddings, family events, and venue-heavy celebrations where coverage needs to feel complete.</p>
|
||||||
|
<a href="https://wa.me/919894041125?text=Hi%20Venus%20Photo%20Studio%20And%20Lab%2C%20I%20want%20a%20custom%20photo%20and%20video%20package." target="_blank" rel="noopener" class="lux-button mt-8">
|
||||||
|
<i data-lucide="message-circle" class="h-4 w-4"></i>
|
||||||
|
Build My Package
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-4 sm:grid-cols-2" data-aos="fade-left">
|
||||||
|
<div class="image-frame min-h-[24rem] sm:mt-10">
|
||||||
|
<img class="parallax-img h-full" src="https://images.unsplash.com/photo-1520854221256-17451cc331bf?auto=format&fit=crop&w=900&q=82" alt="Wedding couple service preview" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="image-frame min-h-[24rem]">
|
||||||
|
<img class="parallax-img h-full" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=900&q=82" alt="Event decor service preview" loading="lazy">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="border-t border-white/10 bg-black/70">
|
||||||
|
<div class="mx-auto grid max-w-content gap-10 px-5 py-12 md:grid-cols-[1.2fr_0.8fr_0.8fr] lg:px-8">
|
||||||
|
<div>
|
||||||
|
<a href="/" class="flex items-center gap-3" aria-label="Venus Photo Studio And Lab home">
|
||||||
|
<img src="assets/images/logo/venus-monogram.jpg" class="h-11 w-11" alt="" width="44" height="44">
|
||||||
|
<span class="font-display text-2xl font-bold text-white">Venus Photo Studio And Lab</span>
|
||||||
|
</a>
|
||||||
|
<p class="mt-5 max-w-md leading-7 text-white/58">Premium photography and cinematic videography for weddings, portraits, family milestones, and events in Karaikal.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-bold uppercase tracking-[0.18em] text-gold">Studio</p>
|
||||||
|
<div class="mt-5 grid gap-3 text-sm text-white/64">
|
||||||
|
<a href="/about" class="hover:text-gold">About</a>
|
||||||
|
<a href="/gallery" class="hover:text-gold">Gallery</a>
|
||||||
|
<a href="/services" class="hover:text-gold">Services</a>
|
||||||
|
<a href="/contact" class="hover:text-gold">Contact</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-bold uppercase tracking-[0.18em] text-gold">Connect</p>
|
||||||
|
<div class="mt-5 grid gap-3 text-sm text-white/64">
|
||||||
|
<a href="tel:+919894041125" class="hover:text-gold">098940 41125</a>
|
||||||
|
<a href="https://wa.me/919894041125" target="_blank" rel="noopener" class="hover:text-gold">WhatsApp Enquiry</a>
|
||||||
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="hover:text-gold">Instagram</a>
|
||||||
|
<span>Door no. 24, Kannadiyar St, Karaikal, Puducherry 609602</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/10 px-5 py-5 text-center text-xs font-semibold uppercase tracking-[0.16em] text-white/42">
|
||||||
|
© <span data-year></span> Venus Photo Studio And Lab. Crafted for timeless stories.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/lucide@latest"></script>
|
||||||
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||||
|
<script src="assets/js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
26
tailwind.config.js
Normal file
26
tailwind.config.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
"./*.html",
|
||||||
|
"./components/**/*.html",
|
||||||
|
"./assets/js/**/*.js"
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
night: "#0B0B0B",
|
||||||
|
gold: "#D4AF37",
|
||||||
|
ivory: "#F7F2E8",
|
||||||
|
aubergine: "#241424"
|
||||||
|
},
|
||||||
|
maxWidth: {
|
||||||
|
content: "1180px"
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
display: ["Playfair Display", "Georgia", "serif"],
|
||||||
|
sans: ["Montserrat", "Poppins", "system-ui", "sans-serif"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: []
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user