The V
const positions = [
{ top: "8%", left: "-2%", animY: Math.sin(tick * 0.018) * 12, animX: Math.cos(tick * 0.012) * 6 },
{ top: "22%", right: "-1%", animY: Math.cos(tick * 0.022) * 10, animX: Math.sin(tick * 0.016) * 5 },
{ top: "48%", left: "-4%", animY: Math.sin(tick * 0.015 + 1) * 14, animX: Math.cos(tick * 0.010) * 7 },
{ top: "68%", right: "0%", animY: Math.cos(tick * 0.020 + 2) * 11, animX: Math.sin(tick * 0.014) * 6 },
{ top: "78%", left: "5%", animY: Math.sin(tick * 0.017 + 3) * 9, animX: Math.cos(tick * 0.013) * 5 },
{ top: "12%", right: "6%", animY: Math.cos(tick * 0.019 + 1) * 13, animX: Math.sin(tick * 0.015) * 4 },
{ top: "55%", right: "2%", animY: Math.sin(tick * 0.021 + 2) * 10, animX: Math.cos(tick * 0.011) * 6 },
{ top: "38%", left: "0%", animY: Math.cos(tick * 0.016 + 3) * 8, animX: Math.sin(tick * 0.017) * 5 },
];
return (
{CREATOR_CARDS.map((card, i) => {
const pos = positions[i];
const transform = `translateY(${pos.animY}px) translateX(${pos.animX}px)`;
const style = {
top: pos.top, left: pos.left, right: pos.right,
transform,
transition: "transform 0.3s ease",
opacity: 0.92,
};
return ;
})}
);
}
// ── Navbar ───────────────────────────────────────────────────────────────────
function Navbar({ activeSection, setSection }) {
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
const fn = () => setScrolled(window.scrollY > 20);
window.addEventListener("scroll", fn);
return () => window.removeEventListener("scroll", fn);
}, []);
const navLinks = ["home", "for-brands", "for-creators", "services", "payment-terms", "faqs", "contact"];
const labels = { "home": "Home", "for-brands": "For Brands", "for-creators": "For Creators", "services": "Services", "payment-terms": "Payment Terms", "faqs": "FAQs", "contact": "Contact" };
const scrollTo = (id) => {
setMenuOpen(false);
const el = document.getElementById(id);
if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
};
return (
);
}
// ── Hero ─────────────────────────────────────────────────────────────────────
function Hero() {
const scrollTo = (id) => {
const el = document.getElementById(id);
if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
};
return (
{/* Soft gradient blob */}
✦ Influencer Marketing Agency
Connecting Brands With
Creators That Actually Convert.
The V15 Company helps brands discover creators and helps creators discover opportunities.
{[
["Growing", "Creator Network"],
["Multiple", "Niches Covered"],
["Open For", "Brand Collabs"],
].map(([a, b]) => (
))}
);
}
// ── Section 1: Creator Network ───────────────────────────────────────────────
function CreatorNetwork() {
return (
Growing Creator Network
Creators Across Multiple Niches
{NICHES.map((niche, i) => (
{ e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 12px 32px rgba(239,181,187,0.25)"; e.currentTarget.style.borderColor = "#EFB5BB"; }}
onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; e.currentTarget.style.borderColor = "#ECECEC"; }}
>
{["💄", "✨", "💻", "📸", "📚", "💰", "🎮", "✈️", "🍜", "👗"][i]}
{niche}
))}
);
}
// ── Section 2: How It Works ──────────────────────────────────────────────────
function HowItWorks() {
return (
Simple Process
How It Works
{[
{
label: "For Brands", color: "#111", bg: "#111",
steps: ["Submit Campaign Requirements", "Get Matched With Creators", "Launch Campaign"],
icons: ["📋", "🔗", "🚀"],
},
{
label: "For Creators", color: "#c0667a", bg: "#EFB5BB",
steps: ["Join Creator Network", "Get Shortlisted", "Receive Opportunities"],
icons: ["👤", "⭐", "📨"],
},
].map(({ label, color, bg, steps, icons }) => (
{label}
{steps.map((step, i) => (
))}
))}
);
}
// ── Brand Form ───────────────────────────────────────────────────────────────
function BrandForm() {
const [form, setForm] = useState({
brand_name: "", contact_person: "", email: "", whatsapp: "",
instagram: "", website: "", objective: "", niche: "",
num_creators: "", budget: "", deliverables: "", timeline: "", notes: "",
});
const [submitted, setSubmitted] = useState(false);
const [loading, setLoading] = useState(false);
const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
const handleSubmit = async () => {
if (!form.brand_name || !form.email || !form.whatsapp) {
alert("Please fill in Brand Name, Email, and WhatsApp Number.");
return;
}
setLoading(true);
await new Promise(r => setTimeout(r, 1200));
setLoading(false);
setSubmitted(true);
};
const inputStyle = {
width: "100%", padding: "12px 14px", borderRadius: 10,
border: "1px solid #ECECEC", fontSize: 14, color: "#111",
background: "#fff", outline: "none", boxSizing: "border-box",
fontFamily: "inherit", transition: "border-color 0.2s",
};
const labelStyle = { display: "block", fontSize: 13, fontWeight: 600, color: "#444", marginBottom: 6 };
return (
Are You A Brand?
Submit Your Campaign Requirement
Tell us about your campaign and we'll match you with the right creators.
{submitted ? (
🎉
Campaign Requirement Submitted!
Our team will review your requirement and reach out within 1–2 business days.
✓ Submitted Successfully
) : (
{[
["brand_name", "Brand Name", "text", "Your brand name"],
["contact_person", "Contact Person", "text", "Your name"],
["email", "Email Address", "email", "you@brand.com"],
["whatsapp", "WhatsApp Number", "tel", "+91 98765 43210"],
["instagram", "Instagram Handle", "text", "@yourbrand"],
["website", "Website", "url", "https://yourbrand.com"],
].map(([key, label, type, placeholder]) => (
e.target.style.borderColor = "#EFB5BB"}
onBlur={e => e.target.style.borderColor = "#ECECEC"}
/>
))}
{[
["niche", "Creator Niche Required", "text", "E.g. Beauty, Tech..."],
["num_creators", "Number of Creators", "number", "E.g. 5"],
["budget", "Campaign Budget (₹)", "text", "E.g. ₹50,000"],
].map(([key, label, type, placeholder]) => (
e.target.style.borderColor = "#EFB5BB"}
onBlur={e => e.target.style.borderColor = "#ECECEC"}
/>
))}
)}
);
}
// ── Creator Form ─────────────────────────────────────────────────────────────
function CreatorForm() {
const [form, setForm] = useState({
full_name: "", email: "", whatsapp: "", instagram: "",
followers: "", niche: "", city: "", portfolio: "",
media_kit: "", past_collabs: "", notes: "",
});
const [loading, setLoading] = useState(false);
const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
const handleSubmit = async () => {
if (!form.full_name || !form.email || !form.instagram) {
alert("Please fill in Full Name, Email, and Instagram Username.");
return;
}
setLoading(true);
await new Promise(r => setTimeout(r, 1200));
setLoading(false);
window.open("https://forms.google.com", "_blank");
};
const inputStyle = {
width: "100%", padding: "12px 14px", borderRadius: 10,
border: "1px solid #ECECEC", fontSize: 14, color: "#111",
background: "#fff", outline: "none", boxSizing: "border-box",
fontFamily: "inherit", transition: "border-color 0.2s",
};
const labelStyle = { display: "block", fontSize: 13, fontWeight: 600, color: "#444", marginBottom: 6 };
return (
Are You A Creator?
Join Our Creator Network
🚫
We do not charge creators any upfront fee.
{[
["full_name", "Full Name", "text", "Your full name"],
["email", "Email Address", "email", "you@email.com"],
["whatsapp", "WhatsApp Number", "tel", "+91 98765 43210"],
["instagram", "Instagram Username", "text", "@yourhandle"],
["followers", "Follower Count", "text", "E.g. 25K"],
["city", "City", "text", "E.g. Mumbai"],
].map(([key, label, type, placeholder]) => (
e.target.style.borderColor = "#EFB5BB"}
onBlur={e => e.target.style.borderColor = "#ECECEC"}
/>
))}
e.target.style.borderColor = "#EFB5BB"}
onBlur={e => e.target.style.borderColor = "#ECECEC"}
/>
);
}
// ── Services ─────────────────────────────────────────────────────────────────
function Services() {
return (
What We Offer
Our Services
{SERVICES.map((s, i) => (
{ e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 16px 40px rgba(0,0,0,0.08)"; e.currentTarget.style.borderColor = "#EFB5BB"; }}
onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; e.currentTarget.style.borderColor = "#ECECEC"; }}
>
{s.icon}
{s.title}
{s.desc}
))}
);
}
// ── Trust Section ─────────────────────────────────────────────────────────────
function Trust() {
return (
Why Creators Trust
The V15 Company
{TRUST_CARDS.map((c, i) => (
{c.icon}
{c.title}
{c.desc}
))}
);
}
// ── Payment Terms ─────────────────────────────────────────────────────────────
function PaymentTerms() {
const cards = [
{
icon: "👤", title: "For Creators",
items: [
"No upfront fee — ever.",
"A 10% service fee is deducted only after successful campaign completion and payment receipt.",
"Creators should never transfer money to claim campaigns.",
],
},
{
icon: "🏢", title: "For Brands",
items: [
"A 10% management fee on the final campaign value.",
"Minimum 50% advance required before campaign execution.",
"Remaining balance due within 5 business days after campaign completion.",
],
},
{
icon: "💸", title: "Creator Payments",
items: [
"Payments processed within 15 business days after brand payment is received.",
"Deliverables must be approved before payment is released.",
"Campaign requirements must be fully fulfilled.",
],
},
{
icon: "🎁", title: "Barter Campaigns",
items: [
"Separate coordination charges may apply for barter/gifting campaigns.",
"Details shared during campaign briefing.",
],
},
];
return (
Clarity First
Transparent Payment Terms
{cards.map((card, i) => (
{card.icon}
{card.title}
{card.items.map((item, j) => (
))}
))}
📜 General Terms
The V15 Company reserves the right to decline campaigns that do not align with company values and standards. All payment terms are subject to individual campaign agreements.
);
}
// ── Safety Notice ─────────────────────────────────────────────────────────────
function SafetyNotice() {
return (
🛡️
Creator Safety First
{[
"We never charge creators any upfront fee.",
"Do not transfer money to anyone claiming to offer campaigns on behalf of The V15 Company.",
"If in doubt, contact us directly through our official Instagram or WhatsApp.",
].map((item, i) => (
⚠
{item}
))}
Contact Us on Instagram →
);
}
// ── FAQ ───────────────────────────────────────────────────────────────────────
function FAQ() {
const [open, setOpen] = useState(null);
return (
Got Questions?
Frequently Asked Questions
{["For Brands", "For Creators"].map(cat => (
{cat}
{FAQS.filter(f => f.category === cat).map((faq, i) => {
const key = `${cat}-${i}`;
const isOpen = open === key;
return (
{isOpen && (
{faq.a}
)}
);
})}
))}
);
}
// ── Contact ───────────────────────────────────────────────────────────────────
function Contact() {
const [form, setForm] = useState({ name: "", email: "", message: "" });
const [sent, setSent] = useState(false);
const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
const handleSubmit = async () => {
if (!form.name || !form.email || !form.message) { alert("Please fill all fields."); return; }
await new Promise(r => setTimeout(r, 800));
setSent(true);
};
const inputStyle = {
width: "100%", padding: "12px 14px", borderRadius: 10,
border: "1px solid #ECECEC", fontSize: 14, color: "#111",
background: "#fff", outline: "none", boxSizing: "border-box",
fontFamily: "inherit", transition: "border-color 0.2s",
};
return (
);
}
// ── Footer ────────────────────────────────────────────────────────────────────
function Footer() {
const scrollTo = (id) => {
const el = document.getElementById(id);
if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
};
return (
);
}
// ── App ───────────────────────────────────────────────────────────────────────
export default function App() {
return (
);
}