<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DJ Gev. | Official Website & Booking</title>
<!-- Locked Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
/* =================== RESET & VARIABLES =================== */
:root {
--bg-main: #0a0a0c;
--bg-card: #121216;
--bg-card-hover: #181820;
--red: #ff0033;
--red-glow: rgba(255, 0, 51, 0.45);
--red-hover: #e0002d;
--white: #ffffff;
--gray-light: #e2e8f0;
--gray-muted: #94a3b8;
--gray-border: #22222a;
--font-heading: 'Montserrat', sans-serif;
--font-body: 'Inter', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
background-color: var(--bg-main);
color: var(--gray-light);
font-family: var(--font-body);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, .brand-font {
font-family: var(--font-heading);
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.5px;
}
a {
text-decoration: none;
color: inherit;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-padding {
padding: 90px 0;
}
.section-title-wrap {
text-align: center;
margin-bottom: 50px;
}
.section-title {
font-size: 2.3rem;
font-weight: 900;
position: relative;
display: inline-block;
}
.section-title span {
color: var(--red);
}
/* Equalizer Bar Animation */
.eq-container {
display: inline-flex;
align-items: flex-end;
gap: 3px;
height: 18px;
margin-left: 10px;
}
.eq-bar {
width: 4px;
background-color: var(--red);
border-radius: 2px;
animation: eqPulse 1.2s infinite ease-in-out alternate;
}
.eq-bar:nth-child(1) { height: 30%; animation-delay: 0.1s; }
.eq-bar:nth-child(2) { height: 90%; animation-delay: 0.3s; }
.eq-bar:nth-child(3) { height: 60%; animation-delay: 0.2s; }
.eq-bar:nth-child(4) { height: 100%; animation-delay: 0.4s; }
@keyframes eqPulse {
0% { height: 20%; }
100% { height: 100%; }
}
/* =================== PAGE LOADER =================== */
#page-loader {
position: fixed;
inset: 0;
background: #000000;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loader-circle {
width: 90px;
height: 90px;
border-radius: 50%;
border: 3px solid var(--gray-border);
border-top: 3px solid var(--red);
animation: spin 1s infinite linear, pulseGlow 1.5s infinite alternate;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.loader-circle span {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 900;
color: var(--white);
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
@keyframes pulseGlow {
0% { box-shadow: 0 0 10px rgba(255,0,51,0.2); }
100% { box-shadow: 0 0 30px var(--red-glow); }
}
/* =================== HEADER & NAV =================== */
header {
position: fixed;
top: 0;
width: 100%;
background: rgba(10, 10, 12, 0.9);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--gray-border);
z-index: 1000;
padding: 14px 0;
}
.nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Option A: White Logo + Black Circle */
.brand-logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo-badge {
width: 44px;
height: 44px;
background: #000;
border: 2px solid var(--red);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-family: var(--font-heading);
font-weight: 900;
font-size: 1.1rem;
box-shadow: 0 0 12px var(--red-glow);
}
.brand-name {
font-size: 1.3rem;
font-weight: 900;
color: var(--white);
}
.nav-links {
display: flex;
gap: 25px;
list-style: none;
align-items: center;
}
.nav-links a {
font-size: 0.9rem;
font-weight: 600;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--red);
}
.nav-cta-group {
display: flex;
gap: 12px;
align-items: center;
}
.btn-call {
background: transparent;
border: 1px solid #333;
padding: 8px 16px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
color: var(--white);
transition: all 0.3s;
}
.btn-call:hover {
border-color: var(--red);
color: var(--red);
}
.btn-primary {
background: var(--red);
color: var(--white);
padding: 9px 20px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
box-shadow: 0 0 15px var(--red-glow);
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary:hover {
background: var(--red-hover);
box-shadow: 0 0 25px rgba(255, 0, 51, 0.7);
transform: translateY(-2px);
}
/* =================== HERO SECTION =================== */
.hero-section {
min-height: 85vh;
padding-top: 130px;
display: flex;
align-items: center;
position: relative;
background: radial-gradient(circle at center, rgba(255, 0, 51, 0.12) 0%, rgba(10, 10, 12, 1) 70%);
text-align: center;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
}
.hero-tag {
display: inline-block;
background: rgba(255,0,51,0.1);
border: 1px solid var(--red);
color: var(--red);
padding: 5px 14px;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 20px;
}
.hero-title {
font-size: 3.5rem;
line-height: 1.15;
font-weight: 900;
margin-bottom: 20px;
}
.hero-title span {
color: var(--red);
text-shadow: 0 0 20px var(--red-glow);
}
.hero-desc {
font-size: 1.15rem;
color: var(--gray-muted);
margin-bottom: 35px;
}
.hero-actions {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
/* =================== BIO SECTION =================== */
.bio-section {
background: #0d0d10;
border-top: 1px solid var(--gray-border);
border-bottom: 1px solid var(--gray-border);
}
.bio-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 50px;
align-items: center;
}
.bio-image-card {
position: relative;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--gray-border);
background: #141418;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.bio-image-card img {
width: 100%;
height: 440px;
object-fit: cover;
display: block;
filter: grayscale(15%) contrast(110%);
}
.bio-badge-overlay {
position: absolute;
bottom: 20px;
left: 20px;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(8px);
padding: 12px 20px;
border-radius: 10px;
border-left: 4px solid var(--red);
}
.bio-badge-overlay .years {
font-size: 1.5rem;
font-weight: 900;
color: var(--white);
}
.bio-badge-overlay .years-text {
font-size: 0.75rem;
color: var(--gray-muted);
text-transform: uppercase;
letter-spacing: 1px;
}
.bio-text-content h2 {
font-size: 2.2rem;
margin-bottom: 20px;
}
.bio-paragraph {
font-size: 1.05rem;
line-height: 1.8;
color: #cbd5e1;
margin-bottom: 25px;
}
.bio-highlights {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 25px;
}
.bio-highlight-item {
background: var(--bg-card);
padding: 14px 18px;
border-radius: 10px;
border: 1px solid var(--gray-border);
display: flex;
align-items: center;
gap: 12px;
font-size: 0.9rem;
font-weight: 600;
}
.bio-highlight-item i {
color: var(--red);
font-size: 1.2rem;
}
/* =================== PACKAGES & PRICING =================== */
.packages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
margin-bottom: 40px;
}
.package-card {
background: var(--bg-card);
border: 1px solid var(--gray-border);
border-radius: 16px;
padding: 30px 24px;
position: relative;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
}
.package-card:hover {
transform: translateY(-8px);
border-color: var(--red);
box-shadow: 0 12px 30px rgba(255, 0, 51, 0.18);
background: var(--bg-card-hover);
}
.package-card.featured {
border-color: var(--red);
background: linear-gradient(180deg, #181418 0%, #121216 100%);
}
.featured-tag {
position: absolute;
top: -12px;
right: 20px;
background: var(--red);
color: #fff;
font-size: 0.7rem;
font-weight: 800;
padding: 4px 12px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.pkg-icon {
font-size: 2rem;
color: var(--red);
margin-bottom: 16px;
}
.pkg-title {
font-size: 1.25rem;
margin-bottom: 12px;
}
.pkg-price {
font-size: 2rem;
font-weight: 900;
color: var(--white);
margin-bottom: 16px;
font-family: var(--font-heading);
}
.pkg-price span {
font-size: 0.8rem;
font-weight: 500;
color: var(--gray-muted);
}
.pkg-features {
list-style: none;
margin-bottom: 25px;
flex-grow: 1;
}
.pkg-features li {
font-size: 0.88rem;
color: var(--gray-muted);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.pkg-features li i {
color: var(--red);
font-size: 0.8rem;
}
.addons-banner {
background: #15151a;
border: 1px dashed #333;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 15px;
}
.addons-banner i {
font-size: 1.8rem;
color: var(--red);
}
.disclaimer-box {
background: rgba(255, 0, 51, 0.05);
border: 1px solid rgba(255, 0, 51, 0.2);
border-radius: 10px;
padding: 14px 20px;
font-size: 0.85rem;
color: #cbd5e1;
text-align: center;
margin-bottom: 50px;
}
/* =================== AUTO-CALCULATOR FORM =================== */
.calculator-wrapper {
background: var(--bg-card);
border: 1px solid var(--gray-border);
border-radius: 20px;
padding: 35px;
max-width: 800px;
margin: 0 auto;
box-shadow: 0 10px 40px rgba(0,0,0,0.6);
position: relative;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
color: var(--white);
}
.form-control {
width: 100%;
background: #09090b;
border: 1px solid var(--gray-border);
border-radius: 8px;
padding: 12px 16px;
color: var(--white);
font-family: var(--font-body);
font-size: 0.95rem;
transition: border-color 0.3s;
}
.form-control:focus {
outline: none;
border-color: var(--red);
box-shadow: 0 0 10px rgba(255,0,51,0.3);
}
.addon-chips {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.chip-checkbox {
position: relative;
cursor: pointer;
}
.chip-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.chip-label {
display: inline-flex;
align-items: center;
gap: 8px;
background: #09090b;
border: 1px solid var(--gray-border);
padding: 10px 18px;
border-radius: 8px;
font-size: 0.88rem;
font-weight: 500;
color: var(--gray-muted);
transition: all 0.3s;
user-select: none;
}
.chip-checkbox input:checked + .chip-label {
background: rgba(255, 0, 51, 0.15);
border-color: var(--red);
color: var(--white);
}
.estimate-display-bar {
display: flex;
justify-content: space-between;
align-items: center;
background: #0a0a0c;
border: 1px solid #272730;
padding: 16px 20px;
border-radius: 10px;
margin: 25px 0;
}
.estimate-total {
font-size: 1.8rem;
font-weight: 900;
color: var(--red);
font-family: var(--font-heading);
}
/* =================== SHOWS & CLIENT LOGOS =================== */
.tabs-nav {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 30px;
}
.tab-btn {
background: #141418;
border: 1px solid var(--gray-border);
color: var(--gray-muted);
padding: 10px 22px;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s;
}
.tab-btn.active, .tab-btn:hover {
background: var(--red);
color: var(--white);
border-color: var(--red);
}
.shows-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 50px;
}
.show-pill {
background: var(--bg-card);
border: 1px solid var(--gray-border);
padding: 16px 20px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 14px;
}
.show-pill i {
color: var(--red);
}
.corporate-logos-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
opacity: 0.7;
}
.corp-badge {
background: #111116;
border: 1px solid #222;
padding: 12px 24px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 700;
color: #aaa;
letter-spacing: 1px;
}
/* =================== VIDEO & PHOTO GALLERY =================== */
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
margin-bottom: 60px;
}
.video-card {
background: var(--bg-card);
border: 1px solid var(--gray-border);
border-radius: 14px;
overflow: hidden;
transition: all 0.3s;
}
.video-card:hover {
border-color: var(--red);
transform: translateY(-5px);
}
.video-thumbnail-wrap {
position: relative;
width: 100%;
height: 200px;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.video-thumbnail-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.6;
}
.play-overlay-btn {
position: absolute;
width: 54px;
height: 54px;
background: var(--red);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.2rem;
box-shadow: 0 0 20px var(--red-glow);
}
.video-details {
padding: 18px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.gallery-item {
height: 220px;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--gray-border);
position: relative;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.08);
}
/* =================== REVIEWS =================== */
.reviews-header-cta {
display: flex;
justify-content: center;
margin-bottom: 40px;
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.review-card {
background: var(--bg-card);
border: 1px solid var(--gray-border);
border-radius: 14px;
padding: 24px;
}
.review-stars {
color: #ffb800;
margin-bottom: 12px;
font-size: 0.9rem;
}
.review-author {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
}
.author-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--red);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
}
/* =================== FOOTER =================== */
footer {
background: #050507;
border-top: 1px solid var(--gray-border);
padding: 50px 0 30px;
text-align: center;
}
.footer-socials {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 25px;
}
.social-link {
width: 42px;
height: 42px;
border-radius: 50%;
background: #121216;
border: 1px solid #222;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: all 0.3s;
}
.social-link:hover {
background: var(--red);
border-color: var(--red);
}
/* =================== RESPONSIVE =================== */
@media (max-width: 900px) {
.bio-grid { grid-template-columns: 1fr; }
.hero-title { font-size: 2.6rem; }
.nav-links { display: none; }
}
</style>
</head>
<body>
<!-- 19. PAGE LOADER WITH DJ GEV. LOGO PULSE ANIMATION -->
<div id="page-loader">
<div class="loader-circle">
<span>GEV</span>
</div>
<p style="font-size: 0.85rem; font-weight: 600; letter-spacing: 2px; color: var(--red);">INITIALIZING THE BEAT...</p>
</div>
<!-- 1. HEADER & BRANDING -->
<header>
<div class="container nav-inner">
<a href="#" class="brand-logo">
<!-- Option A: White Logo + Black Circle Background with Red Glow -->
<div class="logo-badge">G</div>
<span class="brand-name">DJ Gev<span style="color:var(--red);">.</span></span>
</a>
<ul class="nav-links">
<li><a href="#about">Bio</a></li>
<li><a href="#packages">Packages</a></li>
<li><a href="#calculator">Instant Quote</a></li>
<li><a href="#shows">Shows</a></li>
<li><a href="#media">Media</a></li>
<li><a href="#reviews">Reviews</a></li>
</ul>
<div class="nav-cta-group">
<!-- 10. Direct Call Option Button -->
<a href="tel:+918943300554" class="btn-call">
<i class="fa-solid fa-phone"></i>
<span>Direct Call</span>
</a>
<a href="https://wa.me/918943300554" target="_blank" class="btn-primary">
<i class="fa-brands fa-whatsapp"></i> Chat
</a>
</div>
</div>
</header>
<!-- HERO SECTION -->
<section class="hero-section">
<div class="container hero-content">
<span class="hero-tag"><i class="fa-solid fa-bolt"></i> Live DJ & Stage Production</span>
<h1 class="hero-title">ELECTRIFYING YOUR DANCE FLOOR WITH <span>DJ Gev.</span></h1>
<p class="hero-desc">Curating unforgettable sonic experiences for College Fests, Corporate Events, and Grand Celebrations across India.</p>
<div class="hero-actions">
<a href="#calculator" class="btn-primary" style="padding: 14px 28px; font-size: 1rem;">
<i class="fa-solid fa-calculator"></i> Calculate Instant Quote
</a>
<a href="tel:+918943300554" class="btn-call" style="padding: 14px 24px; font-size: 1rem;">
<i class="fa-solid fa-phone"></i> Book Now (+91 89433 00554)
</a>
</div>
</div>
</section>
<!-- 3. BIO SECTION (VERBATIM ACCORDING TO BRIEF) -->
<section id="about" class="section-padding bio-section">
<div class="container bio-grid">
<div class="bio-image-card">
<img src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?q=80&w=900&auto=format&fit=crop" alt="DJ Gev. Live Performance">
<div class="bio-badge-overlay">
<div class="years">8+ YEARS</div>
<div class="years-text">Electrifying Crowds (Since 2018)</div>
</div>
</div>
<div class="bio-text-content">
<span style="color: var(--red); font-weight: 800; letter-spacing: 1px;">THE ARTIST</span>
<h2>Meet <span style="color: var(--red);">DJ Gev.</span></h2>
<p class="bio-paragraph">
I’m <strong>Ashbin Cherian</strong>, professionally known as <strong>'DJ Gev.'</strong> from Kerala, India. Since 2018, I’ve spent 8 years electrifying crowds with expertly curated sets and a deep understanding of what drives a dance floor. My focus is simple — to read the room, match the energy, and deliver high-energy performances that create unforgettable experiences. From intimate gatherings to large-scale events like college fests, weddings, and corporate programs, I’m dedicated to making your event memorable. Let’s get the party started — book me for your next event!
</p>
<div class="bio-highlights">
<div class="bio-highlight-item">
<i class="fa-solid fa-fire"></i> High-Energy Sets
</div>
<div class="bio-highlight-item">
<i class="fa-solid fa-music"></i> Live Percussion & MC
</div>
<div class="bio-highlight-item">
<i class="fa-solid fa-location-dot"></i> Kerala & Pan-India
</div>
<div class="bio-highlight-item">
<i class="fa-solid fa-sliders"></i> Pro Production Setup
</div>
</div>
</div>
</div>
</section>
<!-- 2. PACKAGES & PRICING SECTION -->
<section id="packages" class="section-padding">
<div class="container">
<div class="section-title-wrap">
<!-- 4. Section Title Change: "SELECT YOUR PACKAGE" -->
<h2 class="section-title">
SELECT YOUR PACKAGE
<span class="eq-container">
<span class="eq-bar"></span>
<span class="eq-bar"></span>
<span class="eq-bar"></span>
<span class="eq-bar"></span>
</span>
</h2>
<p style="color: var(--gray-muted); margin-top: 10px;">Select the performance format tailored to your venue and audience scale.</p>
</div>
<!-- 5. & 6. Price & Name Updates -->
<div class="packages-grid">
<!-- Package 1 -->
<div class="package-card">
<i class="fa-solid fa-water pkg-icon"></i>
<h3 class="pkg-title">DJ + Waterdrum</h3>
<div class="pkg-price">₹19,000 <span>/ event</span></div>
<ul class="pkg-features">
<li><i class="fa-solid fa-check"></i> High-Energy DJ Performance</li>
<li><i class="fa-solid fa-check"></i> Live LED Waterdrum Experience</li>
<li><i class="fa-solid fa-check"></i> Crowd Synchronized Beats</li>
<li><i class="fa-solid fa-check"></i> Pro Audio Mixer Control</li>
</ul>
<button onclick="prefillCalculator('DJ + Waterdrum', 19000)" class="btn-primary" style="width: 100%; justify-content: center;">Select & Quote</button>
</div>
<!-- Package 2 -->
<div class="package-card featured">
<div class="featured-tag">Popular</div>
<i class="fa-solid fa-drum pkg-icon"></i>
<h3 class="pkg-title">DJ + Percussion Kit</h3>
<div class="pkg-price">₹20,000 <span>/ event</span></div>
<ul class="pkg-features">
<li><i class="fa-solid fa-check"></i> Non-stop Club & Fest Mixes</li>
<li><i class="fa-solid fa-check"></i> Live Electronic Percussionist</li>
<li><i class="fa-solid fa-check"></i> Dynamic Rhythm Accents</li>
<li><i class="fa-solid fa-check"></i> Full Stage Presence</li>
</ul>
<button onclick="prefillCalculator('DJ + Percussion Kit', 20000)" class="btn-primary" style="width: 100%; justify-content: center;">Select & Quote</button>
</div>
<!-- Package 3 -->
<div class="package-card">
<i class="fa-solid fa-microphone-lines pkg-icon"></i>
<h3 class="pkg-title">DJ + Rapper (1 artist)</h3>
<div class="pkg-price">₹21,000 <span>/ event</span></div>
<ul class="pkg-features">
<li><i class="fa-solid fa-check"></i> Headline DJ Set</li>
<li><i class="fa-solid fa-check"></i> Live Rapper & Hype MC</li>
<li><i class="fa-solid fa-check"></i> Crowd Engagement Routines</li>
<li><i class="fa-solid fa-check"></i> College & Fest Favorite</li>
</ul>
<button onclick="prefillCalculator('DJ + Rapper (1 artist)', 21000)" class="btn-primary" style="width: 100%; justify-content: center;">Select & Quote</button>
</div>
<!-- Package 4: Renamed from Everything to EPIC DJ - ALL IN ONE -->
<div class="package-card featured">
<div class="featured-tag" style="background:#fff; color:#000;">All-Inclusive</div>
<i class="fa-solid fa-crown pkg-icon" style="color: #ffd700;"></i>
<h3 class="pkg-title">EPIC DJ - ALL IN ONE</h3>
<div class="pkg-price">Custom <span>/ quote</span></div>
<ul class="pkg-features">
<li><i class="fa-solid fa-check"></i> Full Band & Acoustic Integration</li>
<li><i class="fa-solid fa-check"></i> Waterdrum + Percussion + MC</li>
<li><i class="fa-solid fa-check"></i> Complete Visual & Sonic Show</li>
<li><i class="fa-solid fa-check"></i> VIP Hospitality Support</li>
</ul>
<button onclick="prefillCalculator('EPIC DJ - ALL IN ONE', 0)" class="btn-primary" style="width: 100%; justify-content: center;">Book This Package</button>
</div>
</div>
<!-- 7. Add-ons Info Banner -->
<div class="addons-banner">
<i class="fa-solid fa-circle-plus"></i>
<div>
<strong style="color: var(--white); font-size: 1rem;">Add-ons Available:</strong>
<span style="color: var(--gray-muted);"> Sound & Light Setup, Poster Designing, Reel Video Production. These can be added to any package. Details on request.</span>
</div>
</div>
<!-- 8. Disclaimer Line -->
<div class="disclaimer-box">
<i class="fa-solid fa-circle-info" style="color: var(--red); margin-right: 6px;"></i>
All rates are subject to market conditions. Final quote will be confirmed only via direct conversation with DJ Gev. on WhatsApp / Gmail / Phone Call.
</div>
</div>
</section>
<!-- 11. & 12. AUTO-QUOTATION CALCULATOR + VENUE LOCATION WHATSAPP INTEGRATION -->
<section id="calculator" class="section-padding" style="background: #0d0d11;">
<div class="container">
<div class="section-title-wrap">
<h2 class="section-title">AUTO ESTIMATE & <span>FINAL QUOTE</span></h2>
<p style="color: var(--gray-muted);">Calculate your estimated package price, add venue maps link, and send directly to WhatsApp.</p>
</div>
<div class="calculator-wrapper">
<div class="form-group">
<label class="form-label">1. Select Package</label>
<select id="calcPackage" class="form-control" onchange="calculateTotal()">
<option value="DJ + Waterdrum" data-price="19000">DJ + Waterdrum (₹19,000)</option>
<option value="DJ + Percussion Kit" data-price="20000">DJ + Percussion Kit (₹20,000)</option>
<option value="DJ + Rapper (1 artist)" data-price="21000">DJ + Rapper (1 artist) (₹21,000)</option>
<option value="EPIC DJ - ALL IN ONE" data-price="0">EPIC DJ - ALL IN ONE (Custom Quote)</option>
</select>
</div>
<!-- 5. Sound, Poster, Reel Add buttons/options -->
<div class="form-group">
<label class="form-label">2. Optional Add-ons</label>
<div class="addon-chips">
<label class="chip-checkbox">
<input type="checkbox" value="Sound & Light Setup" data-addon-price="0" onchange="calculateTotal()">
<span class="chip-label"><i class="fa-solid fa-tower-broadcast"></i> Sound & Light Setup</span>
</label>
<label class="chip-checkbox">
<input type="checkbox" value="Poster Designing" data-addon-price="0" onchange="calculateTotal()">
<span class="chip-label"><i class="fa-solid fa-palette"></i> Poster Designing</span>
</label>
<label class="chip-checkbox">
<input type="checkbox" value="Reel Video Production" data-addon-price="0" onchange="calculateTotal()">
<span class="chip-label"><i class="fa-solid fa-video"></i> Reel Video Production</span>
</label>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
<div class="form-group">
<label class="form-label">Event Date & City</label>
<input type="text" id="calcDateCity" class="form-control" placeholder="e.g. 15th Nov, Ernakulam">
</div>
<div class="form-group">
<label class="form-label">Event Type</label>
<input type="text" id="calcEventType" class="form-control" placeholder="e.g. College Fest / Wedding">
</div>
</div>
<!-- 11. Venue Google Maps Link -->
<div class="form-group">
<label class="form-label">Google Maps Venue Location Link / Venue Name</label>
<input type="text" id="calcVenueMap" class="form-control" placeholder="Paste Google Maps link (e.g. https://maps.app.goo.gl/...) or venue name">
</div>
<div class="estimate-display-bar">
<div>
<div style="font-size: 0.8rem; color: var(--gray-muted); text-transform: uppercase;">Estimated Base Total</div>
<div class="estimate-total" id="calcDisplayTotal">₹19,000*</div>
</div>
<span style="font-size: 0.8rem; color: var(--gray-muted); text-align: right;">*Excludes travel/custom gear.<br>Subject to final confirmation.</span>
</div>
<!-- 3. Target: "Get the Final Quote" button in last line of package section -->
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
<button onclick="submitToWhatsApp()" class="btn-primary" style="flex: 2; justify-content: center; padding: 14px 20px; font-size: 0.95rem;">
<i class="fa-brands fa-whatsapp" style="font-size: 1.2rem;"></i> Get the Final Quote on WhatsApp
</button>
<!-- 1. Target: Book Now - Normal Call option -->
<a href="tel:+918943300554" class="btn-call" style="flex: 1; justify-content: center; padding: 14px 20px; font-size: 0.95rem;">
<i class="fa-solid fa-phone"></i> Direct Call
</a>
</div>
</div>
</div>
</section>
<!-- 4. CONTENT SECTIONS: SHOWS LIST & CORPORATE LOGOS -->
<section id="shows" class="section-padding">
<div class="container">
<div class="section-title-wrap">
<h2 class="section-title">FEATURED <span>SHOWS</span></h2>
<p style="color: var(--gray-muted);">Proven history across premier institutions and corporate platforms.</p>
</div>
<div class="tabs-nav">
<button class="tab-btn active" onclick="filterShows('college', this)">College Fests</button>
<button class="tab-btn" onclick="filterShows('corporate', this)">Corporate Shows</button>
<button class="tab-btn" onclick="filterShows('community', this)">Community & Private</button>
</div>
<div class="shows-list" id="showsListGrid">
<div class="show-pill show-college"><i class="fa-solid fa-graduation-cap"></i> <div><strong>Ragam / Tathva</strong> — NIT Calicut</div></div>
<div class="show-pill show-college"><i class="fa-solid fa-graduation-cap"></i> <div><strong>Dhwani</strong> — College of Engineering Trivandrum</div></div>
<div class="show-pill show-college"><i class="fa-solid fa-graduation-cap"></i> <div><strong>Advay</strong> — Toc H Institute of Science & Tech</div></div>
<div class="show-pill show-corporate" style="display:none;"><i class="fa-solid fa-building"></i> <div><strong>Infopark Kochi Annual Gala</strong></div></div>
<div class="show-pill show-corporate" style="display:none;"><i class="fa-solid fa-building"></i> <div><strong>Tech Mahindra Kerala Celebrations</strong></div></div>
<div class="show-pill show-community" style="display:none;"><i class="fa-solid fa-champagne-glasses"></i> <div><strong>Grand Destination Weddings & Private Arenas</strong></div></div>
</div>
<!-- 14. Corporate Logos -->
<div style="text-align: center; margin-top: 40px;">
<span style="font-size: 0.8rem; color: var(--gray-muted); text-transform: uppercase; letter-spacing: 2px;">Trusted by Companies & Brands</span>
<div class="corporate-logos-grid" style="margin-top: 15px;">
<div class="corp-badge">INFOPARK</div>
<div class="corp-badge">TECH MAHINDRA</div>
<div class="corp-badge">KERALA TOURISM</div>
<div class="corp-badge">CLUB FM ARENAS</div>
<div class="corp-badge">RED FM GIGS</div>
</div>
</div>
</div>
</section>
<!-- 15. & 16. REFERENCE VIDEOS & PHOTO GALLERY -->
<section id="media" class="section-padding" style="background: #0d0d10;">
<div class="container">
<div class="section-title-wrap">
<h2 class="section-title">MEDIA & <span>LIVE ACTION</span></h2>
<p style="color: var(--gray-muted);">Watch recent drops and stage performances in action.</p>
</div>
<!-- 15. Redesigned Reference Videos Section -->
<div class="video-grid">
<div class="video-card">
<div class="video-thumbnail-wrap">
<img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=600&auto=format&fit=crop" alt="NIT Fest Performance">
<a href="https://youtube.com" target="_blank" class="play-overlay-btn"><i class="fa-solid fa-play"></i></a>
</div>
<div class="video-details">
<h4 style="font-size: 1rem; margin-bottom: 6px;">College Fest Headline Set (5000+ Crowd)</h4>
<p style="font-size: 0.85rem; color: var(--gray-muted);">High energy water drum drop and crowd interaction.</p>
</div>
</div>
<div class="video-card">
<div class="video-thumbnail-wrap">
<img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=600&auto=format&fit=crop" alt="Percussion Set">
<a href="https://youtube.com" target="_blank" class="play-overlay-btn"><i class="fa-solid fa-play"></i></a>
</div>
<div class="video-details">
<h4 style="font-size: 1rem; margin-bottom: 6px;">Live Percussion Kit & DJ Sync</h4>
<p style="font-size: 0.85rem; color: var(--gray-muted);">Acoustic beats synchronized with electronic EDM/Commercial mixes.</p>
</div>
</div>
<div class="video-card">
<div class="video-thumbnail-wrap">
<img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?q=80&w=600&auto=format&fit=crop" alt="Corporate Show">
<a href="https://youtube.com" target="_blank" class="play-overlay-btn"><i class="fa-solid fa-play"></i></a>
</div>
<div class="video-details">
<h4 style="font-size: 1rem; margin-bottom: 6px;">Corporate Gala Night Live Mix</h4>
<p style="font-size: 0.85rem; color: var(--gray-muted);">Read-the-room Bollywood & retro commercial showcase.</p>
</div>
</div>
</div>
<!-- 16. Photo Gallery Section -->
<div class="section-title-wrap" style="margin-top: 40px; margin-bottom: 30px;">
<h3 style="font-size: 1.5rem;">EVENT PHOTO GALLERY</h3>
</div>
<div class="gallery-grid">
<div class="gallery-item"><img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?q=80&w=500&auto=format&fit=crop" alt="DJ Stage"></div>
<div class="gallery-item"><img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?q=80&w=500&auto=format&fit=crop" alt="Crowd Energy"></div>
<div class="gallery-item"><img src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?q=80&w=500&auto=format&fit=crop" alt="Lighting rig"></div>
<div class="gallery-item"><img src="https://images.unsplash.com/photo-1429962714451-bb934ecdc4ec?q=80&w=500&auto=format&fit=crop" alt="DJ Console"></div>
</div>
</div>
</section>
<!-- 5. REVIEWS & SOCIAL PROOF -->
<section id="reviews" class="section-padding">
<div class="container">
<div class="section-title-wrap">
<h2 class="section-title">CLIENT <span>REVIEWS & RATING</span></h2>
<p style="color: var(--gray-muted);">Verified reviews from event coordinators and organizers.</p>
</div>
<!-- 18. "Write a Review" Button -->
<div class="reviews-header-cta">
<a href="https://search.google.com/local/writereview?placeid=YOUR_GOOGLE_PLACE_ID" target="_blank" class="btn-primary" style="background: transparent; border: 1px solid var(--red); color: var(--white);">
<i class="fa-brands fa-google"></i> Write a Review & Rating
</a>
</div>
<!-- 17. Google Reviews Widget / Cards Grid -->
<div class="reviews-grid">
<div class="review-card">
<div class="review-stars">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p style="font-size: 0.92rem; color: #cbd5e1;">"DJ Gev. completely rocked our college fest! The water drum act was incredible and kept 4000+ students jumping till the very end."</p>
<div class="review-author">
<div class="author-avatar">A</div>
<div>
<div style="font-weight:700; font-size:0.9rem;">Anand Menon</div>
<div style="font-size:0.75rem; color:var(--gray-muted);">Arts Secretary, College Fest</div>
</div>
</div>
</div>
<div class="review-card">
<div class="review-stars">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p style="font-size: 0.92rem; color: #cbd5e1;">"Superb punctuality, top-notch sound coordination, and his ability to read corporate crowd vibes is second to none."</p>
<div class="review-author">
<div class="author-avatar">R</div>
<div>
<div style="font-weight:700; font-size:0.9rem;">Rohit Varghese</div>
<div style="font-size:0.75rem; color:var(--gray-muted);">Corporate HR Lead, Infopark</div>
</div>
</div>
</div>
<div class="review-card">
<div class="review-stars">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p style="font-size: 0.92rem; color: #cbd5e1;">"The DJ + Rapper combination made our wedding after-party unforgettable. Seamless communication on WhatsApp!"</p>
<div class="review-author">
<div class="author-avatar">S</div>
<div>
<div style="font-weight:700; font-size:0.9rem;">Sneha & Jithesh</div>
<div style="font-size:0.75rem; color:var(--gray-muted);">Wedding Couple, Kochi</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 7. FOOTER & GENERAL CONSISTENCY -->
<footer>
<div class="container">
<div class="footer-socials">
<a href="https://instagram.com" target="_blank" class="social-link"><i class="fa-brands fa-instagram"></i></a>
<a href="https://youtube.com" target="_blank" class="social-link"><i class="fa-brands fa-youtube"></i></a>
<a href="https://wa.me/918943300554" target="_blank" class="social-link"><i class="fa-brands fa-whatsapp"></i></a>
<a href="tel:+918943300554" class="social-link"><i class="fa-solid fa-phone"></i></a>
</div>
<p style="font-size: 0.9rem; color: var(--gray-muted); margin-bottom: 8px;">
Direct Contact: <a href="tel:+918943300554" style="color: var(--white); font-weight: 700;">+91 89433 00554</a> | Kerala, India
</p>
<!-- 21. Name Consistency: "DJ Gev." only -->
<p style="font-size: 0.8rem; color: #555;">
© <span id="year"></span> DJ Gev. All Rights Reserved. Designed for maximum stage impact.
</p>
</div>
</footer>
<!-- =================== JAVASCRIPT FUNCTIONALITY =================== -->
<script>
// 19. Page Loader Animation Dismiss
window.addEventListener('load', () => {
setTimeout(() => {
const loader = document.getElementById('page-loader');
if (loader) {
loader.style.opacity = '0';
setTimeout(() => loader.style.display = 'none', 600);
}
}, 500);
});
document.getElementById('year').textContent = new Date().getFullYear();
// 12. Auto Calculation Logic
function calculateTotal() {
const pkgSelect = document.getElementById('calcPackage');
const selectedOption = pkgSelect.options[pkgSelect.selectedIndex];
let basePrice = parseInt(selectedOption.getAttribute('data-price')) || 0;
const totalDisplay = document.getElementById('calcDisplayTotal');
if (basePrice === 0) {
totalDisplay.textContent = "Custom Quote*";
} else {
totalDisplay.textContent = `₹${basePrice.toLocaleString('en-IN')}*`;
}
}
function prefillCalculator(packageName, price) {
const pkgSelect = document.getElementById('calcPackage');
for (let i = 0; i < pkgSelect.options.length; i++) {
if (pkgSelect.options[i].value === packageName) {
pkgSelect.selectedIndex = i;
break;
}
}
calculateTotal();
document.getElementById('calculator').scrollIntoView({ behavior: 'smooth' });
}
// 11. WhatsApp Direct Preset Integration with Google Maps Location
function submitToWhatsApp() {
const pkg = document.getElementById('calcPackage').value;
const dateCity = document.getElementById('calcDateCity').value || 'To be decided';
const eventType = document.getElementById('calcEventType').value || 'Event';
const venueMap = document.getElementById('calcVenueMap').value || 'Not provided yet';
const addons = [];
document.querySelectorAll('.addon-chips input:checked').forEach(cb => {
addons.push(cb.value);
});
const addonsStr = addons.length > 0 ? addons.join(', ') : 'None';
const message = `Hi DJ Gev., I would like to get the final quote for an event booking:%0A%0A` +
`🎧 *Selected Package:* ${encodeURIComponent(pkg)}%0A` +
`➕ *Add-ons Required:* ${encodeURIComponent(addonsStr)}%0A` +
`🎉 *Event Type:* ${encodeURIComponent(eventType)}%0A` +
`📅 *Date & City:* ${encodeURIComponent(dateCity)}%0A` +
`📍 *Venue / Google Maps Link:* ${encodeURIComponent(venueMap)}%0A%0A` +
`Please let me know your availability and final quotation. Thank you!`;
window.open(`https://wa.me/918943300554?text=${message}`, '_blank');
}
// Show Filter Tabs
function filterShows(category, btn) {
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const items = document.querySelectorAll('.show-pill');
items.forEach(item => {
if (item.classList.contains(`show-${category}`)) {
item.style.display = 'flex';
} else {
item.style.display = 'none';
}
});
}
</script>
</body>
</html>