Merge version_2 into main #5
@@ -1,5 +1,39 @@
|
||||
@import "tailwindcss";
|
||||
@import "./styles/variables.css";
|
||||
@import "./styles/theme.css";
|
||||
@import "./styles/utilities.css";
|
||||
@import "./styles/base.css";
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
/* Aurora Background Animation */
|
||||
@keyframes aurora {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.aurora-background {
|
||||
background-size: 200% 200%;
|
||||
animation: aurora 15s ease infinite;
|
||||
}
|
||||
|
||||
@@ -1,74 +1,26 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Halant } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Open_Sans } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const halant = Halant({
|
||||
variable: "--font-halant",
|
||||
subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
import "./styles/variables.css";
|
||||
import "./styles/base.css";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const openSans = Open_Sans({
|
||||
variable: "--font-open-sans",
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Yasbil - Yayasan Bina Insan Kamil | Pendidikan & Pemberdayaan Masyarakat",
|
||||
description: "Yasbil adalah lembaga nirlaba yang fokus pada pendidikan berkualitas, pengembangan karakter, dan kemanusiaan. Bergabunglah dengan kami dalam membangun generasi madani.",
|
||||
keywords: "Yayasan Bina Insan Kamil, pendidikan Indonesia, beasiswa, pemberdayaan masyarakat, program sosial, lembaga nirlaba, donasi, volunteer",
|
||||
metadataBase: new URL("https://yasbil.org"),
|
||||
alternates: {
|
||||
canonical: "https://yasbil.org",
|
||||
},
|
||||
openGraph: {
|
||||
title: "Yasbil - Membangun Generasi Madani",
|
||||
description: "Yayasan Bina Insan Kamil berdedikasi untuk pendidikan berkualitas, pengembangan karakter, dan pemberdayaan masyarakat Indonesia.",
|
||||
url: "https://yasbil.org",
|
||||
siteName: "Yasbil",
|
||||
type: "website",
|
||||
images: [
|
||||
{
|
||||
url: "http://img.b2bpic.net/free-photo/female-tutor-mentoring-schoolgirls-school-library-setting_482257-127879.jpg",
|
||||
alt: "Yasbil - Generasi Madani",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Yasbil - Yayasan Bina Insan Kamil",
|
||||
description: "Pendidikan, Karakter, dan Kemanusiaan untuk Indonesia yang Lebih Baik",
|
||||
images: ["http://img.b2bpic.net/free-photo/female-tutor-mentoring-schoolgirls-school-library-setting_482257-127879.jpg"],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
};
|
||||
title: "Yasbil - Yayasan Bina Insan Kamil", description: "Organisasi nirlaba yang berdedikasi untuk memberdayakan anak dan keluarga melalui pendidikan, pelatihan keterampilan, dan program kesehatan."};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${halant.variable} ${inter.variable} ${openSans.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<html lang="id">
|
||||
<body className={inter.variable}>
|
||||
{children}
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1436,7 +1388,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
131
src/app/metrics/page.tsx
Normal file
131
src/app/metrics/page.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
export default function MetricsPage() {
|
||||
const navItems = [
|
||||
{ name: "Beranda", id: "/" },
|
||||
{ name: "Tentang Kami", id: "/tentang-kami" },
|
||||
{ name: "Program", id: "/program" },
|
||||
{ name: "Dampak", id: "/metrics" },
|
||||
{ name: "Tim", id: "/tim" },
|
||||
{ name: "Kontak", id: "/kontak" },
|
||||
];
|
||||
|
||||
const impactMetrics = [
|
||||
{
|
||||
id: "1", title: "Anak Terlayani", subtitle: "Melalui program pendidikan, kesehatan, dan pemberdayaan", category: "Pendidikan", value: "15,000+", buttons: [
|
||||
{
|
||||
text: "Pelajari Program Pendidikan", href: "/program"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2", title: "Keluarga Diberdayakan", subtitle: "Melalui pelatihan keterampilan dan bantuan ekonomi", category: "Pemberdayaan Ekonomi", value: "8,500+", buttons: [
|
||||
{
|
||||
text: "Lihat Program Ekonomi", href: "/program"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3", title: "Beasiswa Diberikan", subtitle: "Membantu anak melanjutkan pendidikan ke jenjang lebih tinggi", category: "Pendidikan", value: "3,200+", buttons: [
|
||||
{
|
||||
text: "Dukung Beasiswa", href: "/kontak"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "4", title: "Vaksinasi Lengkap", subtitle: "Anak dan ibu hamil yang telah mendapat vaksinasi penuh", category: "Kesehatan", value: "12,000+", buttons: [
|
||||
{
|
||||
text: "Program Kesehatan", href: "/program"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "5", title: "Usaha Mikro Terbentuk", subtitle: "Keluarga yang berhasil memulai usaha mandiri", category: "Pemberdayaan Ekonomi", value: "2,100+", buttons: [
|
||||
{
|
||||
text: "Lihat Program", href: "/program"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "6", title: "Relawan Aktif", subtitle: "Profesional dan masyarakat yang berkontribusi", category: "Komunitas", value: "450+", buttons: [
|
||||
{
|
||||
text: "Menjadi Relawan", href: "#"},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Yasbil"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Dukung Kami", href: "/kontak"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Impact Metrics Section */}
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTen
|
||||
title="Dampak Nyata Kami"
|
||||
description="Setiap angka mewakili kehidupan yang berubah dan masa depan yang lebih cerah. Berikut adalah komitmen kami terhadap perubahan sosial yang terukur dan berkelanjutan. Data ini diperbarui secara berkala berdasarkan laporan lapangan dari mitra kami."
|
||||
tag="Dampak"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
metrics={impactMetrics}
|
||||
buttons={[
|
||||
{ text: "Lihat Laporan Lengkap", href: "#" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Organisasi", items: [
|
||||
{ label: "Tentang Kami", href: "/tentang-kami" },
|
||||
{ label: "Program Kami", href: "/program" },
|
||||
{ label: "Tim Kami", href: "/tim" },
|
||||
{ label: "Karir", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Dukungan", items: [
|
||||
{ label: "Dukung Kami", href: "/kontak" },
|
||||
{ label: "Menjadi Volunteer", href: "#" },
|
||||
{ label: "Laporan Tahunan", href: "#" },
|
||||
{ label: "FAQ", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Kontak", items: [
|
||||
{ label: "Email: info@yasbil.org", href: "mailto:info@yasbil.org" },
|
||||
{ label: "Telepon: +62-21-XXXX-XXXX", href: "#" },
|
||||
{ label: "Lokasi Jakarta", href: "#" },
|
||||
{ label: "Media Sosial", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2025 Yasbil (Yayasan Bina Insan Kamil). Semua hak dilindungi."
|
||||
bottomRightText="Dibuat dengan dedikasi untuk masyarakat Indonesia"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
298
src/app/page.tsx
298
src/app/page.tsx
@@ -1,16 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroLogo from "@/components/sections/hero/HeroLogo";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
|
||||
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
||||
import TeamCardTen from "@/components/sections/team/TeamCardTen";
|
||||
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
|
||||
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
||||
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
|
||||
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
|
||||
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
|
||||
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Heart, Mail, Globe, Linkedin } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function HomePage() {
|
||||
@@ -23,9 +24,84 @@ export default function HomePage() {
|
||||
{ name: "Kontak", id: "/kontak" },
|
||||
];
|
||||
|
||||
const handleContactSubmit = (email: string) => {
|
||||
console.log("Email submitted:", email);
|
||||
};
|
||||
const teamMembers = [
|
||||
{
|
||||
id: "1", name: "Dr. Muhammad Syaiful Anwar", role: "Founder & Executive Director", description: "Visioner pendidikan dengan pengalaman 20+ tahun dalam pengembangan program sosial dan pemberdayaan masyarakat.", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop", imageAlt: "Dr. Muhammad Syaiful Anwar", socialLinks: [
|
||||
{ icon: Linkedin, url: "https://linkedin.com" },
|
||||
{ icon: Globe, url: "https://example.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2", name: "Siti Nurhaliza", role: "Program Director", description: "Ahli dalam manajemen program sosial dan koordinasi kegiatan lapangan di berbagai daerah.", imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop", imageAlt: "Siti Nurhaliza", socialLinks: [
|
||||
{ icon: Linkedin, url: "https://linkedin.com" },
|
||||
{ icon: Mail, url: "mailto:siti@yasbil.org" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3", name: "Budi Santoso", role: "Operations Manager", description: "Profesional operasional berpengalaman dalam efisiensi program dan sumber daya manusia.", imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop", imageAlt: "Budi Santoso", socialLinks: [
|
||||
{ icon: Linkedin, url: "https://linkedin.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "4", name: "Dr. Eka Prasetya", role: "Health Program Lead", description: "Dokter dan epidemiolog dengan fokus pada kesehatan masyarakat dan program vaksinasi.", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop", imageAlt: "Dr. Eka Prasetya", socialLinks: [
|
||||
{ icon: Globe, url: "https://example.com" },
|
||||
{ icon: Mail, url: "mailto:eka@yasbil.org" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
id: "1", name: "Ibu Ratna", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop", imageAlt: "Ibu Ratna"},
|
||||
{
|
||||
id: "2", name: "Pak Wijaya", imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop", imageAlt: "Pak Wijaya"},
|
||||
{
|
||||
id: "3", name: "Bu Sinta", imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop", imageAlt: "Bu Sinta"},
|
||||
{
|
||||
id: "4", name: "Pak Hendra", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop", imageAlt: "Pak Hendra"},
|
||||
];
|
||||
|
||||
const impactMetrics = [
|
||||
{
|
||||
id: "1", title: "Anak Terlayani", subtitle: "Program pendidikan dan kesehatan rutin", category: "Pendidikan", value: "15,000+", buttons: [
|
||||
{
|
||||
text: "Pelajari Program", href: "/program"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2", title: "Keluarga Diberdayakan", subtitle: "Melalui pelatihan keterampilan dan bantuan ekonomi", category: "Pemberdayaan", value: "8,500+", buttons: [
|
||||
{
|
||||
text: "Lihat Dampak", href: "/metrics"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3", title: "Beasiswa Diberikan", subtitle: "Membantu anak melanjutkan pendidikan", category: "Beasiswa", value: "3,200+", buttons: [
|
||||
{
|
||||
text: "Dukung Beasiswa", href: "/kontak"},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const programs = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Program Pendidikan Gratis", description: "Menyediakan akses pendidikan berkualitas untuk anak-anak dari keluarga kurang mampu melalui sekolah gratis dan bantuan pembelajaran.", imageSrc: "https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?w=500&h=500&fit=crop", imageAlt: "Anak-anak belajar di kelas"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Pelatihan Keterampilan", description: "Memberikan pelatihan keterampilan praktis kepada remaja dan dewasa muda untuk membuka peluang pekerjaan dan wirausaha.", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop", imageAlt: "Peserta pelatihan keterampilan"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Program Kesehatan Komunitas", description: "Melaksanakan program kesehatan preventif, vaksinasi, dan edukasi kesehatan untuk meningkatkan derajat kesehatan masyarakat.", imageSrc: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=500&h=500&fit=crop", imageAlt: "Tenaga kesehatan memberikan layanan"},
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
id: "1", title: "Bagaimana cara menjadi donor Yasbil?", content: "Anda dapat menjadi donor dengan mengunjungi website kami dan memilih program yang ingin didukung. Kami menerima donasi sekali kali atau rutin setiap bulan. Semua donasi dapat dikurangkan dari pajak."},
|
||||
{
|
||||
id: "2", title: "Apakah Yasbil memiliki transparansi finansial?", content: "Ya, kami adalah organisasi terdaftar dan telah melewati audit independen. Laporan keuangan tahunan kami tersedia untuk publik dan kami berkomitmen pada transparansi penuh."},
|
||||
{
|
||||
id: "3", title: "Bagaimana cara menjadi relawan Yasbil?", content: "Anda dapat mendaftar sebagai relawan melalui portal kami. Kami menerima relawan dari berbagai latar belakang untuk mendampingi program pendidikan, kesehatan, dan pemberdayaan ekonomi."},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -34,15 +110,15 @@ export default function HomePage() {
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="grid"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Yasbil"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
@@ -52,136 +128,97 @@ export default function HomePage() {
|
||||
|
||||
{/* Hero Section */}
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Yasbil"
|
||||
description="Membangun Generasi Madani melalui Pendidikan, Pengembangan Karakter, dan Kemanusiaan"
|
||||
<HeroLogoBillboardSplit
|
||||
logoText="YASBIL"
|
||||
description="Memberdayakan generasi masa depan melalui pendidikan, kesehatan, dan ekonomi berkelanjutan untuk komunitas yang lebih kuat dan sejahtera."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
buttons={[
|
||||
{ text: "Pelajari Program", href: "/program" },
|
||||
{ text: "Dukung Misi Kami", href: "/kontak" },
|
||||
{ text: "Dukung Program", href: "/kontak" },
|
||||
{ text: "Pelajari Lebih Lanjut", href: "/tentang-kami" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-tutor-mentoring-schoolgirls-school-library-setting_482257-127879.jpg"
|
||||
imageAlt="Siswa belajar dan berbagi pengetahuan"
|
||||
showDimOverlay={true}
|
||||
layoutOrder="default"
|
||||
imageSrc="https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?w=800&h=600&fit=crop"
|
||||
imageAlt="Anak-anak komunitas Yasbil"
|
||||
frameStyle="card"
|
||||
mediaAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* About Section */}
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="Tentang Yasbil"
|
||||
description={[
|
||||
"Yasbil (Yayasan Bina Insan Kamil) adalah lembaga nirlaba yang berdedikasi untuk membangun sumber daya manusia yang berintegritas, berpengetahuan, dan berkarakter mulia. Sejak didirikan, kami berkomitmen untuk memberikan akses pendidikan berkualitas kepada mereka yang membutuhkan.", "Dengan jaringan luas di seluruh Indonesia, Yasbil mengintegrasikan pendidikan formal, pengembangan karakter, dan kegiatan kemanusiaan untuk menciptakan dampak nyata bagi masyarakat. Transparansi dan akuntabilitas adalah fondasi dari setiap program yang kami jalankan."]}
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{ type: "text", content: "Yasbil adalah yayasan nirlaba yang berkomitmen untuk memberdayakan anak, keluarga, dan komunitas melalui" },
|
||||
{ type: "text", content: "pendidikan berkualitas, program kesehatan, dan pemberdayaan ekonomi" },
|
||||
{ type: "text", content: "." },
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Baca Selengkapnya", href: "/tentang-kami" },
|
||||
{ text: "Tentang Program", href: "/program" },
|
||||
{ text: "Hubungi Kami", href: "/kontak" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
showBorder={true}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Programs Section */}
|
||||
<div id="programs" data-section="programs">
|
||||
<FeatureCardTwentyOne
|
||||
<FeatureCardSeven
|
||||
title="Program Unggulan Kami"
|
||||
description="Kami menawarkan berbagai program komprehensif yang dirancang untuk mengembangkan potensi penuh setiap individu melalui pendidikan, karakter, dan kepedulian sosial."
|
||||
tag="Program Kami"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/yoga-class-concept_53876-31177.jpg"
|
||||
imageAlt="Kegiatan program Yasbil"
|
||||
accordionItems={[
|
||||
{
|
||||
id: "1", title: "Beasiswa & Pendidikan", content: "Program beasiswa penuh untuk siswa berprestasi dari keluarga kurang mampu. Mencakup pendidikan formal, bimbingan belajar intensif, asrama berkualitas, dan pengembangan akademik di sekolah-sekolah binaan kami di berbagai daerah."},
|
||||
{
|
||||
id: "2", title: "Pengembangan Karakter", content: "Seminar, workshop, dan pelatihan kepemimpinan yang dirancang untuk membentuk karakter tangguh, integritas tinggi, dan tanggung jawab sosial. Program ini mencakup mentoring personal dan pengembangan soft skills yang relevan dengan kebutuhan industri."},
|
||||
{
|
||||
id: "3", title: "Bakti Sosial & Kemanusiaan", content: "Kegiatan rutin bantuan kemanusiaan meliputi pendistribusian pangan, pemeriksaan kesehatan gratis, perbaikan sarana pendidikan, dan program pemberdayaan masyarakat di daerah terpencil maupun urban areas."},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Lihat Semua Program", href: "/program" },
|
||||
]}
|
||||
description="Yasbil mengembangkan berbagai program terintegrasi yang dirancang untuk memberikan dampak nyata dan berkelanjutan bagi masyarakat yang kami layani."
|
||||
tag="Program"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
mediaPosition="left"
|
||||
mediaAnimation="slide-up"
|
||||
features={programs.map((program) => ({
|
||||
id: program.id,
|
||||
title: program.title,
|
||||
description: program.description,
|
||||
imageSrc: program.imageSrc,
|
||||
imageAlt: program.imageAlt,
|
||||
}))}
|
||||
buttons={[
|
||||
{ text: "Jelajahi Semua Program", href: "/program" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Metrics Section */}
|
||||
{/* Impact Metrics Section */}
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
title="Dampak Nyata Yasbil"
|
||||
description="Melalui dedikasi dan kerja keras tim kami, Yasbil telah memberikan kontribusi signifikan bagi kemajuan pendidikan dan kesejahteraan masyarakat Indonesia."
|
||||
tag="Statistik Dampak"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "5,000+", title: "Siswa Terlayani", items: [
|
||||
"Dari berbagai tingkat pendidikan", "Tersebar di 20+ provinsi", "98% lulus ujian nasional"],
|
||||
},
|
||||
{
|
||||
id: "2", value: "15,000+", title: "Penerima Manfaat Program Sosial", items: [
|
||||
"Pelayanan kesehatan gratis", "Bantuan pangan rutin", "Pelatihan keterampilan"],
|
||||
},
|
||||
{
|
||||
id: "3", value: "500+", title: "Mitra Strategis", items: [
|
||||
"Perusahaan & institusi pendidikan", "LSM & organisasi masyarakat", "Pemerintah lokal & pusat"],
|
||||
},
|
||||
{
|
||||
id: "4", value: "20+", title: "Tahun Pengalaman", items: [
|
||||
"Kepercayaan donor global", "Akuntabilitas terverifikasi", "Transparansi penuh"],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
<MetricCardTen
|
||||
title="Dampak Nyata Kami"
|
||||
description="Setiap angka mewakili kehidupan yang berubah dan masa depan yang lebih cerah. Ini adalah komitmen kami terhadap perubahan sosial."
|
||||
tag="Dampak"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Lihat Laporan Tahunan", href: "/kontak" },
|
||||
]}
|
||||
metrics={impactMetrics}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Team Section */}
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
title="Tim Profesional Kami yang Berdedikasi"
|
||||
tag="Tim Yasbil"
|
||||
members={[
|
||||
{
|
||||
id: "1", name: "Dr. Ahmad Santoso", imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-tablet_1098-135.jpg", imageAlt: "Dr. Ahmad Santoso"},
|
||||
{
|
||||
id: "2", name: "Siti Nurhaliza", imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", imageAlt: "Siti Nurhaliza"},
|
||||
{
|
||||
id: "3", name: "Budi Hartono", imageSrc: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg", imageAlt: "Budi Hartono"},
|
||||
{
|
||||
id: "4", name: "Dra. Eka Putri", imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", imageAlt: "Dra. Eka Putri"},
|
||||
]}
|
||||
memberVariant="default"
|
||||
<TeamCardTwo
|
||||
title="Tim Kami"
|
||||
description="Profesional berpengalaman yang berdedikasi untuk mewujudkan misi pemberdayaan masyarakat Yasbil."
|
||||
tag="Tim"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
membersAnimation="slide-up"
|
||||
members={teamMembers}
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
title="Kisah Sukses dari Penerima Manfaat"
|
||||
description="Dengarkan langsung dari mereka yang telah merasakan dampak program Yasbil dalam mengubah hidup mereka."
|
||||
tag="Testimoni"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Rendra Wijaya", handle: "Penerima Beasiswa Angkatan 2019", testimonial: "Berkat Yasbil, saya bisa melanjutkan pendidikan hingga universitas. Beasiswa ini bukan hanya soal uang, tapi juga membuka wawasan dan karakter saya berkembang pesat.", imageSrc: "http://img.b2bpic.net/free-photo/happy-caucasian-male-graduate-graduation-glow-with-diploma-looking-camera-campus_496169-1341.jpg", imageAlt: "Rendra Wijaya"},
|
||||
{
|
||||
id: "2", name: "Winda Maharani", handle: "Pengusaha UMKM Hasil Pelatihan Yasbil", testimonial: "Program pelatihan keterampilan Yasbil memberi saya bekal untuk memulai usaha sendiri. Sekarang saya bisa membantu keluarga dan komunitas saya.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg", imageAlt: "Winda Maharani"},
|
||||
{
|
||||
id: "3", name: "Hendra Kusuma", handle: "Kepala Sekolah Mitra Yasbil", testimonial: "Kolaborasi dengan Yasbil telah meningkatkan kualitas pendidikan di sekolah kami secara signifikan. Siswa kami lebih termotivasi dan berprestasi.", imageSrc: "http://img.b2bpic.net/free-photo/mature-business-manager-office_1098-21368.jpg", imageAlt: "Hendra Kusuma"},
|
||||
{
|
||||
id: "4", name: "Dr. Ratna Dewi", handle: "Direktur Program Kesehatan Komunitas", testimonial: "Dedikasi Yasbil terhadap pemberdayaan masyarakat sangat luar biasa. Program kesehatan gratis mereka telah menjangkau ribuan keluarga di daerah terpencil.", imageSrc: "http://img.b2bpic.net/free-photo/doctor-clinic-interior_1398-732.jpg", imageAlt: "Dr. Ratna Dewi"},
|
||||
{
|
||||
id: "5", name: "Muhammad Ridho", handle: "Mahasiswa Aktif & Volunteer", testimonial: "Menjadi bagian dari Yasbil membuat saya memahami arti pengabdian. Saya belajar banyak dari senior dan bisa memberikan dampak nyata kepada masyarakat.", imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-volunteer-t-shirt-ready-help-smiling-camera-cross-arms-chest-confident-white-background_1258-75989.jpg", imageAlt: "Muhammad Ridho"},
|
||||
{
|
||||
id: "6", name: "Yuni Handayani", handle: "Ibu Rumah Tangga - Penerima Program Sosial", testimonial: "Bantuan dan pelatihan dari Yasbil membantu keluarga saya keluar dari kesulitan ekonomi. Kami sangat berterima kasih atas kepedulian dan bantuan konkret yang diberikan.", imageSrc: "http://img.b2bpic.net/free-photo/lesbian-couple-with-their-son-spending-time-together-outdoors_23-2149099772.jpg", imageAlt: "Yuni Handayani"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
<TestimonialCardTwelve
|
||||
testimonials={testimonials}
|
||||
cardTitle="Lebih dari 10,000 keluarga telah merasakan dampak positif program Yasbil"
|
||||
cardTag="Kisah Nyata dari Komunitas"
|
||||
useInvertedBackground={false}
|
||||
speed={40}
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -194,36 +231,31 @@ export default function HomePage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Acme Corp", "TechFlow", "Innovate Inc", "CloudSync", "Digital Partners", "Future Solutions", "Global Networks"]}
|
||||
logos={[
|
||||
"http://img.b2bpic.net/free-vector/collection-modern-logos-abstract-design_23-2147594158.jpg", "http://img.b2bpic.net/free-vector/set-ornamental-logos-vintage-style_23-2147593940.jpg", "http://img.b2bpic.net/free-vector/logo-set_53876-62074.jpg", "http://img.b2bpic.net/free-vector/abstract-business-card-template_23-2148303097.jpg", "http://img.b2bpic.net/free-vector/collection-retro-logos_23-2148448608.jpg", "http://img.b2bpic.net/free-vector/logo-set_53876-62074.jpg", "http://img.b2bpic.net/free-vector/abstract-business-card-template_23-2148303097.jpg"]}
|
||||
"UNICEF", "World Health Organization", "Save the Children", "UN Development Programme", "Global Fund", "Asian Development Bank"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Contact Section */}
|
||||
{/* Contact & FAQ Section */}
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Bergabunglah"
|
||||
title="Dukung Misi Kami"
|
||||
description="Setiap kontribusi Anda, sekecil apapun, membuat perbedaan besar bagi ribuan anak dan keluarga yang membutuhkan. Mari bersama-sama membangun generasi madani."
|
||||
background={{ variant: "rotated-rays-animated-grid" }}
|
||||
<ContactFaq
|
||||
faqs={faqs}
|
||||
ctaTitle="Hubungi Kami"
|
||||
ctaDescription="Ada pertanyaan tentang program Yasbil atau ingin berkontribusi? Tim kami siap membantu Anda."
|
||||
ctaButton={{
|
||||
text: "Hubungi Tim", href: "/kontak"}}
|
||||
ctaIcon={Mail}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Masukkan email Anda"
|
||||
buttonText="Daftarkan Diri"
|
||||
termsText="Kami menghormati privasi Anda. Informasi yang Anda berikan akan digunakan untuk komunikasi program dan peluang donasi."
|
||||
onSubmit={handleContactSubmit}
|
||||
animationType="slide-up"
|
||||
accordionAnimationType="smooth"
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/row-multiethnic-elementary-students-reading-book-classroom-vintage-effect-style-pictures_1253-1577.jpg"
|
||||
imageAlt="Anak-anak belajar bersama"
|
||||
logoText="Yasbil - Yayasan Bina Insan Kamil"
|
||||
copyrightText="© 2025 Yasbil (Yayasan Bina Insan Kamil). Semua hak dilindungi."
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Organisasi", items: [
|
||||
@@ -244,14 +276,16 @@ export default function HomePage() {
|
||||
{
|
||||
title: "Kontak", items: [
|
||||
{ label: "Email: info@yasbil.org", href: "mailto:info@yasbil.org" },
|
||||
{ label: "Telepon: +62-XXX-XXXX-XXXX", href: "#" },
|
||||
{ label: "Telepon: +62-21-XXXX-XXXX", href: "#" },
|
||||
{ label: "Lokasi Jakarta", href: "#" },
|
||||
{ label: "Media Sosial", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2025 Yasbil (Yayasan Bina Insan Kamil). Semua hak dilindungi."
|
||||
bottomRightText="Dibuat dengan dedikasi untuk masyarakat Indonesia"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
|
||||
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import Link from "next/link";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
export default function ProgramPage() {
|
||||
const navItems = [
|
||||
@@ -18,9 +15,26 @@ export default function ProgramPage() {
|
||||
{ name: "Kontak", id: "/kontak" },
|
||||
];
|
||||
|
||||
const handleContactSubmit = (email: string) => {
|
||||
console.log("Email submitted:", email);
|
||||
};
|
||||
const programs = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Program Pendidikan Gratis", description: "Memberikan akses pendidikan berkualitas kepada anak-anak dari keluarga kurang mampu melalui sekolah gratis, kursus tambahan, dan bantuan belajar. Program ini mencakup penyediaan buku, alat tulis, dan beasiswa untuk siswa berprestasi.", imageSrc: "https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?w=500&h=500&fit=crop", imageAlt: "Anak-anak belajar di kelas"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Pelatihan Keterampilan Digital", description: "Melatih remaja dan dewasa muda dengan keterampilan digital yang relevan dengan era modern. Meliputi coding, desain grafis, pemasaran digital, dan teknologi informasi untuk membuka peluang kerja di industri digital.", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop", imageAlt: "Peserta pelatihan digital"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Program Kesehatan Komunitas", description: "Melaksanakan program vaksinasi, pemeriksaan kesehatan rutin, dan edukasi kesehatan untuk meningkatkan derajat kesehatan masyarakat. Termasuk program kesehatan ibu dan anak, serta pencegahan penyakit menular.", imageSrc: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=500&h=500&fit=crop", imageAlt: "Tenaga kesehatan memberikan layanan"},
|
||||
{
|
||||
id: 4,
|
||||
title: "Pemberdayaan Ekonomi Keluarga", description: "Memberikan pelatihan kewirausahaan, akses modal usaha mikro, dan pendampingan bisnis untuk membantu keluarga menciptakan sumber penghasilan berkelanjutan dan meningkatkan ekonomi keluarga.", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop", imageAlt: "Pemberdayaan usaha mikro"},
|
||||
{
|
||||
id: 5,
|
||||
title: "Program Beasiswa Penuh", description: "Memberikan beasiswa penuh kepada siswa berprestasi dari keluarga kurang mampu untuk melanjutkan pendidikan ke jenjang yang lebih tinggi, mencakup biaya sekolah, seragam, dan perlengkapan sekolah.", imageSrc: "https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?w=500&h=500&fit=crop", imageAlt: "Siswa penerima beasiswa"},
|
||||
{
|
||||
id: 6,
|
||||
title: "Dukungan Psikososial dan Konseling", description: "Menyediakan layanan konseling psikologis, pendampingan sosial, dan dukungan emosional untuk anak dan keluarga yang menghadapi tantangan sosial, ekonomi, atau trauma.", imageSrc: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=500&h=500&fit=crop", imageAlt: "Sesi konseling dan pendampingan"},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -29,147 +43,50 @@ export default function ProgramPage() {
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="grid"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Yasbil"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Dukung Kami",
|
||||
href: "/kontak",
|
||||
}}
|
||||
text: "Dukung Kami", href: "/kontak"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Programs Section - Detailed */}
|
||||
{/* Programs Section */}
|
||||
<div id="programs" data-section="programs">
|
||||
<FeatureCardTwentyOne
|
||||
title="Program Unggulan Kami"
|
||||
description="Kami menawarkan berbagai program komprehensif yang dirancang untuk mengembangkan potensi penuh setiap individu melalui pendidikan, karakter, dan kepedulian sosial. Setiap program dirancang dengan cermat untuk memberikan dampak maksimal bagi penerima manfaat dan komunitas."
|
||||
tag="Program Kami"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/yoga-class-concept_53876-31177.jpg?_wi=2"
|
||||
imageAlt="Kegiatan program Yasbil"
|
||||
accordionItems={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Beasiswa & Pendidikan",
|
||||
content: "Program beasiswa penuh untuk siswa berprestasi dari keluarga kurang mampu. Mencakup pendidikan formal, bimbingan belajar intensif, asrama berkualitas, dan pengembangan akademik di sekolah-sekolah binaan kami di berbagai daerah. Kami juga menyediakan akses ke teknologi pembelajaran modern dan mentor akademik profesional.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Pengembangan Karakter",
|
||||
content: "Seminar, workshop, dan pelatihan kepemimpinan yang dirancang untuk membentuk karakter tangguh, integritas tinggi, dan tanggung jawab sosial. Program ini mencakup mentoring personal dan pengembangan soft skills yang relevan dengan kebutuhan industri. Peserta juga mendapat kesempatan untuk mengikuti seminar nasional dan internasional.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Bakti Sosial & Kemanusiaan",
|
||||
content: "Kegiatan rutin bantuan kemanusiaan meliputi pendistribusian pangan, pemeriksaan kesehatan gratis, perbaikan sarana pendidikan, dan program pemberdayaan masyarakat di daerah terpencil maupun urban areas. Tim medis profesional dan relawan terlatih kami siap memberikan layanan terbaik kepada mereka yang membutuhkan.",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Hubungi Kami", href: "/kontak" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
mediaPosition="left"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
title="Cerita Nyata dari Program Kami"
|
||||
description="Mendengarkan langsung dari peserta dan penerima manfaat program Yasbil yang telah merasakan perubahan signifikan dalam kehidupan mereka."
|
||||
tag="Testimoni Peserta"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Rendra Wijaya",
|
||||
handle: "Penerima Beasiswa Angkatan 2019",
|
||||
testimonial: "Berkat Yasbil, saya bisa melanjutkan pendidikan hingga universitas. Beasiswa ini bukan hanya soal uang, tapi juga membuka wawasan dan karakter saya berkembang pesat.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-caucasian-male-graduate-graduation-glow-with-diploma-looking-camera-campus_496169-1341.jpg?_wi=2",
|
||||
imageAlt: "Rendra Wijaya",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Winda Maharani",
|
||||
handle: "Pengusaha UMKM Hasil Pelatihan Yasbil",
|
||||
testimonial: "Program pelatihan keterampilan Yasbil memberi saya bekal untuk memulai usaha sendiri. Sekarang saya bisa membantu keluarga dan komunitas saya.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg?_wi=2",
|
||||
imageAlt: "Winda Maharani",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Hendra Kusuma",
|
||||
handle: "Kepala Sekolah Mitra Yasbil",
|
||||
testimonial: "Kolaborasi dengan Yasbil telah meningkatkan kualitas pendidikan di sekolah kami secara signifikan. Siswa kami lebih termotivasi dan berprestasi.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mature-business-manager-office_1098-21368.jpg?_wi=2",
|
||||
imageAlt: "Hendra Kusuma",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Dr. Ratna Dewi",
|
||||
handle: "Direktur Program Kesehatan Komunitas",
|
||||
testimonial: "Dedikasi Yasbil terhadap pemberdayaan masyarakat sangat luar biasa. Program kesehatan gratis mereka telah menjangkau ribuan keluarga di daerah terpencil.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/doctor-clinic-interior_1398-732.jpg?_wi=2",
|
||||
imageAlt: "Dr. Ratna Dewi",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Muhammad Ridho",
|
||||
handle: "Mahasiswa Aktif & Volunteer",
|
||||
testimonial: "Menjadi bagian dari Yasbil membuat saya memahami arti pengabdian. Saya belajar banyak dari senior dan bisa memberikan dampak nyata kepada masyarakat.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-volunteer-t-shirt-ready-help-smiling-camera-cross-arms-chest-confident-white-background_1258-75989.jpg?_wi=2",
|
||||
imageAlt: "Muhammad Ridho",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Yuni Handayani",
|
||||
handle: "Ibu Rumah Tangga - Penerima Program Sosial",
|
||||
testimonial: "Bantuan dan pelatihan dari Yasbil membantu keluarga saya keluar dari kesulitan ekonomi. Kami sangat berterima kasih atas kepedulian dan bantuan konkret yang diberikan.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lesbian-couple-with-their-son-spending-time-together-outdoors_23-2149099772.jpg?_wi=2",
|
||||
imageAlt: "Yuni Handayani",
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
<FeatureCardSeven
|
||||
title="Program Unggulan Yasbil"
|
||||
description="Yasbil mengembangkan berbagai program terintegrasi yang dirancang untuk memberikan dampak nyata dan berkelanjutan bagi masyarakat yang kami layani. Setiap program dirancang dengan melibatkan komunitas dan disesuaikan dengan kebutuhan lokal."
|
||||
tag="Program"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
speed={40}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Contact Section */}
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Bergabunglah"
|
||||
title="Daftar untuk Menerima Informasi Program"
|
||||
description="Dapatkan informasi terbaru tentang program Yasbil, jadwal pendaftaran, dan peluang untuk bergabung dengan kami. Setiap informasi akan dikirim langsung ke email Anda."
|
||||
background={{ variant: "rotated-rays-animated-grid" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Masukkan email Anda"
|
||||
buttonText="Daftar Sekarang"
|
||||
termsText="Kami menghormati privasi Anda. Informasi yang Anda berikan akan digunakan untuk komunikasi program dan peluang donasi."
|
||||
onSubmit={handleContactSubmit}
|
||||
features={programs.map((program) => ({
|
||||
id: program.id,
|
||||
title: program.title,
|
||||
description: program.description,
|
||||
imageSrc: program.imageSrc,
|
||||
imageAlt: program.imageAlt,
|
||||
}))}
|
||||
buttons={[
|
||||
{ text: "Dukung Program", href: "/kontak" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/row-multiethnic-elementary-students-reading-book-classroom-vintage-effect-style-pictures_1253-1577.jpg?_wi=3"
|
||||
imageAlt="Anak-anak belajar bersama"
|
||||
logoText="Yasbil - Yayasan Bina Insan Kamil"
|
||||
copyrightText="© 2025 Yasbil (Yayasan Bina Insan Kamil). Semua hak dilindungi."
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Organisasi",
|
||||
items: [
|
||||
title: "Organisasi", items: [
|
||||
{ label: "Tentang Kami", href: "/tentang-kami" },
|
||||
{ label: "Program Kami", href: "/program" },
|
||||
{ label: "Tim Kami", href: "/tim" },
|
||||
@@ -177,8 +94,7 @@ export default function ProgramPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Dukungan",
|
||||
items: [
|
||||
title: "Dukungan", items: [
|
||||
{ label: "Dukung Kami", href: "/kontak" },
|
||||
{ label: "Menjadi Volunteer", href: "#" },
|
||||
{ label: "Laporan Tahunan", href: "#" },
|
||||
@@ -186,17 +102,18 @@ export default function ProgramPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Kontak",
|
||||
items: [
|
||||
title: "Kontak", items: [
|
||||
{ label: "Email: info@yasbil.org", href: "mailto:info@yasbil.org" },
|
||||
{ label: "Telepon: +62-XXX-XXXX-XXXX", href: "#" },
|
||||
{ label: "Telepon: +62-21-XXXX-XXXX", href: "#" },
|
||||
{ label: "Lokasi Jakarta", href: "#" },
|
||||
{ label: "Media Sosial", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2025 Yasbil (Yayasan Bina Insan Kamil). Semua hak dilindungi."
|
||||
bottomRightText="Dibuat dengan dedikasi untuk masyarakat Indonesia"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,28 +1,14 @@
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
|
||||
}
|
||||
@layer base {
|
||||
body {
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
overscroll-behavior: none;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-open-sans), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import TeamCardTen from "@/components/sections/team/TeamCardTen";
|
||||
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import Link from "next/link";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
||||
import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
export default function AboutPage() {
|
||||
const navItems = [
|
||||
@@ -18,6 +16,81 @@ export default function AboutPage() {
|
||||
{ name: "Kontak", id: "/kontak" },
|
||||
];
|
||||
|
||||
const timelineItems = [
|
||||
{
|
||||
id: "2015", reverse: false,
|
||||
media: (
|
||||
<div className="w-full h-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white font-bold text-2xl rounded-lg">
|
||||
2015
|
||||
</div>
|
||||
),
|
||||
content: (
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-bold">Fondasi Yasbil</h3>
|
||||
<p>Yasbil didirikan dengan visi memberdayakan anak dan keluarga melalui pendidikan dan pemberdayaan ekonomi.</p>
|
||||
<ul className="list-disc list-inside text-sm space-y-1">
|
||||
<li>Peluncuran program pendidikan gratis</li>
|
||||
<li>Pembentukan tim inti</li>
|
||||
</ul>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "2017", reverse: true,
|
||||
media: (
|
||||
<div className="w-full h-full bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center text-white font-bold text-2xl rounded-lg">
|
||||
2017
|
||||
</div>
|
||||
),
|
||||
content: (
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-bold">Ekspansi Program Kesehatan</h3>
|
||||
<p>Meluncurkan program kesehatan komunitas untuk meningkatkan derajat kesehatan masyarakat.</p>
|
||||
<ul className="list-disc list-inside text-sm space-y-1">
|
||||
<li>Program vaksinasi komunitas</li>
|
||||
<li>Edukasi kesehatan preventif</li>
|
||||
</ul>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "2019", reverse: false,
|
||||
media: (
|
||||
<div className="w-full h-full bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center text-white font-bold text-2xl rounded-lg">
|
||||
2019
|
||||
</div>
|
||||
),
|
||||
content: (
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-bold">Program Pelatihan Keterampilan</h3>
|
||||
<p>Memulai pelatihan keterampilan untuk membuka peluang kerja dan wirausaha bagi pemuda.</p>
|
||||
<ul className="list-disc list-inside text-sm space-y-1">
|
||||
<li>Kursus keterampilan digital</li>
|
||||
<li>Pelatihan kewirausahaan</li>
|
||||
</ul>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "2023", reverse: true,
|
||||
media: (
|
||||
<div className="w-full h-full bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center text-white font-bold text-2xl rounded-lg">
|
||||
2023
|
||||
</div>
|
||||
),
|
||||
content: (
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-bold">Pencapaian Milestone</h3>
|
||||
<p>Merayakan kesuksesan melayani lebih dari 10,000 anak dan keluarga di seluruh wilayah.</p>
|
||||
<ul className="list-disc list-inside text-sm space-y-1">
|
||||
<li>15,000+ anak terlayani</li>
|
||||
<li>8,500+ keluarga diberdayakan</li>
|
||||
</ul>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
@@ -25,143 +98,116 @@ export default function AboutPage() {
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="grid"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Yasbil"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Dukung Kami",
|
||||
href: "/kontak",
|
||||
}}
|
||||
text: "Dukung Kami", href: "/kontak"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* About Section - Expanded */}
|
||||
{/* About Hero */}
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="Tentang Yasbil"
|
||||
description={[
|
||||
"Yasbil (Yayasan Bina Insan Kamil) adalah lembaga nirlaba yang berdedikasi untuk membangun sumber daya manusia yang berintegritas, berpengetahuan, dan berkarakter mulia. Sejak didirikan, kami berkomitmen untuk memberikan akses pendidikan berkualitas kepada mereka yang membutuhkan.",
|
||||
"Dengan jaringan luas di seluruh Indonesia, Yasbil mengintegrasikan pendidikan formal, pengembangan karakter, dan kegiatan kemanusiaan untuk menciptakan dampak nyata bagi masyarakat. Transparansi dan akuntabilitas adalah fondasi dari setiap program yang kami jalankan.",
|
||||
"Visi kami adalah menciptakan ekosistem pendidikan yang inklusif, berkelanjutan, dan berdampak, di mana setiap individu memiliki kesempatan yang sama untuk berkembang menjadi insan yang madani, bermartabat, dan bermanfaat bagi masyarakat.",
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{ type: "text", content: "Tentang" },
|
||||
{ type: "text", content: "Yasbil" },
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Dukung Kami", href: "/kontak" },
|
||||
{ text: "Jelajahi Program", href: "/program" },
|
||||
{ text: "Dukung Misi Kami", href: "/kontak" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
showBorder={true}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Team Section */}
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
title="Tim Profesional Kami yang Berdedikasi dalam Memberikan Pelayanan Terbaik"
|
||||
tag="Tim Yasbil"
|
||||
members={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Dr. Ahmad Santoso",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-tablet_1098-135.jpg?_wi=2",
|
||||
imageAlt: "Dr. Ahmad Santoso - Direktur Eksekutif",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Siti Nurhaliza",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg?_wi=3",
|
||||
imageAlt: "Siti Nurhaliza - Kepala Program Pendidikan",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Budi Hartono",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg?_wi=2",
|
||||
imageAlt: "Budi Hartono - Koordinator Keuangan",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Dra. Eka Putri",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg?_wi=4",
|
||||
imageAlt: "Dra. Eka Putri - Kepala Program Sosial",
|
||||
},
|
||||
]}
|
||||
memberVariant="card"
|
||||
useInvertedBackground={false}
|
||||
membersAnimation="slide-up"
|
||||
/>
|
||||
{/* Our Story Section */}
|
||||
<div id="story" data-section="story" className="py-20">
|
||||
<div className="max-w-3xl mx-auto px-6">
|
||||
<h2 className="text-4xl font-bold text-center mb-6">Misi dan Visi Kami</h2>
|
||||
<div className="space-y-6 text-lg text-gray-700">
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold mb-3">Visi</h3>
|
||||
<p>
|
||||
Yasbil membayangkan sebuah masa depan di mana setiap anak memiliki akses ke pendidikan berkualitas, kesehatan yang baik, dan peluang ekonomi, terlepas dari latar belakang keluarga mereka.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold mb-3">Misi</h3>
|
||||
<p>
|
||||
Kami berkomitmen untuk memberdayakan anak, keluarga, dan komunitas melalui:
|
||||
</p>
|
||||
<ul className="list-disc list-inside mt-3 space-y-2">
|
||||
<li>Program pendidikan gratis dan berkualitas</li>
|
||||
<li>Layanan kesehatan preventif dan kuratif</li>
|
||||
<li>Pelatihan keterampilan dan pemberdayaan ekonomi</li>
|
||||
<li>Dukungan sosial dan komunitas yang kuat</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Impact Metrics Section */}
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
title="Pencapaian & Komitmen Kami"
|
||||
description="Statistik ini mencerminkan dedikasi tim dan kepercayaan dari berbagai stakeholder dalam mendukung misi Yasbil untuk membangun generasi madani."
|
||||
tag="Statistik Perjalanan Kami"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "5,000+",
|
||||
title: "Siswa Terlayani",
|
||||
items: [
|
||||
"Dari berbagai tingkat pendidikan",
|
||||
"Tersebar di 20+ provinsi",
|
||||
"98% lulus ujian nasional",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "15,000+",
|
||||
title: "Penerima Manfaat Program Sosial",
|
||||
items: [
|
||||
"Pelayanan kesehatan gratis",
|
||||
"Bantuan pangan rutin",
|
||||
"Pelatihan keterampilan",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "500+",
|
||||
title: "Mitra Strategis",
|
||||
items: [
|
||||
"Perusahaan & institusi pendidikan",
|
||||
"LSM & organisasi masyarakat",
|
||||
"Pemerintah lokal & pusat",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
value: "20+",
|
||||
title: "Tahun Pengalaman",
|
||||
items: [
|
||||
"Kepercayaan donor global",
|
||||
"Akuntabilitas terverifikasi",
|
||||
"Transparansi penuh",
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
{/* Timeline Section */}
|
||||
<div id="timeline" data-section="timeline">
|
||||
<TimelineProcessFlow
|
||||
title="Perjalanan Yasbil"
|
||||
description="Milestone penting yang membentuk komitmen kami terhadap perubahan sosial"
|
||||
tag="Sejarah"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
items={timelineItems}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Values Section */}
|
||||
<div id="values" data-section="values" className="py-20 bg-gray-50">
|
||||
<div className="max-w-4xl mx-auto px-6">
|
||||
<h2 className="text-4xl font-bold text-center mb-12">Nilai-Nilai Kami</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="p-6 bg-white rounded-lg shadow">
|
||||
<h3 className="text-2xl font-semibold mb-3">Integritas</h3>
|
||||
<p className="text-gray-600">
|
||||
Kami beroperasi dengan transparansi penuh dan akuntabilitas tinggi dalam setiap aspek organisasi.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-6 bg-white rounded-lg shadow">
|
||||
<h3 className="text-2xl font-semibold mb-3">Pemberdayaan</h3>
|
||||
<p className="text-gray-600">
|
||||
Kami percaya pada kekuatan memberdayakan individu dan komunitas untuk menciptakan perubahan berkelanjutan.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-6 bg-white rounded-lg shadow">
|
||||
<h3 className="text-2xl font-semibold mb-3">Inovasi</h3>
|
||||
<p className="text-gray-600">
|
||||
Kami terus mencari cara baru dan lebih efektif untuk menyelesaikan masalah sosial.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-6 bg-white rounded-lg shadow">
|
||||
<h3 className="text-2xl font-semibold mb-3">Kolaborasi</h3>
|
||||
<p className="text-gray-600">
|
||||
Kami bekerja sama dengan berbagai stakeholder untuk memperkuat dampak program kami.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/row-multiethnic-elementary-students-reading-book-classroom-vintage-effect-style-pictures_1253-1577.jpg?_wi=2"
|
||||
imageAlt="Anak-anak belajar bersama"
|
||||
logoText="Yasbil - Yayasan Bina Insan Kamil"
|
||||
copyrightText="© 2025 Yasbil (Yayasan Bina Insan Kamil). Semua hak dilindungi."
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Organisasi",
|
||||
items: [
|
||||
title: "Organisasi", items: [
|
||||
{ label: "Tentang Kami", href: "/tentang-kami" },
|
||||
{ label: "Program Kami", href: "/program" },
|
||||
{ label: "Tim Kami", href: "/tim" },
|
||||
@@ -169,8 +215,7 @@ export default function AboutPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Dukungan",
|
||||
items: [
|
||||
title: "Dukungan", items: [
|
||||
{ label: "Dukung Kami", href: "/kontak" },
|
||||
{ label: "Menjadi Volunteer", href: "#" },
|
||||
{ label: "Laporan Tahunan", href: "#" },
|
||||
@@ -178,17 +223,18 @@ export default function AboutPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Kontak",
|
||||
items: [
|
||||
title: "Kontak", items: [
|
||||
{ label: "Email: info@yasbil.org", href: "mailto:info@yasbil.org" },
|
||||
{ label: "Telepon: +62-XXX-XXXX-XXXX", href: "#" },
|
||||
{ label: "Telepon: +62-21-XXXX-XXXX", href: "#" },
|
||||
{ label: "Lokasi Jakarta", href: "#" },
|
||||
{ label: "Media Sosial", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2025 Yasbil (Yayasan Bina Insan Kamil). Semua hak dilindungi."
|
||||
bottomRightText="Dibuat dengan dedikasi untuk masyarakat Indonesia"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import TeamCardTen from "@/components/sections/team/TeamCardTen";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import Link from "next/link";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Mail, Globe, Linkedin, Github } from "lucide-react";
|
||||
|
||||
export default function TeamPage() {
|
||||
const navItems = [
|
||||
@@ -17,6 +16,43 @@ export default function TeamPage() {
|
||||
{ name: "Kontak", id: "/kontak" },
|
||||
];
|
||||
|
||||
const teamMembers = [
|
||||
{
|
||||
id: "1", name: "Dr. Muhammad Syaiful Anwar", role: "Founder & Executive Director", description: "Visioner pendidikan dengan pengalaman 20+ tahun dalam pengembangan program sosial dan pemberdayaan masyarakat. Beliau memimpin Yasbil dengan komitmen terhadap transformasi sosial yang berkelanjutan.", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop", imageAlt: "Dr. Muhammad Syaiful Anwar", socialLinks: [
|
||||
{ icon: Linkedin, url: "https://linkedin.com" },
|
||||
{ icon: Globe, url: "https://example.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2", name: "Siti Nurhaliza", role: "Program Director", description: "Ahli dalam manajemen program sosial dan koordinasi kegiatan lapangan di berbagai daerah. Memastikan setiap program Yasbil berjalan efektif dan memberikan dampak maksimal.", imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop", imageAlt: "Siti Nurhaliza", socialLinks: [
|
||||
{ icon: Linkedin, url: "https://linkedin.com" },
|
||||
{ icon: Mail, url: "mailto:siti@yasbil.org" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3", name: "Budi Santoso", role: "Operations Manager", description: "Profesional operasional berpengalaman dalam efisiensi program dan sumber daya manusia. Memastikan kelancaran operasional Yasbil setiap harinya.", imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop", imageAlt: "Budi Santoso", socialLinks: [
|
||||
{ icon: Linkedin, url: "https://linkedin.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "4", name: "Dr. Eka Prasetya", role: "Health Program Lead", description: "Dokter dan epidemiolog dengan fokus pada kesehatan masyarakat dan program vaksinasi. Memimpin inisiatif kesehatan Yasbil untuk menjangkau lebih banyak keluarga.", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop", imageAlt: "Dr. Eka Prasetya", socialLinks: [
|
||||
{ icon: Globe, url: "https://example.com" },
|
||||
{ icon: Mail, url: "mailto:eka@yasbil.org" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "5", name: "Rini Wijaya", role: "Education Program Manager", description: "Pendidik berpengalaman dengan passion untuk meningkatkan akses pendidikan berkualitas. Mengelola semua program pendidikan dan beasiswa Yasbil.", imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop", imageAlt: "Rini Wijaya", socialLinks: [
|
||||
{ icon: Linkedin, url: "https://linkedin.com" },
|
||||
{ icon: Mail, url: "mailto:rini@yasbil.org" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "6", name: "Ahmad Wijaya", role: "Finance & Compliance Officer", description: "Profesional keuangan dengan track record dalam pengelolaan dana organisasi nirlaba. Memastikan transparansi dan akuntabilitas Yasbil.", imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop", imageAlt: "Ahmad Wijaya", socialLinks: [
|
||||
{ icon: Linkedin, url: "https://linkedin.com" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
@@ -24,104 +60,42 @@ export default function TeamPage() {
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="grid"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Yasbil"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Dukung Kami",
|
||||
href: "/kontak",
|
||||
}}
|
||||
text: "Dukung Kami", href: "/kontak"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Team Introduction */}
|
||||
<div id="team-intro" data-section="team-intro">
|
||||
<TextSplitAbout
|
||||
title="Kenali Tim Kami"
|
||||
description={[
|
||||
"Yasbil dipimpin oleh tim profesional yang berdedikasi dan berpengalaman dalam bidang pendidikan, pengembangan masyarakat, dan manajemen organisasi. Setiap anggota tim membawa keahlian unik dan passion yang mendalam untuk membuat perbedaan nyata.",
|
||||
"Dengan latar belakang yang beragam dan pengalaman puluhan tahun di industri, tim kami berkomitmen untuk memberikan layanan terbaik kepada setiap penerima manfaat program Yasbil.",
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Bergabunglah dengan Tim", href: "/kontak" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
showBorder={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Team Members */}
|
||||
{/* Team Section */}
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
title="Tim Profesional Kami yang Berdedikasi dalam Memberikan Pelayanan Terbaik"
|
||||
tag="Tim Yasbil"
|
||||
members={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Dr. Ahmad Santoso",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-tablet_1098-135.jpg?_wi=3",
|
||||
imageAlt: "Dr. Ahmad Santoso - Direktur Eksekutif",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Siti Nurhaliza",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg?_wi=5",
|
||||
imageAlt: "Siti Nurhaliza - Kepala Program Pendidikan",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Budi Hartono",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg?_wi=3",
|
||||
imageAlt: "Budi Hartono - Koordinator Keuangan",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Dra. Eka Putri",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg?_wi=6",
|
||||
imageAlt: "Dra. Eka Putri - Kepala Program Sosial",
|
||||
},
|
||||
]}
|
||||
memberVariant="card"
|
||||
<TeamCardTwo
|
||||
title="Tim Kami"
|
||||
description="Profesional berpengalaman dan berdedikasi yang bekerja setiap hari untuk mewujudkan misi pemberdayaan masyarakat Yasbil. Setiap anggota tim membawa keahlian unik dan komitmen mendalam terhadap perubahan sosial."
|
||||
tag="Tim"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
membersAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Team Values */}
|
||||
<div id="team-values" data-section="team-values">
|
||||
<TextSplitAbout
|
||||
title="Nilai-Nilai Tim Kami"
|
||||
description={[
|
||||
"Integritas adalah fondasi dari semua keputusan kami. Kami berkomitmen untuk transparansi penuh dan akuntabilitas dalam setiap aspek operasional. Kepercayaan yang diberikan donor, mitra, dan masyarakat adalah aset paling berharga kami.",
|
||||
"Dedikasi dan passion untuk memberdayakan masyarakat mendorong kami setiap hari. Kami percaya bahwa pendidikan berkualitas adalah kunci untuk membangun masa depan yang lebih baik bagi generasi mendatang. Kolaborasi dan inovasi adalah cara kami menciptakan dampak yang berkelanjutan.",
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Pelajari Lebih Lanjut", href: "/tentang-kami" },
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
showBorder={false}
|
||||
members={teamMembers}
|
||||
gridVariant="bento-grid"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/row-multiethnic-elementary-students-reading-book-classroom-vintage-effect-style-pictures_1253-1577.jpg?_wi=5"
|
||||
imageAlt="Anak-anak belajar bersama"
|
||||
logoText="Yasbil - Yayasan Bina Insan Kamil"
|
||||
copyrightText="© 2025 Yasbil (Yayasan Bina Insan Kamil). Semua hak dilindungi."
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Organisasi",
|
||||
items: [
|
||||
title: "Organisasi", items: [
|
||||
{ label: "Tentang Kami", href: "/tentang-kami" },
|
||||
{ label: "Program Kami", href: "/program" },
|
||||
{ label: "Tim Kami", href: "/tim" },
|
||||
@@ -129,8 +103,7 @@ export default function TeamPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Dukungan",
|
||||
items: [
|
||||
title: "Dukungan", items: [
|
||||
{ label: "Dukung Kami", href: "/kontak" },
|
||||
{ label: "Menjadi Volunteer", href: "#" },
|
||||
{ label: "Laporan Tahunan", href: "#" },
|
||||
@@ -138,17 +111,18 @@ export default function TeamPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Kontak",
|
||||
items: [
|
||||
title: "Kontak", items: [
|
||||
{ label: "Email: info@yasbil.org", href: "mailto:info@yasbil.org" },
|
||||
{ label: "Telepon: +62-XXX-XXXX-XXXX", href: "#" },
|
||||
{ label: "Telepon: +62-21-XXXX-XXXX", href: "#" },
|
||||
{ label: "Lokasi Jakarta", href: "#" },
|
||||
{ label: "Media Sosial", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2025 Yasbil (Yayasan Bina Insan Kamil). Semua hak dilindungi."
|
||||
bottomRightText="Dibuat dengan dedikasi untuk masyarakat Indonesia"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user