swb-website/work.html

257 lines
15 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-translate="workTitle">Our Work - Schools Without Borders</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<nav class="navbar">
<div class="logo">
<img src="images/logo.png" alt="Schools Without Borders Logo">
<span data-translate="organizationName">Schools Without Borders</span>
</div>
<ul class="nav-links">
<li><a href="index.html" data-translate="home">Home</a></li>
<li><a href="about.html" data-translate="aboutUs">About Us</a></li>
<li><a href="work.html" class="active" data-translate="ourWork">Our Work</a></li>
<li><a href="support.html" data-translate="supportUs">Support Us</a></li>
<li><a href="contact.html" data-translate="contact">Contact</a></li>
</ul>
<div class="language-toggle" onclick="toggleLanguage()">
<i class="fas fa-globe"></i>
<span id="langText">EN / عربي</span>
</div>
<div class="mobile-menu">
<i class="fas fa-bars"></i>
</div>
</nav>
</div>
</header>
<!-- Page Banner -->
<section class="page-banner" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/banner-work.jpg') center/cover no-repeat;">
<div class="container">
<h1 data-translate="workTitle">Our Work</h1>
<p data-translate="workSubtitle">Turning Challenges into Opportunities</p>
</div>
</section>
<!-- Achievements Section -->
<section class="achievements">
<div class="container">
<h2 class="text-center" data-translate="achievementsTitle">What We've Achieved So Far</h2>
<div class="achievements-content">
<p data-translate="achievementsText">At Schools Without Borders, we are committed to addressing the educational crises faced by children in Gaza. With innovation, resilience, and a deep commitment to change, we have developed impactful programs that bring education and hope to the most vulnerable while addressing family needs across all sectors to create holistic family support.</p>
</div>
<div class="achievements-stats">
<div class="stat-box">
<div class="stat-number" data-translate="childrenReached">1,500+</div>
<p data-translate="childrenReachedText">Children reached with educational opportunities</p>
</div>
<div class="stat-box">
<div class="stat-number" data-translate="campsSupported">32</div>
<p data-translate="campsSupportedText">Camps receiving educational support</p>
</div>
<div class="stat-box">
<div class="stat-number" data-translate="centersEstablished">10</div>
<p data-translate="centersEstablishedText">Educational centers established</p>
</div>
<div class="stat-box">
<div class="stat-number" data-translate="teachersTrained">28</div>
<p data-translate="teachersTrainedText">Dedicated teachers trained</p>
</div>
</div>
</div>
</section>
<!-- Programs Section -->
<section class="programs">
<div class="container">
<div class="programs-intro">
<h2 data-translate="programsTitle">Our Innovative Programs</h2>
<p data-translate="programsIntro">Through creative and adaptive educational solutions, we bring learning opportunities to children even in the most challenging environments.</p>
</div>
<div class="program-grid">
<div class="program-card">
<div class="program-image">
<img src="images/mobile-school.jpg" alt="Mobile Schools Program">
</div>
<div class="program-content">
<h3 data-translate="mobileSchools.title">Mobile Schools</h3>
<p data-translate="mobileSchools.description">Our mobile classrooms bring education directly to children in displacement camps, temporary shelters, and areas where school buildings have been damaged. These adaptable spaces ensure learning continues regardless of circumstances.</p>
</div>
</div>
<div class="program-card">
<div class="program-image">
<img src="images/memory-revival.jpg" alt="Memory Revival Program">
</div>
<div class="program-content">
<h3 data-translate="memoryRevival.title">Memory Revival</h3>
<p data-translate="memoryRevival.description">For children who have missed extended periods of schooling, our Memory Revival program provides targeted interventions to help rebuild academic foundations and restore confidence in previously learned skills.</p>
</div>
</div>
<div class="program-card">
<div class="program-image">
<img src="images/educational-drama.jpg" alt="Educational Drama Program">
</div>
<div class="program-content">
<h3 data-translate="educationalDrama.title">Educational Drama</h3>
<p data-translate="educationalDrama.description">Using theater, arts, and creative expression as tools for learning and healing, our Educational Drama program helps children process trauma while developing academic and emotional skills in an engaging way.</p>
</div>
</div>
<div class="program-card">
<div class="program-image">
<img src="images/mobile-kindergarten.jpg" alt="Mobile Kindergarten Program">
</div>
<div class="program-content">
<h3 data-translate="mobileKindergarten.title">Mobile Kindergarten</h3>
<p data-translate="mobileKindergarten.description">Our early childhood education program brings structured play-based learning to the youngest children affected by conflict, creating nurturing environments for developing foundational skills.</p>
</div>
</div>
<div class="program-card">
<div class="program-image">
<img src="images/hospital-learning.jpg" alt="Hospital-Based Learning Program">
</div>
<div class="program-content">
<h3 data-translate="hospitalLearning.title">Hospital-Based Learning</h3>
<p data-translate="hospitalLearning.description">For children receiving medical treatment, our Hospital-Based Learning program brings educational activities directly to bedsides, ensuring hospitalization doesn't interrupt their learning journey.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section class="gallery">
<div class="container">
<div class="gallery-intro">
<h2 data-translate="galleryTitle">Our Impact in Pictures</h2>
<p data-translate="gallerySubtitle">Images that tell the story of our work and the resilience of the children we serve.</p>
</div>
<div class="gallery-items">
<div class="gallery-item">
<img src="images/gallery-1.jpg" alt="Children in a learning circle">
</div>
<div class="gallery-item">
<img src="images/gallery-2.jpg" alt="Mobile classroom in action">
</div>
<div class="gallery-item">
<img src="images/gallery-3.jpg" alt="Teacher with students">
</div>
<div class="gallery-item">
<img src="images/gallery-4.jpg" alt="Art activities with children">
</div>
<div class="gallery-item">
<img src="images/gallery-5.jpg" alt="Outdoor learning space">
</div>
<div class="gallery-item">
<img src="images/gallery-6.jpg" alt="Children reading books">
</div>
</div>
</div>
</section>
<!-- Impact Stories Section -->
<section class="impact-stories">
<div class="container">
<div class="stories-intro">
<h2 data-translate="storiesTitle">Stories of Impact</h2>
<p data-translate="storiesSubtitle">Real stories of children whose lives have been transformed through education</p>
</div>
<div class="stories-container">
<div class="story-card">
<div class="story-header">
<h3 data-translate="amiraStory.title">Amira's Story</h3>
<p data-translate="amiraStory.subtitle">12-year-old girl from Rafah</p>
</div>
<div class="story-content">
<p data-translate="amiraStory.text">After being out of school for over a year, Amira joined our mobile classroom.
<div class="story-quote" data-translate="amiraStory.quote">"I thought I had forgotten everything. Now I remember not just what I learned before, but I'm learning new things too. I want to be a teacher someday."</div>
<p data-translate="amiraStory.conclusion">Today, Amira leads creative writing activities for younger children.</p>
</div>
</div>
<div class="story-card">
<div class="story-header">
<h3 data-translate="yassinStory.title">Yassin's Story</h3>
<p data-translate="yassinStory.subtitle">9-year-old boy in hospital recovery</p>
</div>
<div class="story-content">
<p data-translate="yassinStory.text">After being injured and spending three months in hospital, Yassin was isolated from his peers and education.>
<div class="story-quote" data-translate="yassinStory.quote">"The teachers make me forget I'm in hospital. When we have our lessons, I feel like I'm back at school with my friends."</div>
<p data-translate="yassinStory.conclusion">Upon discharge, Yassin seamlessly transitioned to our mobile classroom, where he continues to thrive academically despite his physical challenges.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Future Aspirations Section -->
<section class="future-aspirations">
<div class="container">
<h2 data-translate="futureTitle">Looking to the Future</h2>
<p data-translate="futureText">As we build on our current work, we aim to expand our reach to 5,000 children by 2030, develop sustainable learning models that can be replicated globally, establish permanent learning centers, and enhance our psychosocial support services for children and families affected by conflict.</p>
<a href="about.html#vision" class="btn btn-primary" data-translate="learnMoreButton">Learn About Our Vision</a>
</div>
</section>
<!-- Get Involved Section -->
<section class="get-involved">
<div class="container">
<h2 data-translate="involvedTitle">Be Part of Our Mission</h2>
<p data-translate="involvedText">There are many ways you can contribute to bringing education to children in crisis-affected areas. Whether through volunteering, donating, spreading awareness, or forming partnerships, your support makes a difference.</p>
<div class="cta-buttons">
<a href="support.html" class="btn btn-primary" data-translate="supportButton">Support Us</a>
<a href="contact.html" class="btn btn-secondary" data-translate="contactButton">Contact Us</a>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3 data-translate="organizationName">Schools Without Borders</h3>
<p data-translate="footerAbout">A non-profit organization supporting education and providing services to students affected by wars and conflicts.</p>
<div class="social-links">
<a href="https://www.tiktok.com/@tiktok.com/@schools_without_borders"><i class="fab fa-tiktok"></i></a>
<a href="https://x.com/Schools_W_B"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/schools.without.borders/"><i class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/schools-w-b-b62342311"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="footer-section">
<h3 data-translate="quickLinks">Quick Links</h3>
<ul class="footer-links">
<li><a href="index.html" data-translate="home">Home</a></li>
<li><a href="about.html" data-translate="aboutUs">About Us</a></li>
<li><a href="work.html" data-translate="ourWork">Our Work</a></li>
<li><a href="support.html" data-translate="supportUs">Support Us</a></li>
<li><a href="contact.html" data-translate="contact">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h3 data-translate="contactUs">Contact Us</h3>
<p><i class="fas fa-envelope"></i> info@swb-project.org</p>
<p><i class="fas fa-phone"></i> +972 111 111 111</p>
</div>
</div>
<div class="copyright" data-translate="copyright">
&copy; 2025 Schools Without Borders. All Rights Reserved.
</div>
</div>
</footer>
<script src="js/translations/home-translations.js"></script>
<script src="js/translations/about-translations.js"></script>
<script src="js/translations/work-translations.js"></script>
<script src="js/translations/support-translations.js"></script>
<script src="js/translations/contact-translations.js"></script>
<script src="js/translations.js"></script>
</body>
</html>