feat: Phase 1 bootstrap — adapt BukidBountyApp as BarangaySystem
Some checks failed
tests / PHP 8.2 (swoole-5.1.6) (push) Has been cancelled
tests / PHP 8.3 (swoole-5.1.6) (push) Has been cancelled
tests / PHP 8.4 (swoole-6.0) (push) Has been cancelled

- Replace UserTypes with barangay roles (super_admin, punong_barangay,
  kagawad, secretary, treasurer, sk_chairperson, sk_councilor, tanod,
  bhw, daycare_worker, staff, resident, audit)
- Replace UserActions with barangay-specific permissions (residents,
  households, blotters, documents, fee payments, projects, budget)
- Replace modules config with barangay modules (residents, households,
  blotters, documents, certificates, projects, budget, announcements,
  accounting, chapters, qr_payment, subscriptions, landing_pages)
- Update app name, seeders, and landing page to barangay defaults
- Add new enums: DocumentStatus, BlotterStatus, PaymentStatus
- Add 6 new migrations: residents, households, blotters, document
  requests, projects, budget
- Add RequestTypeSeeder with default certificate fee schedule
- Update README with BarangaySystem stack, roles, and remotes
This commit is contained in:
Jonathan Sykes
2026-06-06 18:47:20 +08:00
parent eb4a5731fb
commit 19fec0933b
19 changed files with 797 additions and 1096 deletions

View File

@@ -28,672 +28,76 @@ class LandingPageSeeder extends \Hyperf\Database\Seeders\Seeder
{
return [
[
'title' => 'Bigkis Inc | Bisigco',
'description' => 'National agricultural cooperative landing page — Bigkis Inc & Bisigco (Philippines).',
'html_content' => $this->bigkisTemplate(),
],
[
'title' => 'Bigkis Inc | Bisigco v2',
'description' => 'Modern, dynamic, and premium landing page for Bigkis Inc & Bisigco.',
'html_content' => $this->bigkisTemplateV2(),
'title' => 'Barangay System — Default Landing',
'description' => 'Default landing page for the Barangay Management & Governance Platform.',
'html_content' => $this->defaultTemplate(),
],
];
}
private function bigkisTemplate(): string
private function defaultTemplate(): string
{
return <<<'HTML'
<section style="background: linear-gradient(135deg, #0038a8 0%, #0a4dbd 50%, #ce1126 100%); color: #fff; padding: 80px 20px; text-align: center; position: relative; overflow: hidden;">
<div style="position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(252,209,22,0.18) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.12) 0%, transparent 50%);"></div>
<div style="position: relative; max-width: 1100px; margin: 0 auto;">
<div style="display: flex; justify-content: center; align-items: center; gap: 24px; margin-bottom: 24px;">
<img src="https://cdn.jsdelivr.net/gh/telemagnadon/publicforCDN@latest/assets/bigkis_logo.jpg" alt="Bigkis Inc Logo" style="width: 180px; height: 180px; border-radius: 50%; background: #fff; padding: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); object-fit: cover;">
<div style="width: 3px; height: 120px; background: rgba(252,209,22,0.8); border-radius: 2px;"></div>
<img src="https://cdn.jsdelivr.net/gh/telemagnadon/publicforCDN@latest/assets/bisigco.png" alt="Bisigco Logo" style="width: 180px; height: 180px; border-radius: 50%; background: #fff; padding: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); object-fit: cover;">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Barangay System</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', sans-serif; background: #f0f4ff; color: #1a1a2e; }
header { background: #1a3c6e; color: #fff; padding: 20px 40px; display: flex; align-items: center; gap: 16px; }
header img { height: 48px; }
header h1 { font-size: 1.5rem; }
.hero { background: linear-gradient(135deg, #1a3c6e 0%, #2563eb 100%); color: #fff; text-align: center; padding: 80px 20px; }
.hero h2 { font-size: 2.5rem; margin-bottom: 16px; }
.hero p { font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto 32px; }
.hero a { display: inline-block; background: #fff; color: #1a3c6e; font-weight: 700; padding: 14px 36px; border-radius: 8px; text-decoration: none; font-size: 1rem; }
.services { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; padding: 60px 40px; background: #fff; }
.service-card { background: #f0f4ff; border-radius: 12px; padding: 28px 24px; width: 220px; text-align: center; }
.service-card .icon { font-size: 2.5rem; margin-bottom: 12px; }
.service-card h3 { font-size: 1rem; margin-bottom: 8px; color: #1a3c6e; }
.service-card p { font-size: 0.85rem; color: #555; }
footer { background: #1a3c6e; color: #fff; text-align: center; padding: 24px; font-size: 0.85rem; }
</style>
</head>
<body>
<header>
<h1>Barangay System</h1>
</header>
<section class="hero">
<h2>Serving Our Community</h2>
<p>Request barangay certificates, report incidents, and access government services — online, anytime.</p>
<a href="/login">Access Portal</a>
</section>
<section class="services">
<div class="service-card">
<div class="icon">📄</div>
<h3>Certificate Requests</h3>
<p>Barangay Clearance, Residency, Indigency, Good Moral & more</p>
</div>
<div style="display: inline-block; background: rgba(252,209,22,0.95); color: #0038a8; padding: 6px 18px; border-radius: 999px; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px;">Est. 2022 &middot; Philippines</div>
<h1 style="font-size: 3.25rem; font-weight: 900; margin-bottom: 12px; line-height: 1.05; text-shadow: 0 4px 20px rgba(0,0,0,0.3);">BIGKIS INC <span style="opacity: 0.85;">|</span> BISIGCO</h1>
<p style="font-size: 1.35rem; font-weight: 700; color: #fcd116; margin-bottom: 8px; letter-spacing: 0.05em;">Bigkis Bayanihang Masa &middot; Sincere Advocacy &middot; Responsible Action</p>
<p style="font-size: 1.1rem; max-width: 760px; margin: 0 auto 36px; opacity: 0.95; line-height: 1.6;">A national agricultural cooperative uniting <strong style="color: #fcd116;">over 1 million members worldwide</strong> &mdash; empowering Filipino farmers, growers, and communities through unity, livelihood, and shared prosperity.</p>
<div style="display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;">
<a href="/login" style="display: inline-block; background: #fcd116; color: #0038a8; padding: 16px 42px; border-radius: 50px; font-weight: 800; text-decoration: none; font-size: 1.05rem; box-shadow: 0 8px 24px rgba(252,209,22,0.45);">Become a Member</a>
<a href="#about" style="display: inline-block; background: rgba(255,255,255,0.15); color: #fff; padding: 16px 42px; border-radius: 50px; font-weight: 800; text-decoration: none; font-size: 1.05rem; border: 2px solid rgba(255,255,255,0.4); backdrop-filter: blur(8px);">Learn More</a>
<div class="service-card">
<div class="icon">📋</div>
<h3>Blotter Filing</h3>
<p>File incidents and track hearing schedules online</p>
</div>
</div>
</section>
<section style="background: #fff; padding: 30px 20px; border-bottom: 4px solid #fcd116;">
<div style="max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; text-align: center;">
<div><div style="font-size: 2.4rem; font-weight: 900; color: #0038a8;">1M+</div><div style="font-size: 0.9rem; color: #555; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;">Members Worldwide</div></div>
<div><div style="font-size: 2.4rem; font-weight: 900; color: #ce1126;">81</div><div style="font-size: 0.9rem; color: #555; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;">Provinces Reached</div></div>
<div><div style="font-size: 2.4rem; font-weight: 900; color: #0a8a3e;">100%</div><div style="font-size: 0.9rem; color: #555; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;">Filipino-Led</div></div>
<div><div style="font-size: 2.4rem; font-weight: 900; color: #b8860b;">2022</div><div style="font-size: 0.9rem; color: #555; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;">Year Established</div></div>
</div>
</section>
<section id="about" style="padding: 80px 20px; background: linear-gradient(180deg, #f7faff 0%, #fff 100%);">
<div style="max-width: 1100px; margin: 0 auto;">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center;">
<div>
<div style="display: inline-block; color: #ce1126; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px;">About the Cooperative</div>
<h2 style="font-size: 2.4rem; font-weight: 900; color: #0038a8; margin-bottom: 18px; line-height: 1.15;">Unity in Action. Livelihood for All.</h2>
<p style="font-size: 1.05rem; line-height: 1.75; color: #333; margin-bottom: 16px;"><strong>Bigkis Inc</strong> (Bigkis Bayanihang Masa, Sincere Advocacy, Responsible Action Incorporated) is a nationwide cooperative movement built on the Filipino spirit of <em>bayanihan</em> &mdash; collective effort for the common good.</p>
<p style="font-size: 1.05rem; line-height: 1.75; color: #333; margin-bottom: 16px;">Together with <strong>BISIGCO</strong> (Bigkis Agri-Livelihood &amp; Growers Cooperative), we provide farmers, fisherfolk, and growers with access to markets, fair pricing, capacity-building, and dignified livelihood opportunities.</p>
<p style="font-size: 1.05rem; line-height: 1.75; color: #333;">From rice paddies in Luzon to upland farms in Mindanao, our members stand united &mdash; feeding the nation and uplifting their families.</p>
</div>
<div style="text-align: center;">
<img src="https://cdn.jsdelivr.net/gh/telemagnadon/publicforCDN@latest/assets/bigkis_bisigco.jpg" alt="Bigkis Inc and Bisigco — Unity in Action, Livelihood for All" style="width: 100%; max-width: 520px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,56,168,0.25);">
</div>
<div class="service-card">
<div class="icon">👥</div>
<h3>Resident Records</h3>
<p>Manage resident and household information</p>
</div>
</div>
</section>
<section style="padding: 80px 20px; background: #fff;">
<div style="max-width: 1100px; margin: 0 auto;">
<div style="text-align: center; margin-bottom: 48px;">
<div style="display: inline-block; color: #0a8a3e; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px;">Our Programs</div>
<h2 style="font-size: 2.2rem; font-weight: 900; color: #0038a8; margin: 0;">What We Do for Our Members</h2>
<div class="service-card">
<div class="icon">📢</div>
<h3>Announcements</h3>
<p>Stay updated on barangay news and events</p>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px;">
<div style="background: #fff; padding: 36px 28px; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,56,168,0.08); border-top: 5px solid #0038a8;">
<div style="font-size: 2.8rem; margin-bottom: 14px;">🌾</div>
<h3 style="font-weight: 800; color: #0038a8; margin-bottom: 10px; font-size: 1.2rem;">Agri-Livelihood</h3>
<p style="color: #555; line-height: 1.65; margin: 0;">Farm inputs, training, and market access for rice, corn, vegetables, livestock, and high-value crops.</p>
</div>
<div style="background: #fff; padding: 36px 28px; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,56,168,0.08); border-top: 5px solid #ce1126;">
<div style="font-size: 2.8rem; margin-bottom: 14px;">🤝</div>
<h3 style="font-weight: 800; color: #ce1126; margin-bottom: 10px; font-size: 1.2rem;">Bayanihan Network</h3>
<p style="color: #555; line-height: 1.65; margin: 0;">A nationwide grassroots network connecting members across barangays, municipalities, and provinces.</p>
</div>
<div style="background: #fff; padding: 36px 28px; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,56,168,0.08); border-top: 5px solid #fcd116;">
<div style="font-size: 2.8rem; margin-bottom: 14px;">💰</div>
<h3 style="font-weight: 800; color: #b8860b; margin-bottom: 10px; font-size: 1.2rem;">Fair Trade Marketplace</h3>
<p style="color: #555; line-height: 1.65; margin: 0;">Direct-to-consumer selling that removes middlemen and ensures fair prices for growers.</p>
</div>
<div style="background: #fff; padding: 36px 28px; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,56,168,0.08); border-top: 5px solid #0a8a3e;">
<div style="font-size: 2.8rem; margin-bottom: 14px;">📚</div>
<h3 style="font-weight: 800; color: #0a8a3e; margin-bottom: 10px; font-size: 1.2rem;">Capacity Building</h3>
<p style="color: #555; line-height: 1.65; margin: 0;">Skills training, financial literacy, and modern farming workshops for sustainable growth.</p>
</div>
<div style="background: #fff; padding: 36px 28px; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,56,168,0.08); border-top: 5px solid #6f42c1;">
<div style="font-size: 2.8rem; margin-bottom: 14px;">🛡️</div>
<h3 style="font-weight: 800; color: #6f42c1; margin-bottom: 10px; font-size: 1.2rem;">Member Protection</h3>
<p style="color: #555; line-height: 1.65; margin: 0;">Cooperative insurance, mutual aid, and advocacy for farmers' rights at every level of government.</p>
</div>
<div style="background: #fff; padding: 36px 28px; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,56,168,0.08); border-top: 5px solid #17a2b8;">
<div style="font-size: 2.8rem; margin-bottom: 14px;">🌏</div>
<h3 style="font-weight: 800; color: #17a2b8; margin-bottom: 10px; font-size: 1.2rem;">Global OFW Bridge</h3>
<p style="color: #555; line-height: 1.65; margin: 0;">Connecting overseas Filipinos with cooperative ventures back home &mdash; investment with impact.</p>
</div>
</div>
</div>
</section>
<section style="padding: 80px 20px; background: linear-gradient(135deg, #0038a8 0%, #0a4dbd 100%); color: #fff;">
<div style="max-width: 1000px; margin: 0 auto; text-align: center;">
<div style="font-size: 4rem; line-height: 1; opacity: 0.4; margin-bottom: -10px;">&ldquo;</div>
<p style="font-size: 1.5rem; font-weight: 600; line-height: 1.5; max-width: 800px; margin: 0 auto 28px; font-style: italic;">When Filipinos stand together &mdash; farmer beside farmer, neighbor beside neighbor &mdash; no challenge is too great. This is the spirit of <span style="color: #fcd116;">Bigkis</span>.</p>
<div style="width: 60px; height: 3px; background: #fcd116; margin: 0 auto 16px;"></div>
<div style="font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem; opacity: 0.9;">&mdash; The Bigkis Inc Movement</div>
</div>
</section>
<section style="padding: 80px 20px; background: #fcd116; text-align: center;">
<div style="max-width: 800px; margin: 0 auto;">
<h2 style="font-size: 2.4rem; font-weight: 900; color: #0038a8; margin-bottom: 14px;">Join the Movement</h2>
<p style="font-size: 1.15rem; color: #1a1a2e; margin-bottom: 32px; line-height: 1.6;">Become part of a million-strong cooperative reshaping Philippine agriculture &mdash; one bayanihan at a time.</p>
<div style="display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;">
<a href="/login" style="display: inline-block; background: #0038a8; color: #fff; padding: 16px 44px; border-radius: 50px; font-weight: 800; text-decoration: none; font-size: 1.05rem; box-shadow: 0 8px 24px rgba(0,56,168,0.35);">Member Login / Sign Up</a>
<a href="/login" style="display: inline-block; background: #ce1126; color: #fff; padding: 16px 44px; border-radius: 50px; font-weight: 800; text-decoration: none; font-size: 1.05rem; box-shadow: 0 8px 24px rgba(206,17,38,0.35);">Apply for Membership</a>
</div>
</div>
</section>
<footer style="background: #1a1a2e; color: #b8c0d0; padding: 48px 20px 28px;">
<div style="max-width: 1100px; margin: 0 auto;">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-bottom: 32px;">
<div>
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 14px;">
<div style="display: flex; gap: 8px;">
<img src="https://cdn.jsdelivr.net/gh/telemagnadon/publicforCDN@latest/assets/bigkis_logo.jpg" alt="Bigkis Inc" style="width: 56px; height: 56px; border-radius: 50%; background: #fff; padding: 4px;">
<img src="https://cdn.jsdelivr.net/gh/telemagnadon/publicforCDN@latest/assets/bisigco.png" alt="Bisigco" style="width: 56px; height: 56px; border-radius: 50%; background: #fff; padding: 4px;">
</div>
<div>
<div style="font-weight: 900; color: #fff; font-size: 1.05rem;">BIGKIS INC</div>
<div style="font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fcd116;">Est. 2022</div>
</div>
</div>
<p style="font-size: 0.9rem; line-height: 1.6; margin: 0;">Bigkis Bayanihang Masa, Sincere Advocacy, Responsible Action Incorporated &mdash; a national agricultural cooperative serving Filipino farmers and communities.</p>
</div>
<div>
<div style="font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; margin-bottom: 12px;">Cooperative</div>
<div style="display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem;">
<a href="#about" style="color: #b8c0d0; text-decoration: none;">About Bigkis</a>
<a href="#" style="color: #b8c0d0; text-decoration: none;">BISIGCO Programs</a>
<a href="#" style="color: #b8c0d0; text-decoration: none;">Membership</a>
<a href="#" style="color: #b8c0d0; text-decoration: none;">Governance</a>
</div>
</div>
<div>
<div style="font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; margin-bottom: 12px;">Connect</div>
<div style="display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem;">
<span>📍 Republic of the Philippines</span>
<span>✉️ info@bigkis.ph</span>
<span>📞 Member Hotline</span>
</div>
</div>
</div>
<div style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; text-align: center; font-size: 0.85rem;">
&copy; 2026 Bigkis Inc &amp; BISIGCO &mdash; Unity in Action. Livelihood for All. 🇵🇭
</div>
</div>
</footer>
HTML;
}
private function bigkisTemplateV2(): string
{
return <<<'HTML'
<div class="v2-landing">
<style>
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&display=swap');
.v2-landing {
font-family: 'Outfit', sans-serif;
color: #1e293b;
line-height: 1.6;
overflow-x: hidden;
background-color: #f8fafc;
}
.v2-landing * {
box-sizing: border-box;
}
.v2-hero {
position: relative;
padding: 160px 20px 200px;
background: #0f172a;
color: #fff;
text-align: center;
overflow: hidden;
}
.v2-hero::before {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: radial-gradient(circle at 30% 30%, rgba(0,56,168,0.5) 0%, transparent 40%),
radial-gradient(circle at 70% 70%, rgba(206,17,38,0.4) 0%, transparent 40%);
animation: v2-rotateBg 25s linear infinite;
z-index: 0;
}
@keyframes v2-rotateBg {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.v2-hero-content {
position: relative;
z-index: 1;
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.v2-glass-badge {
display: inline-flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
padding: 8px 24px;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 1px;
text-transform: uppercase;
color: #fcd116;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.v2-logos {
display: flex;
justify-content: center;
align-items: center;
gap: 32px;
margin-bottom: 10px;
}
.v2-logo-wrap {
width: 140px;
height: 140px;
border-radius: 50%;
background: #fff;
padding: 6px;
box-shadow: 0 0 30px rgba(252,209,22,0.2);
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease;
cursor: pointer;
}
.v2-logo-wrap:hover {
transform: translateY(-10px) scale(1.08);
box-shadow: 0 20px 40px rgba(252,209,22,0.5);
}
.v2-logo-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.v2-divider {
width: 3px;
height: 60px;
background: #fcd116;
border-radius: 4px;
box-shadow: 0 0 15px #fcd116;
}
.v2-title {
font-size: 5rem;
font-weight: 900;
line-height: 1.1;
margin: 0;
background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase;
letter-spacing: -2px;
text-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.v2-subtitle {
font-size: 1.6rem;
font-weight: 600;
color: #fcd116;
margin: 0;
letter-spacing: 2px;
}
.v2-desc {
font-size: 1.25rem;
color: #e2e8f0;
max-width: 750px;
font-weight: 300;
line-height: 1.8;
margin: 0;
}
.v2-actions {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
margin-top: 16px;
}
.v2-btn-primary {
background: #fcd116;
color: #0038a8;
padding: 18px 48px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 800;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(252,209,22,0.4);
text-transform: uppercase;
letter-spacing: 1px;
}
.v2-btn-primary:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(252,209,22,0.6);
background: #fff;
}
.v2-btn-secondary {
background: transparent;
color: #fff;
padding: 16px 46px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 800;
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid rgba(255,255,255,0.3);
backdrop-filter: blur(10px);
text-transform: uppercase;
letter-spacing: 1px;
}
.v2-btn-secondary:hover {
background: rgba(255,255,255,0.15);
border-color: #fff;
transform: translateY(-5px);
}
.v2-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 30px;
max-width: 1200px;
margin: -100px auto 0;
padding: 0 20px;
position: relative;
z-index: 10;
}
.v2-stat-card {
background: #fff;
border-radius: 24px;
padding: 40px 20px;
text-align: center;
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
transition: transform 0.4s ease, box-shadow 0.4s ease;
border-bottom: 6px solid #0038a8;
}
.v2-stat-card:hover {
transform: translateY(-15px);
box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}
.v2-stat-val {
font-size: 3.5rem;
font-weight: 900;
color: #0038a8;
margin-bottom: 8px;
line-height: 1;
}
.v2-stat-label {
font-size: 1rem;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.v2-stat-card:nth-child(2) { border-color: #ce1126; }
.v2-stat-card:nth-child(2) .v2-stat-val { color: #ce1126; }
.v2-stat-card:nth-child(3) { border-color: #10b981; }
.v2-stat-card:nth-child(3) .v2-stat-val { color: #10b981; }
.v2-stat-card:nth-child(4) { border-color: #f59e0b; }
.v2-stat-card:nth-child(4) .v2-stat-val { color: #f59e0b; }
.v2-section {
padding: 120px 20px;
}
.v2-container {
max-width: 1200px;
margin: 0 auto;
}
.v2-header {
text-align: center;
margin-bottom: 70px;
}
.v2-tag {
display: inline-block;
padding: 10px 20px;
background: rgba(0,56,168,0.08);
color: #0038a8;
border-radius: 50px;
font-weight: 800;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 24px;
}
.v2-h2 {
font-size: 3.5rem;
font-weight: 900;
color: #0f172a;
margin: 0;
line-height: 1.2;
}
.v2-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 40px;
}
.v2-card {
background: #fff;
border-radius: 30px;
padding: 48px 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.04);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
z-index: 1;
overflow: hidden;
}
.v2-card::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(135deg, rgba(0,56,168,0.05) 0%, transparent 100%);
z-index: -1;
opacity: 0;
transition: opacity 0.4s ease;
}
.v2-card:hover {
transform: translateY(-20px);
box-shadow: 0 30px 60px rgba(0,56,168,0.1);
}
.v2-card:hover::before {
opacity: 1;
}
.v2-icon {
width: 80px;
height: 80px;
background: #f8fafc;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
margin-bottom: 30px;
box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
transition: transform 0.4s ease;
}
.v2-card:hover .v2-icon {
transform: scale(1.1) rotate(5deg);
}
.v2-card-title {
font-size: 1.7rem;
font-weight: 800;
margin-bottom: 16px;
color: #0f172a;
}
.v2-card-desc {
color: #64748b;
font-size: 1.1rem;
line-height: 1.7;
margin: 0;
}
.v2-cta {
background: linear-gradient(135deg, #0038a8 0%, #1e3a8a 100%);
padding: 120px 20px;
text-align: center;
color: #fff;
position: relative;
border-radius: 40px;
margin: 0 20px 100px;
overflow: hidden;
}
.v2-cta::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><circle cx="30" cy="30" r="20" stroke="rgba(255,255,255,0.05)" stroke-width="1.5" fill="none"/></svg>') 0 0 / 60px 60px;
}
.v2-cta-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.v2-cta-title {
font-size: 3.5rem;
font-weight: 900;
margin-bottom: 24px;
}
.v2-cta-desc {
font-size: 1.3rem;
color: #bfdbfe;
margin-bottom: 40px;
line-height: 1.6;
}
@media (max-width: 768px) {
.v2-title { font-size: 3.2rem; }
.v2-subtitle { font-size: 1.2rem; }
.v2-hero { padding: 120px 20px 160px; }
.v2-h2 { font-size: 2.5rem; }
.v2-cta-title { font-size: 2.5rem; }
.v2-logos { flex-direction: column; gap: 20px; }
.v2-divider { width: 60px; height: 3px; }
}
</style>
<header class="v2-hero">
<div class="v2-hero-content">
<div class="v2-glass-badge">
<span style="font-size:1.2rem">🌟</span> Premium Design Interface
</div>
<div class="v2-logos">
<div class="v2-logo-wrap">
<img src="https://cdn.jsdelivr.net/gh/telemagnadon/publicforCDN@latest/assets/bigkis_logo.jpg" alt="Bigkis Inc">
</div>
<div class="v2-divider"></div>
<div class="v2-logo-wrap">
<img src="https://cdn.jsdelivr.net/gh/telemagnadon/publicforCDN@latest/assets/bisigco.png" alt="Bisigco">
</div>
</div>
<div>
<h1 class="v2-title">Bigkis <span style="opacity:0.5;font-weight:300;">|</span> Bisigco</h1>
<h2 class="v2-subtitle">Sincere Advocacy &middot; Responsible Action</h2>
</div>
<p class="v2-desc">
A revolutionary national agricultural cooperative uniting millions across the Philippines. We empower farmers, elevate communities, and build a sustainable future through genuine <strong>bayanihan</strong>.
</p>
<div class="v2-actions">
<a href="/login" class="v2-btn-primary">Get Started Now</a>
<a href="#explore" class="v2-btn-secondary">Explore Programs</a>
</div>
</div>
</header>
<section class="v2-stats">
<div class="v2-stat-card">
<div class="v2-stat-val">1M+</div>
<div class="v2-stat-label">Active Members</div>
</div>
<div class="v2-stat-card">
<div class="v2-stat-val">81</div>
<div class="v2-stat-label">Provinces Reached</div>
</div>
<div class="v2-stat-card">
<div class="v2-stat-val">100%</div>
<div class="v2-stat-label">Filipino-Led</div>
</div>
<div class="v2-stat-card">
<div class="v2-stat-val">2022</div>
<div class="v2-stat-label">Est. Year</div>
</div>
</section>
<section id="explore" class="v2-section" style="background: #fff;">
<div class="v2-container">
<div class="v2-header">
<div class="v2-tag">Impact & Programs</div>
<h2 class="v2-h2">Empowering Growth</h2>
</div>
<div class="v2-grid">
<div class="v2-card">
<div class="v2-icon" style="color: #0038a8;">🌾</div>
<h3 class="v2-card-title">Agri-Livelihood</h3>
<p class="v2-card-desc">State-of-the-art farm inputs, comprehensive training, and exclusive market access to elevate local agriculture.</p>
</div>
<div class="v2-card">
<div class="v2-icon" style="color: #ce1126;">🤝</div>
<h3 class="v2-card-title">Bayanihan Network</h3>
<p class="v2-card-desc">A highly connected grassroots infrastructure linking members from barangays to provincial hubs seamlessly.</p>
</div>
<div class="v2-card">
<div class="v2-icon" style="color: #f59e0b;">💰</div>
<h3 class="v2-card-title">Fair Trade Hub</h3>
<p class="v2-card-desc">An optimized direct-to-consumer marketplace eliminating middlemen to maximize grower profitability.</p>
</div>
<div class="v2-card">
<div class="v2-icon" style="color: #10b981;">📚</div>
<h3 class="v2-card-title">Capacity Mastery</h3>
<p class="v2-card-desc">Advanced skill acquisition, robust financial literacy, and modern agronomy workshops.</p>
</div>
<div class="v2-card">
<div class="v2-icon" style="color: #8b5cf6;">🛡️</div>
<h3 class="v2-card-title">Member Protection</h3>
<p class="v2-card-desc">Comprehensive cooperative insurance, mutual aid funds, and unwavering advocacy for farmers' rights.</p>
</div>
<div class="v2-card">
<div class="v2-icon" style="color: #0ea5e9;">🌏</div>
<h3 class="v2-card-title">Global OFW Bridge</h3>
<p class="v2-card-desc">Strategic investment channels for overseas Filipinos to fund and grow domestic cooperative ventures.</p>
</div>
</div>
</div>
</section>
<div class="v2-container">
<div class="v2-cta">
<div class="v2-cta-content">
<h2 class="v2-cta-title">Ready to Make an Impact?</h2>
<p class="v2-cta-desc">Join our million-strong movement. Transform agriculture, secure your livelihood, and uplift the nation with Bigkis and Bisigco.</p>
<a href="/login" class="v2-btn-primary" style="background: #fff; color: #0038a8; box-shadow: 0 10px 30px rgba(255,255,255,0.3);">Become a Member</a>
</div>
</div>
</div>
</div>
</section>
<footer>
&copy; 2026 Barangay System. All rights reserved.
</footer>
</body>
</html>
HTML;
}
}