260 lines
14 KiB
TypeScript
260 lines
14 KiB
TypeScript
"use client";
|
||
import React, { useState } from "react";
|
||
import Header from "@/components/Header";
|
||
import Footer from "@/components/Footer";
|
||
|
||
|
||
// DO NOT OVERRIDE — Advertise page contact info and media kit sections
|
||
const adZones = [
|
||
{ name: "Leaderboard (Top)", dimensions: "728×90", placement: "Above the fold, homepage and article pages", cpm: "Contact for rates" },
|
||
{ name: "Sidebar Rectangle", dimensions: "300×250", placement: "Right sidebar, all pages", cpm: "Contact for rates" },
|
||
{ name: "In-Article Banner", dimensions: "728×90 or 300×250", placement: "Mid-article, high engagement zone", cpm: "Contact for rates" },
|
||
{ name: "Footer Leaderboard", dimensions: "728×90", placement: "Site-wide footer", cpm: "Contact for rates" },
|
||
{ name: "Mobile Banner", dimensions: "320×50", placement: "Mobile top banner", cpm: "Contact for rates" },
|
||
{ name: "Newsletter Leaderboard", dimensions: "728×90", placement: "Bi-weekly newsletter, top slot", cpm: "Contact for rates" },
|
||
{ name: "Newsletter Rectangle", dimensions: "300×250", placement: "Bi-weekly newsletter, mid-content", cpm: "Contact for rates" },
|
||
];
|
||
|
||
const stats = [
|
||
{ label: "Monthly Unique Visitors", value: "250,000+" },
|
||
{ label: "Newsletter Subscribers", value: "45,000+" },
|
||
{ label: "Social Media Followers", value: "30,000+" },
|
||
{ label: "Average Time on Site", value: "4:32 min" },
|
||
];
|
||
|
||
export default function AdvertisePage() {
|
||
const [formData, setFormData] = useState({ name: "", company: "", email: "", phone: "", message: "", budget: "" });
|
||
const [submitted, setSubmitted] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setLoading(true);
|
||
// Stub: log and show success
|
||
console.warn("[Advertise] Contact form submitted:", formData);
|
||
setTimeout(() => {
|
||
setSubmitted(true);
|
||
setLoading(false);
|
||
}, 800);
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-background">
|
||
<Header />
|
||
|
||
{/* Hero */}
|
||
{/* DO NOT OVERRIDE — Advertise page hero section */}
|
||
<div className="bg-[#0d1520] border-b border-[#1e3a5f] py-12">
|
||
<div className="max-w-container mx-auto px-4 text-center">
|
||
<span className="section-label mb-3 inline-block">Advertise</span>
|
||
<h1 className="font-heading text-white text-4xl font-bold mb-4">Reach Broadcast Engineering Professionals</h1>
|
||
<p className="text-[#aaa] font-body text-lg max-w-2xl mx-auto mb-6">
|
||
Broadcast Beat is the leading digital platform for broadcast engineering professionals. Connect your brand with decision-makers, engineers, and executives across the broadcast industry.
|
||
</p>
|
||
<a
|
||
href="#contact"
|
||
className="btn-subscribe py-3 px-8 text-base inline-block">
|
||
Request Media Kit
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<main className="max-w-container mx-auto px-4 py-10">
|
||
{/* Audience stats */}
|
||
<section className="mb-12">
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<span className="section-label">Our Audience</span>
|
||
<div className="flex-1 h-px bg-[#2a2a2a]" />
|
||
</div>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
{stats.map((stat) => (
|
||
<div key={stat.label} className="bg-[#111] border border-[#222] p-5 text-center">
|
||
<div className="font-heading text-[#3b82f6] text-2xl font-bold mb-1">{stat.value}</div>
|
||
<div className="font-body text-[#777] text-xs uppercase tracking-wide">{stat.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Ad zones */}
|
||
<section className="mb-12">
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<span className="section-label">Ad Placements</span>
|
||
<div className="flex-1 h-px bg-[#2a2a2a]" />
|
||
</div>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm font-body">
|
||
<thead>
|
||
<tr className="border-b border-[#222]">
|
||
<th className="text-left py-3 px-4 text-[#3b82f6] font-bold text-xs uppercase tracking-wider">Placement</th>
|
||
<th className="text-left py-3 px-4 text-[#3b82f6] font-bold text-xs uppercase tracking-wider">Dimensions</th>
|
||
<th className="text-left py-3 px-4 text-[#3b82f6] font-bold text-xs uppercase tracking-wider">Location</th>
|
||
<th className="text-left py-3 px-4 text-[#3b82f6] font-bold text-xs uppercase tracking-wider">Rate</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{adZones.map((zone, i) => (
|
||
<tr key={zone.name} className={`border-b border-[#1a1a1a] ${i % 2 === 0 ? "bg-[#0d0d0d]" : "bg-[#111]"}`}>
|
||
<td className="py-3 px-4 text-[#e0e0e0] font-medium">{zone.name}</td>
|
||
<td className="py-3 px-4 text-[#888] font-mono text-xs">{zone.dimensions}</td>
|
||
<td className="py-3 px-4 text-[#777]">{zone.placement}</td>
|
||
<td className="py-3 px-4 text-[#3b82f6] font-medium">{zone.cpm}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p className="text-[#555] text-xs font-body mt-3">
|
||
* Newsletter placements exclude Blackmagic Design per client agreement. All other placements available site-wide.
|
||
</p>
|
||
</section>
|
||
|
||
{/* Contact form */}
|
||
{/* DO NOT OVERRIDE — Contact form and sales contact info */}
|
||
<section id="contact" className="mb-12">
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<span className="section-label">Contact Sales</span>
|
||
<div className="flex-1 h-px bg-[#2a2a2a]" />
|
||
</div>
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||
{/* Contact info */}
|
||
<div className="lg:col-span-4">
|
||
<div className="bg-[#111] border border-[#222] p-6">
|
||
<h3 className="font-heading text-[#e0e0e0] text-lg font-bold mb-4">Sales Contact</h3>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<p className="font-body text-[#3b82f6] text-xs font-bold uppercase tracking-wider mb-1">Advertising Sales</p>
|
||
<p className="font-body text-[#e0e0e0] font-medium">Jeff Victor</p>
|
||
<a href="mailto:jeff@broadcastbeat.com" className="font-body text-[#3b82f6] text-sm hover:underline">
|
||
jeff@broadcastbeat.com
|
||
</a>
|
||
</div>
|
||
<div className="border-t border-[#222] pt-4">
|
||
<p className="font-body text-[#3b82f6] text-xs font-bold uppercase tracking-wider mb-1">Publication</p>
|
||
<p className="font-body text-[#777] text-sm">Broadcast Beat</p>
|
||
<p className="font-body text-[#777] text-sm">Relevant Media Properties</p>
|
||
</div>
|
||
<div className="border-t border-[#222] pt-4">
|
||
<p className="font-body text-[#3b82f6] text-xs font-bold uppercase tracking-wider mb-2">What We Offer</p>
|
||
<ul className="space-y-1.5">
|
||
{["Display advertising (web)", "Newsletter sponsorships", "Sponsored content", "Event coverage partnerships", "Podcast sponsorships"].map((item) => (
|
||
<li key={item} className="flex items-start gap-2 text-[#777] text-sm font-body">
|
||
<span className="text-[#3b82f6] mt-0.5">✓</span>
|
||
{item}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Form */}
|
||
<div className="lg:col-span-8">
|
||
{submitted ? (
|
||
<div className="bg-[#111] border border-[#3b82f6] p-8 text-center">
|
||
<div className="w-12 h-12 rounded-full bg-[#3b82f6]/20 flex items-center justify-center mx-auto mb-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||
<path d="M5 12l4 4 10-10" stroke="#3b82f6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
</div>
|
||
<h3 className="font-heading text-[#e0e0e0] text-xl font-bold mb-2">Message Sent!</h3>
|
||
<p className="font-body text-[#777] text-sm">
|
||
Thanks for reaching out. Jeff will be in touch within one business day at{" "}
|
||
<a href="mailto:jeff@broadcastbeat.com" className="text-[#3b82f6] hover:underline">jeff@broadcastbeat.com</a>.
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<form onSubmit={handleSubmit} className="bg-[#111] border border-[#222] p-6 space-y-4">
|
||
<h3 className="font-heading text-[#e0e0e0] text-lg font-bold mb-2">Request Media Kit / Start a Campaign</h3>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block font-body text-xs text-[#888] uppercase tracking-wider mb-1.5">Your Name *</label>
|
||
<input
|
||
type="text"
|
||
required
|
||
value={formData.name}
|
||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||
className="search-input w-full py-2.5 px-3 text-sm"
|
||
placeholder="Jane Smith"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block font-body text-xs text-[#888] uppercase tracking-wider mb-1.5">Company *</label>
|
||
<input
|
||
type="text"
|
||
required
|
||
value={formData.company}
|
||
onChange={(e) => setFormData({ ...formData, company: e.target.value })}
|
||
className="search-input w-full py-2.5 px-3 text-sm"
|
||
placeholder="Acme Broadcast Co."
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block font-body text-xs text-[#888] uppercase tracking-wider mb-1.5">Email *</label>
|
||
<input
|
||
type="email"
|
||
required
|
||
value={formData.email}
|
||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||
className="search-input w-full py-2.5 px-3 text-sm"
|
||
placeholder="jane@company.com"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block font-body text-xs text-[#888] uppercase tracking-wider mb-1.5">Phone</label>
|
||
<input
|
||
type="tel"
|
||
value={formData.phone}
|
||
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||
className="search-input w-full py-2.5 px-3 text-sm"
|
||
placeholder="+1 (555) 000-0000"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="block font-body text-xs text-[#888] uppercase tracking-wider mb-1.5">Estimated Budget</label>
|
||
<select
|
||
value={formData.budget}
|
||
onChange={(e) => setFormData({ ...formData, budget: e.target.value })}
|
||
className="search-input w-full py-2.5 px-3 text-sm bg-[#1a1a1a]">
|
||
<option value="">Select a range...</option>
|
||
<option value="under-5k">Under $5,000</option>
|
||
<option value="5k-15k">$5,000 – $15,000</option>
|
||
<option value="15k-50k">$15,000 – $50,000</option>
|
||
<option value="50k-plus">$50,000+</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block font-body text-xs text-[#888] uppercase tracking-wider mb-1.5">Message *</label>
|
||
<textarea
|
||
required
|
||
rows={4}
|
||
value={formData.message}
|
||
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
||
className="search-input w-full py-2.5 px-3 text-sm resize-none"
|
||
placeholder="Tell us about your campaign goals, target audience, and any specific placements you're interested in..."
|
||
/>
|
||
</div>
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className={`btn-subscribe py-3 px-8 text-sm w-full sm:w-auto ${loading ? "opacity-70 cursor-not-allowed" : ""}`}>
|
||
{loading ? "Sending..." : "Send Inquiry"}
|
||
</button>
|
||
<p className="text-[#555] text-xs font-body">
|
||
Or email directly: <a href="mailto:jeff@broadcastbeat.com" className="text-[#3b82f6] hover:underline">jeff@broadcastbeat.com</a>
|
||
</p>
|
||
</form>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|