// @ts-nocheck
// Remove imports for browser environment (Babel Standalone uses globals)
const { useState, useEffect, useRef } = React;
const { createRoot } = ReactDOM;
// --- STYLES ---
const styles = `
:root {
--bg-color: #040404;
--card-bg: #111111;
--text-main: #e0e0e0;
--text-muted: #888888;
--accent-gold: #c5a059;
--accent-gold-dim: #8a703d;
--accent-red: #8f2a2a;
--border-color: #222222;
--spacing-section: 100px;
}
@keyframes subtleShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes pulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.7); }
70% { transform: scale(1.5); box-shadow: 0 0 0 10px rgba(197, 160, 89, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(197, 160, 89, 0); }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: linear-gradient(270deg, #040404, #0a0a0a, #101010, #040404);
background-size: 600% 600%;
animation: subtleShift 60s ease infinite;
color: var(--text-main);
font-family: 'Inter', sans-serif;
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
color: white;
}
a { text-decoration: none; color: inherit; transition: 0.3s; cursor: pointer; }
ul { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.btn {
display: inline-block;
padding: 14px 28px;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.3s ease;
text-align: center;
}
.btn-primary { background-color: var(--accent-gold); color: #000; }
.btn-primary:hover { background-color: var(--text-main); }
.btn-outline { border-color: var(--text-main); color: var(--text-main); background: transparent; }
.btn-outline:hover { background: var(--text-main); color: #000; }
.text-gold { color: var(--accent-gold); }
.section-title {
font-size: 2.5rem;
margin-bottom: 1rem;
border-left: 4px solid var(--accent-gold);
padding-left: 20px;
}
/* Fade Section */
.fade-section {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-section.visible { opacity: 1; transform: translateY(0); }
/* Navbar */
nav {
position: fixed; top: 0; width: 100%;
background: rgba(5, 5, 5, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
z-index: 1000; padding: 15px 0;
}
.nav-content { display: flex; justify-content: space-between; align-items: center; }
.logo {
font-family: 'Oswald', sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: 2px;
display: flex; align-items: center; cursor: pointer;
}
.logo img { height: 40px; width: auto; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { font-size: 0.9rem; color: var(--text-muted); font-weight: 500; }
.nav-links a:hover { color: var(--accent-gold); }
.nav-cta {
border: 1px solid var(--accent-gold); color: var(--accent-gold);
padding: 8px 16px; font-size: 0.85rem;
}
.nav-cta:hover { background: var(--accent-gold); color: #000; }
/* Hero */
#hero {
min-height: 100vh; display: flex; align-items: center;
padding-top: 80px; position: relative;
}
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 50px; align-items: center; width: 100%; }
.hero-content h1 { font-size: 4rem; line-height: 1.1; margin-bottom: 20px; }
.hero-sub { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 40px; max-width: 90%; }
.hero-buttons { display: flex; gap: 20px; margin-bottom: 15px; }
.hero-panel {
background: #000; border: 1px solid var(--border-color); height: 400px;
position: relative; display: flex; justify-content: center; align-items: center;
flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.8);
overflow: hidden; cursor: pointer; transition: border-color 0.3s;
}
.hero-panel:hover { border-color: var(--accent-gold); }
.hero-panel iframe { width: 100%; height: 100%; border: none; }
.play-icon {
width: 60px; height: 60px; border: 2px solid var(--accent-gold); border-radius: 50%;
display: flex; justify-content: center; align-items: center; margin-bottom: 15px; z-index: 2;
transition: transform 0.3s;
}
.hero-panel:hover .play-icon { transform: scale(1.1); }
.play-triangle {
width: 0; height: 0;
border-top: 8px solid transparent; border-bottom: 8px solid transparent;
border-left: 12px solid var(--accent-gold); margin-left: 4px;
}
/* Sections */
section { padding: var(--spacing-section) 0; border-bottom: 1px solid #111; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.reason-card { border-top: 1px solid var(--accent-gold); padding-top: 20px; }
.role-card {
background: var(--card-bg); padding: 30px; border: 1px solid var(--border-color); transition: 0.3s;
}
.role-card:hover { border-color: var(--accent-gold); transform: translateY(-5px); }
.role-list li {
font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; padding-left: 15px; position: relative;
}
.role-list li::before { content: '•'; color: var(--accent-gold); position: absolute; left: 0; }
.timeline { display: flex; justify-content: space-between; margin-top: 50px; position: relative; }
.timeline::before {
content: ''; position: absolute; top: 20px; left: 0; width: 100%; height: 1px; background: #222; z-index: 0;
}
.timeline-step { background: var(--bg-color); z-index: 1; padding-right: 20px; width: 23%; }
/* Rituals */
.ritual-card {
display: flex; align-items: flex-start; gap: 20px; margin-bottom: 30px;
background: linear-gradient(90deg, #111 0%, transparent 100%);
padding: 20px; border-left: 2px solid var(--border-color);
}
/* Code */
.code-list { counter-reset: code-counter; margin: 40px 0; }
.code-item { position: relative; padding-left: 50px; margin-bottom: 25px; }
.code-item::before {
counter-increment: code-counter; content: "0" counter(code-counter);
position: absolute; left: 0; top: 2px; font-family: 'Oswald', sans-serif;
color: var(--accent-gold); font-size: 1.2rem;
}
.warning-bar {
background: rgba(74, 27, 27, 0.3); border-top: 1px solid var(--accent-red);
border-bottom: 1px solid var(--accent-red); color: #ffaaaa; text-align: center;
padding: 15px; font-family: 'Oswald', sans-serif; letter-spacing: 1px;
text-transform: uppercase; font-size: 0.9rem; margin-top: 40px;
}
/* Map */
.map-container {
position: relative; width: 100%; height: 400px; background: #0e0e0e;
border: 1px solid var(--border-color); margin-top: 40px; overflow: hidden;
}
.map-grid {
position: absolute; width: 100%; height: 100%;
background-image: linear-gradient(#1a1a1a 1px, transparent 1px), linear-gradient(90deg, #1a1a1a 1px, transparent 1px);
background-size: 40px 40px; opacity: 0.3;
}
.map-dot {
position: absolute; width: 10px; height: 10px; background: var(--accent-gold);
border-radius: 50%; box-shadow: 0 0 10px var(--accent-gold);
animation: pulse 3s infinite;
}
.dot-1 { top: 40%; left: 65%; animation-delay: 0s; }
.dot-2 { top: 55%; left: 72%; animation-delay: 0.5s; }
.dot-3 { top: 52%; left: 74%; animation-delay: 1s; }
.dot-4 { top: 30%; left: 20%; animation-delay: 1.5s; }
.dot-5 { top: 35%; left: 50%; animation-delay: 2s; }
.map-label {
position: absolute; color: #fff; font-size: 0.7rem; text-transform: uppercase;
transform: translate(15px, -5px); opacity: 0.6;
}
/* FAQ */
.faq-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 60px;
}
.faq-item h4 { color: var(--accent-gold); margin-bottom: 10px; font-size: 1rem; }
.faq-item p { color: var(--text-muted); font-size: 0.9rem; }
/* Form */
input, select, textarea {
width: 100%; background: #050505; border: 1px solid #333; color: white;
padding: 12px; font-family: 'Inter', sans-serif; font-size: 0.95rem; transition: 0.3s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-gold); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
/* Scroll to top */
.scroll-top {
position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px;
background: rgba(5,5,5,0.7); backdrop-filter: blur(5px);
border: 1px solid var(--accent-gold); color: var(--accent-gold);
display: flex; justify-content: center; align-items: center;
cursor: pointer; z-index: 999; opacity: 0; pointer-events: none;
transition: opacity 0.4s, transform 0.4s;
border-radius: 50%;
}
.scroll-top.visible { opacity: 1; pointer-events: auto; }
.scroll-top:hover { background: var(--accent-gold); color: black; transform: translateY(-3px); }
/* Admin */
.admin-panel { padding: 40px; background: #080808; min-height: 100vh; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.85rem; }
.admin-table th, .admin-table td { padding: 12px; text-align: left; border-bottom: 1px solid #222; }
.admin-table th { color: var(--accent-gold); }
.admin-table tr:hover { background: #111; }
.modal-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.8); z-index: 2000;
display: flex; justify-content: center; align-items: center;
}
.modal-content {
background: #111; border: 1px solid var(--accent-gold); padding: 40px;
max-width: 800px; width: 90%; max-height: 90vh; overflow-y: auto;
position: relative;
}
@media (max-width: 768px) {
.hero-grid, .grid-3, .grid-4, .timeline, .form-row, .faq-grid {
grid-template-columns: 1fr;
}
.hero-content h1 { font-size: 2.5rem; }
.nav-links { display: none; }
.timeline::before { display: none; }
.timeline-step { width: 100%; margin-bottom: 30px; }
}
`;
// --- LOGO COMPONENT ---
const Logo = () => {
const [error, setError] = useState(false);
const logoUrl = "business_syndicate_logo_new.jpg";
if (error) {
return BUSINESS SYNDICATE;
}
return (
setError(true)}
style={{ height: '40px', width: 'auto' }}
/>
);
};
// --- ADMIN PANEL COMPONENT ---
const AdminPanel = ({ onClose }) => {
const [password, setPassword] = useState('');
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [applicants, setApplicants] = useState([]);
const [videoUrl, setVideoUrl] = useState('');
const [selectedApplicant, setSelectedApplicant] = useState(null);
const [loading, setLoading] = useState(false);
// Pagination
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
const fetchApplicants = async () => {
setLoading(true);
try {
const res = await fetch('api/applicants.php');
const data = await res.json();
if(Array.isArray(data)) setApplicants(data);
} catch (e) {
console.error("Failed to load applicants", e);
} finally {
setLoading(false);
}
};
const fetchVideo = async () => {
try {
const res = await fetch('api/video.php');
const data = await res.json();
if(data.url) setVideoUrl(data.url);
} catch(e) {}
};
useEffect(() => {
if(isAuthenticated) {
fetchApplicants();
fetchVideo();
}
}, [isAuthenticated]);
const handleLogin = () => {
if (password === 'admin@123#') {
setIsAuthenticated(true);
setCurrentPage(1);
} else {
alert('Access Denied.');
}
};
const saveVideo = async () => {
try {
await fetch('api/video.php', {
method: 'POST',
body: JSON.stringify({ url: videoUrl })
});
alert('Video URL updated');
} catch(e) {
alert('Failed to save');
}
};
const downloadCSV = () => {
// Sort by timestamp descending
const sorted = [...applicants].sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
const headers = ["Date", "Name", "Email", "Phone", "Location", "LinkedIn", "Instagram", "Role", "Business", "Revenue", "Team", "Challenges", "Contribution", "Score"];
const rows = sorted.map(a => [
new Date(parseInt(a.timestamp) * 1000).toLocaleDateString(),
`"${a.fullName}"`, a.email, a.phone, `"${a.location}"`, a.linkedin, a.instagram,
a.role, `"${a.businessName}"`, a.revenue, a.teamSize,
`"${(a.challenges || '').replace(/"/g, '""')}"`, `"${(a.contribution || '').replace(/"/g, '""')}"`, a.score
]);
const csvContent = "data:text/csv;charset=utf-8,"
+ headers.join(",") + "\n"
+ rows.map(e => e.join(",")).join("\n");
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", `syndicate_applicants_${new Date().toISOString().slice(0,10)}.csv`);
document.body.appendChild(link);
link.click();
};
if (!isAuthenticated) {
return (
| Date | Identity | Business Profile | Score | Action |
|---|---|---|---|---|
| {new Date(parseInt(app.timestamp) * 1000).toLocaleDateString()} |
{app.fullName}
{app.email}
{app.location}
|
{app.role.toUpperCase()}
{app.businessName}
{app.revenue} • {app.teamSize} Team
|
75 ? 'var(--accent-gold)' : '#333', color: app.score > 75 ? 'black' : 'white', fontWeight: 'bold' }}> {app.score} |
Name: {selectedApplicant.fullName}
Email: {selectedApplicant.email}
Phone: {selectedApplicant.phone}
Location: {selectedApplicant.location}
LinkedIn: {selectedApplicant.linkedin || 'N/A'}
Instagram: {selectedApplicant.instagram || 'N/A'}
Role: {selectedApplicant.role}
Company: {selectedApplicant.businessName}
Revenue: {selectedApplicant.revenue}
Team Size: {selectedApplicant.teamSize}
Entry Score: {selectedApplicant.score}/100
{selectedApplicant.challenges}
{selectedApplicant.contribution}
A private circle for business owners, entrepreneurs, and investors who are tired of noise and want real conversations, real deals, and real people.
Entry is curated. Not everyone gets in.
NOW STREAMING...
) : (Not a networking group.
A table.
Most business groups are noisy, salesy, or fake. You walk into a room and everyone is trying to pitch you something you don't need, or they are "wantrepreneurs" with no skin in the game.
Operators need a place to talk about real issues: cashflow crunches, firing senior staff, regulatory battles, and exit strategies. These aren't conversations you have on LinkedIn.
Business Syndicate is built for people who have payroll to meet and equity on the line.
We verify business ownership and operational roles. No life coaches, no multi-level marketers.
Learn how a manufacturer solves supply chain issues and apply it to your software scaling.
What is said at the table stays at the table. A safe harbor for hard truths.
Get vetted by the Shadow Board. Sign the NDA. Join your specific sector table.
Access the member directory. Direct lines to suppliers, potential partners, and advisors.
Bring your challenges to the Firepit. Offer your expertise to others. Earn trust.
Form JVs. Invest in deals. Hire vetted talent. Execute together.
A mini-mastermind. 6 members, 1 table, deep dive into one specific strategic bottleneck.
Curated investment opportunities, partnership offers, and business-for-sale listings.
Anonymous failure stories. We share the scars so others don't have to bleed.
20-minute hot seat. The group dissects your current operational problem and offers solutions.
What happens at the table, stays at the table. Breach this and you are blacklisted.
Come with value. Offer introductions, advice, or perspective before you ask for favors.
We know what real success looks like. Check your ego at the door. Be raw, be real.
If you say you will do something, it gets done. If you book a seat, you show up.
Applications are reviewed by a small council of experienced operators. Their identities are not publicly listed.
A premium, invite-only tier within the Syndicate. Entry is by invitation only.
Yes. Quality filters price. If you have to ask "how much", you probably aren't ready.
7-14 days. The Shadow Board meets bi-weekly. We don't rush vetting.
No. We have operators in Dubai, UK, and the US. But the core ethos is grounded.
No. We don't babysit "idea guys". Build something, get revenue, then come back.
Encrypting data. Hashing to Shadow Board...
"I’ve built brands the hard way — no shortcuts, no family money.
Business Syndicate is the room I wish I had 10 years ago.
If you’re like that, you’ll feel at home here."