File size: 57,008 Bytes
86284e2 0e462f9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dickson Okere Youths Foundation - Empowering Young Leaders</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://checkout.flutterwave.com/v3.js"></script>
<style>
.hero-gradient {
background: linear-gradient(135deg, rgba(21,101,192,0.9) 0%, rgba(25,118,210,0.9) 50%, rgba(66,165,245,0.9) 100%);
}
.donate-btn {
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.donate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.impact-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.impact-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.testimonial-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #1976D2;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.floating-btn {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.membership-btn {
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
color: white;
transition: all 0.3s ease;
}
.membership-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(239, 68, 68, 0.2);
}
/* Slider Styles */
.slider-container {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.slider {
display: flex;
transition: transform 0.5s ease-in-out;
height: 100%;
}
.slide {
min-width: 100%;
height: 100%;
position: relative;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slide-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 2rem;
}
.slider-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.slider-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.slider-dot.active {
background: white;
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 1rem;
cursor: pointer;
border-radius: 50%;
z-index: 10;
}
.slider-arrow.left {
left: 20px;
}
.slider-arrow.right {
right: 20px;
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Header/Navigation -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xl mr-3">DOYF</div>
<h1 class="text-xl font-bold text-blue-800">Dickson Okere Youths Foundation</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#home" class="nav-link text-gray-700 hover:text-blue-600">Home</a>
<a href="#about" class="nav-link text-gray-700 hover:text-blue-600">About</a>
<a href="#programs" class="nav-link text-gray-700 hover:text-blue-600">Programs</a>
<a href="#impact" class="nav-link text-gray-700 hover:text-blue-600">Impact</a>
<a href="#contact" class="nav-link text-gray-700 hover:text-blue-600">Contact</a>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeXYJKRYkXBqe4rmtGG5_SPNiif1fG_jSEa02p49YVpkeX-5w/viewform?usp=header" target="_blank" class="membership-btn px-4 py-2 rounded-full font-medium">
Join Us <i class="fas fa-user-plus ml-1"></i>
</a>
</nav>
<button class="md:hidden text-gray-700" id="mobile-menu-button">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
<!-- Mobile Menu -->
<div class="md:hidden hidden bg-white py-4 px-4 shadow-md" id="mobile-menu">
<a href="#home" class="block py-2 text-gray-700 hover:text-blue-600">Home</a>
<a href="#about" class="block py-2 text-gray-700 hover:text-blue-600">About</a>
<a href="#programs" class="block py-2 text-gray-700 hover:text-blue-600">Programs</a>
<a href="#impact" class="block py-2 text-gray-700 hover:text-blue-600">Impact</a>
<a href="#contact" class="block py-2 text-gray-700 hover:text-blue-600">Contact</a>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeXYJKRYkXBqe4rmtGG5_SPNiif1fG_jSEa02p49YVpkeX-5w/viewform?usp=header" target="_blank" class="block mt-3 w-full membership-btn text-white py-2 px-4 rounded-lg text-center">
Join Us <i class="fas fa-user-plus ml-1"></i>
</a>
<button onclick="openDonationModal()" class="mt-3 w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition">
Donate Now
</button>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="hero-gradient text-white py-20 md:py-32 relative overflow-hidden">
<div class="absolute inset-0 bg-black opacity-20"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-3xl">
<h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Empowering the Next Generation of African Leaders</h1>
<p class="text-xl mb-8">We provide education, mentorship, and opportunities to underprivileged youth across Nigeria, helping them realize their full potential.</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button onclick="openDonationModal()" class="donate-btn bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-gray-100">
Donate Now <i class="fas fa-heart ml-2"></i>
</button>
<a href="#programs" class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-blue-600 transition">
Our Programs <i class="fas fa-arrow-right ml-2"></i>
</a>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeXYJKRYkXBqe4rmtGG5_SPNiif1fG_jSEa02p49YVpkeX-5w/viewform?usp=header" target="_blank" class="membership-btn font-bold py-3 px-8 rounded-full hover:opacity-90 transition">
Become a Member <i class="fas fa-user-plus ml-2"></i>
</a>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-50 to-transparent"></div>
</section>
<!-- Image Slider Section -->
<section class="slider-container">
<div class="slider">
<!-- Slide 1 - Entrepreneurial Skills -->
<div class="slide">
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Entrepreneurial Skills">
<div class="slide-overlay">
<h2 class="text-3xl font-bold mb-2">Entrepreneurial Skills Development</h2>
<p class="text-lg">Empowering youth with practical business skills for self-reliance and economic growth.</p>
</div>
</div>
<!-- Slide 2 - Leadership Development -->
<div class="slide">
<img src="https://images.unsplash.com/photo-1521791055366-0d553872125f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Leadership Development">
<div class="slide-overlay">
<h2 class="text-3xl font-bold mb-2">Leadership Development</h2>
<p class="text-lg">Training the next generation of ethical leaders for Nigeria and Africa.</p>
</div>
</div>
<!-- Slide 3 - Social Emancipation -->
<div class="slide">
<img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Social Emancipation">
<div class="slide-overlay">
<h2 class="text-3xl font-bold mb-2">Social Emancipation</h2>
<p class="text-lg">Promoting social awareness, civic responsibility and community development.</p>
</div>
</div>
<!-- Slide 4 - Youth Empowerment -->
<div class="slide">
<img src="https://images.unsplash.com/photo-1582638423482-a90640357638?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fHlvdXRocyUyMGVtcG93ZXJtZW50fGVufDB8fDB8fHww" alt="Youth Empowerment">
<div class="slide-overlay">
<h2 class="text-3xl font-bold mb-2">Youth Empowerment</h2>
<p class="text-lg">Providing resources, mentorship and opportunities for youth to thrive.</p>
</div>
</div>
<!-- Slide 5 - Advocacy Campaigns -->
<div class="slide">
<img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Advocacy Campaigns">
<div class="slide-overlay">
<h2 class="text-3xl font-bold mb-2">Advocacy Campaigns</h2>
<p class="text-lg">Championing youth rights, social justice and positive societal change.</p>
</div>
</div>
<!-- Slide 6 - Community Services -->
<div class="slide">
<img src="https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Community Services">
<div class="slide-overlay">
<h2 class="text-3xl font-bold mb-2">Community Services</h2>
<p class="text-lg">Engaging youth in projects that address local challenges and improve communities.</p>
</div>
</div>
</div>
<button class="slider-arrow left" onclick="prevSlide()">
<i class="fas fa-chevron-left"></i>
</button>
<button class="slider-arrow right" onclick="nextSlide()">
<i class="fas fa-chevron-right"></i>
</button>
<div class="slider-nav">
<div class="slider-dot active" onclick="goToSlide(0)"></div>
<div class="slider-dot" onclick="goToSlide(1)"></div>
<div class="slider-dot" onclick="goToSlide(2)"></div>
<div class="slider-dot" onclick="goToSlide(3)"></div>
<div class="slider-dot" onclick="goToSlide(4)"></div>
<div class="slider-dot" onclick="goToSlide(5)"></div>
</div>
</section>
<!-- Stats Section -->
<section class="bg-white py-12">
<div class="container mx-auto px-4">
<div class="bg-white rounded-xl shadow-lg p-6 grid grid-cols-1 md:grid-cols-4 gap-6 divide-y md:divide-y-0 md:divide-x divide-gray-200">
<div class="text-center p-4">
<div class="text-4xl font-bold text-blue-600 mb-2">5,000+</div>
<div class="text-gray-600">Youths Empowered</div>
</div>
<div class="text-center p-4">
<div class="text-4xl font-bold text-blue-600 mb-2">120+</div>
<div class="text-gray-600">Communities Reached</div>
</div>
<div class="text-center p-4">
<div class="text-4xl font-bold text-blue-600 mb-2">15</div>
<div class="text-gray-600">Educational Programs</div>
</div>
<div class="text-center p-4">
<div class="text-4xl font-bold text-blue-600 mb-2">100%</div>
<div class="text-gray-600">Transparent Operations</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
<h2 class="text-3xl font-bold text-gray-800 mb-6">About Dickson Okere Youths Foundation</h2>
<p class="text-gray-600 mb-4">Dickson Okere Youths Foundation (DOYF) is a non-profit organization dedicated to advocating, pursuing and engaging in youths capacity building projects that will Stimulate Entrepreneurial Skills, Leadership Development and Social Emancipation of young people in Nigeria and Africa in general.</p>
<p class="text-gray-600 mb-6">Our team is passionately committed to creating positive change in the social spaces of Africa through entrepreneurial skills acquisition and empowerment programs, leadership development conferences, seminars, trainings, workshops, community services and advocacy campaigns/programs.</p>
<div class="flex space-x-4">
<div class="bg-blue-100 p-4 rounded-lg">
<i class="fas fa-eye text-blue-600 text-2xl mb-2"></i>
<h3 class="font-bold text-gray-800">Our Vision</h3>
<p class="text-gray-600 text-sm">A Nigeria where every youth has equal opportunities to succeed.</p>
</div>
<div class="bg-green-100 p-4 rounded-lg">
<i class="fas fa-bullseye text-green-600 text-2xl mb-2"></i>
<h3 class="font-bold text-gray-800">Our Mission</h3>
<p class="text-gray-600 text-sm">Redirecting and Refocusing the Interest and Strength of Young People on issues that builds progressive society, national peace and unity.</p>
</div>
</div>
</div>
<div class="md:w-1/2 relative">
<div class="bg-blue-600 rounded-xl overflow-hidden shadow-xl">
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="Youth empowerment" class="w-full h-auto opacity-90">
<div class="absolute inset-0 flex items-center justify-center">
<button class="bg-white bg-opacity-90 rounded-full p-4 text-blue-600 hover:bg-opacity-100 transition">
<i class="fas fa-play text-2xl"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Core Values Section -->
<div class="mt-16">
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Our Core Values</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-handshake text-blue-600 text-2xl"></i>
</div>
<h3 class="font-bold text-gray-800 mb-2">Diplomacy</h3>
<p class="text-gray-600 text-sm">We approach challenges with tact and strategic thinking</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-comments text-green-600 text-2xl"></i>
</div>
<h3 class="font-bold text-gray-800 mb-2">Dialogue</h3>
<p class="text-gray-600 text-sm">Open communication is key to understanding and progress</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-shield-alt text-purple-600 text-2xl"></i>
</div>
<h3 class="font-bold text-gray-800 mb-2">Integrity</h3>
<p class="text-gray-600 text-sm">We uphold the highest ethical standards in all we do</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-users text-yellow-600 text-2xl"></i>
</div>
<h3 class="font-bold text-gray-800 mb-2">Leadership</h3>
<p class="text-gray-600 text-sm">We lead by example and inspire others to do the same</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-exchange-alt text-red-600 text-2xl"></i>
</div>
<h3 class="font-bold text-gray-800 mb-2">Negotiation</h3>
<p class="text-gray-600 text-sm">Finding common ground for mutual benefit</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-brain text-indigo-600 text-2xl"></i>
</div>
<h3 class="font-bold text-gray-800 mb-2">Possibility Mindset</h3>
<p class="text-gray-600 text-sm">We believe in the potential of every young person</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-hands-helping text-pink-600 text-2xl"></i>
</div>
<h3 class="font-bold text-gray-800 mb-2">Community Service</h3>
<p class="text-gray-600 text-sm">Giving back to uplift those around us</p>
</div>
</div>
</div>
</div>
</section>
<!-- Programs Section -->
<section id="programs" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Our Programs</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Our programs anchor on the three cardinal points of "Entrepreneurial Skills Acquisitions and Empowerment; Leadership Development; and Social Emancipation of Young People".</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Program 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden impact-card">
<div class="h-48 bg-blue-100 flex items-center justify-center">
<i class="fas fa-graduation-cap text-blue-600 text-6xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-3">Entrepreneurial Skills</h3>
<p class="text-gray-600 mb-4">Comprehensive training programs to equip youth with practical business and vocational skills for self-reliance.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a>
</div>
</div>
<!-- Program 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden impact-card">
<div class="h-48 bg-green-100 flex items-center justify-center">
<i class="fas fa-laptop-code text-green-600 text-6xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-3">Leadership Development</h3>
<p class="text-gray-600 mb-4">Conferences, seminars and workshops to develop ethical leadership qualities in young people.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a>
</div>
</div>
<!-- Program 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden impact-card">
<div class="h-48 bg-purple-100 flex items-center justify-center">
<i class="fas fa-hands-helping text-purple-600 text-6xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-3">Social Emancipation</h3>
<p class="text-gray-600 mb-4">Programs that promote social awareness, civic responsibility and community development.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a>
</div>
</div>
<!-- Program 4 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden impact-card">
<div class="h-48 bg-yellow-100 flex items-center justify-center">
<i class="fas fa-briefcase text-yellow-600 text-6xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-3">Youth Empowerment</h3>
<p class="text-gray-600 mb-4">Initiatives that provide resources, mentorship and opportunities for youth to thrive.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a>
</div>
</div>
<!-- Program 5 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden impact-card">
<div class="h-48 bg-red-100 flex items-center justify-center">
<i class="fas fa-heartbeat text-red-600 text-6xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-3">Advocacy Campaigns</h3>
<p class="text-gray-600 mb-4">Programs that champion youth rights, social justice and positive societal change.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a>
</div>
</div>
<!-- Program 6 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden impact-card">
<div class="h-48 bg-indigo-100 flex items-center justify-center">
<i class="fas fa-hand-holding-heart text-indigo-600 text-6xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-3">Community Services</h3>
<p class="text-gray-600 mb-4">Engaging youth in projects that address local challenges and improve communities.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- Impact Stories -->
<section id="impact" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Our Impact</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Real stories of transformation from the youth we've empowered through our programs.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden testimonial-card">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-16 h-16 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center">
<i class="fas fa-user text-blue-600 text-3xl"></i>
</div>
<div class="ml-4">
<h4 class="font-bold text-gray-800">Amina Yusuf</h4>
<p class="text-gray-600 text-sm">Entrepreneurship Program</p>
</div>
</div>
<p class="text-gray-700 mb-4 italic">"The business skills I learned from DOYF helped me start my fashion design business that now employs 3 other young people in my community."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden testimonial-card">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-16 h-16 rounded-full overflow-hidden bg-green-100 flex items-center justify-center">
<i class="fas fa-user text-green-600 text-3xl"></i>
</div>
<div class="ml-4">
<h4 class="font-bold text-gray-800">Emeka Okafor</h4>
<p class="text-gray-600 text-sm">Leadership Development</p>
</div>
</div>
<p class="text-gray-700 mb-4 italic">"The leadership training transformed my perspective. I now lead a community development initiative that has improved sanitation in our neighborhood."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden testimonial-card">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-16 h-16 rounded-full overflow-hidden bg-purple-100 flex items-center justify-center">
<i class="fas fa-user text-purple-600 text-3xl"></i>
</div>
<div class="ml-4">
<h4 class="font-bold text-gray-800">Chioma Adeleke</h4>
<p class="text-gray-600 text-sm">Social Advocacy</p>
</div>
</div>
<p class="text-gray-700 mb-4 italic">"DOYF's advocacy program gave me the platform to champion girls' education in my state. We've helped 50 girls return to school so far."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<button onclick="openDonationModal()" class="bg-blue-600 text-white font-bold py-3 px-8 rounded-full hover:bg-blue-700 transition donate-btn">
Support Our Work <i class="fas fa-hands-helping ml-2"></i>
</button>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeXYJKRYkXBqe4rmtGG5_SPNiif1fG_jSEa02p49YVpkeX-5w/viewform?usp=header" target="_blank" class="ml-4 membership-btn font-bold py-3 px-8 rounded-full hover:opacity-90 transition inline-block">
Join Our Community <i class="fas fa-user-plus ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Sponsors Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-2xl font-bold text-gray-800 mb-4">Our Trusted Partners</h2>
<p class="text-gray-600 max-w-2xl mx-auto">We collaborate with organizations that share our vision for youth empowerment.</p>
</div>
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
<div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4">
<i class="fas fa-building text-gray-500 text-3xl"></i>
</div>
<div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4">
<i class="fas fa-university text-gray-500 text-3xl"></i>
</div>
<div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4">
<i class="fas fa-globe-africa text-gray-500 text-3xl"></i>
</div>
<div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4">
<i class="fas fa-handshake text-gray-500 text-3xl"></i>
</div>
<div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4">
<i class="fas fa-leaf text-gray-500 text-3xl"></i>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="py-20 bg-blue-600 text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-6">Join Us in Making a Difference</h2>
<p class="text-xl mb-8 max-w-3xl mx-auto">Your support helps us reach more young people with life-changing opportunities. Every contribution makes an impact.</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
<button onclick="openDonationModal()" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition donate-btn">
Donate Now <i class="fas fa-donate ml-2"></i>
</button>
<a href="#contact" class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-blue-600 transition">
Become a Partner <i class="fas fa-handshake ml-2"></i>
</a>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeXYJKRYkXBqe4rmtGG5_SPNiif1fG_jSEa02p49YVpkeX-5w/viewform?usp=header" target="_blank" class="membership-btn font-bold py-3 px-8 rounded-full hover:opacity-90 transition">
Join as Member <i class="fas fa-user-plus ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
<h2 class="text-3xl font-bold text-gray-800 mb-6">Get In Touch</h2>
<p class="text-gray-600 mb-6">We'd love to hear from you! Whether you have questions about our programs, want to volunteer, or explore partnership opportunities.</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-map-marker-alt text-blue-600"></i>
</div>
<div>
<h4 class="font-bold text-gray-800">Our Office</h4>
<p class="text-gray-600">34 Magbon Segun Street off Dangote Refinery Road LFZ Ibeju Lekki, Lagos</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-green-100 p-3 rounded-full mr-4">
<i class="fas fa-envelope text-green-600"></i>
</div>
<div>
<h4 class="font-bold text-gray-800">Email Us</h4>
<p class="text-gray-600">doyf.ngo@gmail.com</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-phone-alt text-purple-600"></i>
</div>
<div>
<h4 class="font-bold text-gray-800">Call Us</h4>
<p class="text-gray-600">+234 705 994 1850</p>
<p class="text-gray-600">+234 705 035 3051</p>
<p class="text-gray-600">+234 706 540 1371</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="font-bold text-gray-800 mb-4">Follow Us</4>
<div class="flex space-x-4">
<a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500 transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700 transition">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="bg-blue-700 text-white p-3 rounded-full hover:bg-blue-800 transition">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="bg-red-600 text-white p-3 rounded-full hover:bg-red-700 transition">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
<div class="md:w-1/2">
<div class="bg-white rounded-xl shadow-md p-8">
<h3 class="text-2xl font-bold text-gray-800 mb-6">Send Us a Message</h3>
<div class="text-center py-8">
<i class="fas fa-envelope-open-text text-5xl text-blue-600 mb-4"></i>
<p class="text-gray-600 mb-6">We'd love to hear from you! Click the button below to send us a message through our contact form.</p>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfl4EUyPGMHZXcSJV2q9XfW9Sw37JJjoEEO4qP1HbFuG1inqw/viewform?usp=header" target="_blank" class="inline-block bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700 transition">
Go to Contact Form <i class="fas fa-external-link-alt ml-2"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-lg mr-2">DOYF</div>
<h3 class="text-lg font-bold">Dickson Okere Youths Foundation</h3>
</div>
<p class="text-gray-400 mb-4">Empowering young Nigerians through education, skills development, and leadership training.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li>
<li><a href="#programs" class="text-gray-400 hover:text-white transition">Our Programs</a></li>
<li><a href="#impact" class="text-gray-400 hover:text-white transition">Impact Stories</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Our Programs</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Entrepreneurial Skills</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Leadership Development</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Social Emancipation</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Youth Empowerment</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Advocacy Campaigns</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Newsletter</h4>
<p class="text-gray-400 mb-4">You will be automatically added to our newsletter after registering to receive updates on our programs and impact.</p>
<p class="text-gray-400 text-sm mt-4">We respect your privacy. Unsubscribe at any time.</p>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeXYJKRYkXBqe4rmtGG5_SPNiif1fG_jSEa02p49YVpkeX-5w/viewform?usp=header" target="_blank" class="mt-4 inline-block membership-btn text-white font-bold py-2 px-6 rounded-lg hover:opacity-90 transition">
Become a Member <i class="fas fa-user-plus ml-1"></i>
</a>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2023 Dickson Okere Youths Foundation. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white transition">Financial Reports</a>
</div>
</div>
</div>
</footer>
<!-- Floating Donate Button -->
<div class="fixed bottom-6 right-6 flex flex-col space-y-4">
<button onclick="openDonationModal()" class="bg-blue-600 text-white p-4 rounded-full shadow-xl hover:bg-blue-700 transition floating-btn">
<i class="fas fa-donate text-xl"></i>
</button>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeXYJKRYkXBqe4rmtGG5_SPNiif1fG_jSEa02p49YVpkeX-5w/viewform?usp=header" target="_blank" class="membership-btn text-white p-4 rounded-full shadow-xl hover:opacity-90 transition floating-btn">
<i class="fas fa-user-plus text-xl"></i>
</a>
</div>
<!-- Donation Modal -->
<div id="donation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 overflow-hidden">
<div class="bg-blue-600 text-white p-6">
<div class="flex justify-between items-center">
<h3 class="text-xl font-bold">Support Our Cause</h3>
<button onclick="closeDonationModal()" class="text-white hover:text-gray-200">
<i class="fas fa-times"></i>
</button>
</div>
<p class="mt-2 opacity-90">Your donation helps empower Nigerian youth</p>
</div>
<div class="p-6">
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Donation Amount (NGN)</label>
<div class="grid grid-cols-3 gap-3">
<button onclick="setDonationAmount(5000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦5,000</button>
<button onclick="setDonationAmount(10000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦10,000</button>
<button onclick="setDonationAmount(25000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦25,000</button>
<button onclick="setDonationAmount(50000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦50,000</button>
<button onclick="setDonationAmount(100000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦100,000</button>
<button onclick="setDonationAmount(0)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">Custom</button>
</div>
</div>
<div class="mb-6">
<label for="custom-amount" class="block text-gray-700 font-medium mb-2">Or Enter Custom Amount</label>
<div class="relative">
<span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">₦</span>
<input type="number" id="custom-amount" placeholder="Enter amount" class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Donation Type</label>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="donation-type" value="one-time" checked class="mr-2">
<span>One-time Donation</span>
</label>
<label class="flex items-center">
<input type="radio" name="donation-type" value="monthly" class="mr-2">
<span>Monthly Recurring Donation</span>
</label>
</div>
</div>
<div class="mb-6">
<label for="full-name" class="block text-gray-700 font-medium mb-2">Full Name</label>
<input type="text" id="full-name" placeholder="Your name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-6">
<label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
<input type="email" id="email" placeholder="Your email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<button onclick="processDonation()" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-blue-700 transition flex items-center justify-center">
Proceed to Payment <i class="fas fa-arrow-right ml-2"></i>
</button>
<div class="mt-4 text-center text-sm text-gray-500">
<p>Secure payment processed by Flutterwave</p>
<div class="flex justify-center mt-2">
<img src="https://flutterwave.com/images/logo/full.svg" alt="Flutterwave" class="h-6">
</div>
</div>
</div>
</div>
</div>
<!-- Success Modal -->
<div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 p-8 text-center">
<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-check text-green-600 text-3xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-800 mb-3">Thank You!</h3>
<p class="text-gray-600 mb-6">Your donation has been successfully processed. You'll receive a receipt via email shortly.</p>
<button onclick="closeSuccessModal()" class="bg-blue-600 text-white font-bold py-2 px-6 rounded-lg hover:bg-blue-700 transition">
Close
</button>
</div>
</div>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Donation modal functions
function openDonationModal() {
document.getElementById('donation-modal').classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeDonationModal() {
document.getElementById('donation-modal').classList.add('hidden');
document.body.style.overflow = 'auto';
}
function setDonationAmount(amount) {
const customAmountInput = document.getElementById('custom-amount');
if (amount > 0) {
customAmountInput.value = amount;
} else {
customAmountInput.value = '';
customAmountInput.focus();
}
// Highlight selected option
const options = document.querySelectorAll('.donation-option');
options.forEach(option => {
if (parseInt(option.textContent.replace(/[^0-9]/g, '')) === amount ||
(amount === 0 && option.textContent.trim() === 'Custom')) {
option.classList.add('bg-blue-100', 'border-blue-500');
option.classList.remove('bg-gray-100', 'border-gray-300');
} else {
option.classList.remove('bg-blue-100', 'border-blue-500');
option.classList.add('bg-gray-100', 'border-gray-300');
}
});
}
function processDonation() {
const amount = document.getElementById('custom-amount').value;
const name = document.getElementById('full-name').value;
const email = document.getElementById('email').value;
const donationType = document.querySelector('input[name="donation-type"]:checked').value;
if (!amount || amount <= 0) {
alert('Please enter a valid donation amount');
return;
}
if (!name || !email) {
alert('Please fill in your name and email');
return;
}
// Process payment with Flutterwave
makeFlutterwavePayment(amount, name, email, donationType);
}
function makeFlutterwavePayment(amount, name, email, donationType) {
FlutterwaveCheckout({
public_key: "FLWPUBK_TEST-XXXXXXXXXXXXXXXX-X", // Replace with your Flutterwave public key
tx_ref: "DOYF_" + Date.now(),
amount: amount,
currency: "NGN",
payment_options: "card, banktransfer, ussd",
customer: {
email: email,
name: name
},
customizations: {
title: "Dickson Okere Youths Foundation",
description: donationType === 'one-time' ? 'One-time Donation' : 'Monthly Recurring Donation',
logo: "logo.png" // Replace with your logo URL
},
callback: function(response) {
// Handle successful payment
console.log(response);
closeDonationModal();
showSuccessModal();
// Here you would typically send the transaction details to your server
// for verification and record keeping
},
onclose: function() {
// Handle when modal is closed
console.log("Payment modal closed");
}
});
}
function showSuccessModal() {
document.getElementById('success-modal').classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeSuccessModal() {
document.getElementById('success-modal').classList.add('hidden');
document.body.style.overflow = 'auto';
}
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// Close mobile menu if open
document.getElementById('mobile-menu').classList.add('hidden');
}
});
});
// Image Slider Functionality
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.slider-dot');
const totalSlides = slides.length;
let slideInterval;
function updateSlider() {
const slider = document.querySelector('.slider');
slider.style.transform = `translateX(-${currentSlide * 100}%)`;
// Update dots
dots.forEach((dot, index) => {
if (index === currentSlide) {
dot.classList.add('active');
} else {
dot.classList.remove('active');
}
});
}
function nextSlide() {
currentSlide = (currentSlide + 1) % totalSlides;
updateSlider();
resetInterval();
}
function prevSlide() {
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
updateSlider();
resetInterval();
}
function goToSlide(index) {
currentSlide = index;
updateSlider();
resetInterval();
}
function resetInterval() {
clearInterval(slideInterval);
slideInterval = setInterval(nextSlide, 5000);
}
// Initialize slider
function initSlider() {
updateSlider();
slideInterval = setInterval(nextSlide, 5000);
}
// Start slider when page loads
window.addEventListener('load', initSlider);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://huggingface.co/proxy/enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://huggingface.co/proxy/enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://huggingface.co/proxy/enzostvs-deepsite.hf.space?remix=Chidex12/doyf3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>
|