Skip to content

feat: add about, terms, and feedback pages #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ghanshyam2005singh wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: add about, terms, and feedback pages #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6b0be5a
feat: add about, terms, and feedback pages
ghanshyam2005singh Jun 21, 2026
dc4af65
feat: add about, terms, and feedback pages
ghanshyam2005singh Jun 21, 2026
a01a483
Resolve merge conflict with base template
ghanshyam2005singh Jul 6, 2026
576e33c
Resolve merge conflict with base template
ghanshyam2005singh Jul 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
271 changes: 241 additions & 30 deletions public/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,250 @@
{% block meta_description %}Welcome to Alpha One Labs, your hub for hands-on learning and teaching experiences in tech, science, and engineering.{% endblock %}
{% block content %}
<main class="flex-1 w-full max-w-[90rem] mx-auto mt-6 px-4 md:px-6">
<div class="flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-6">
<div class="space-y-4">
<div class="about-section bg-white dark:bg-gray-800 p-8 rounded-lg border border-gray-200 dark:border-gray-700">
<h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">About Alpha One Labs</h2>
<p class="text-gray-700 dark:text-gray-300 mb-6">
Welcome to <span class="about-highlight font-semibold text-indigo-600 dark:text-indigo-400">Alpha One Labs</span>, your hub for hands-on learning
and teaching experiences in tech, science, and engineering. Since our founding in 2009,
we've grown from a small community hackerspace into a dynamic organization committed
to inspiring creativity, experimentation, and collaboration. Now, in 2025, we've fully
evolved into an education platform, providing engaging and cutting-edge STEM experiences
for learners everywhere.

<div class="max-w-[90rem] mx-auto px-4 md:px-6 py-16 space-y-20">

<!-- Mission statement -->
<section class="max-w-4xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-black leading-tight mb-6">
About Alpha One Labs</span>
</h1>
<p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed">
Welcome to Alpha One Labs, your hub for hands-on learning and teaching experiences in tech, science, and engineering.
Since our founding in 2009, we've grown from a small community hackerspace into a dynamic organization committed to
inspiring creativity, experimentation, and collaboration. Now, in 2025, we've fully evolved into an education platform,
providing engaging and cutting-edge STEM experiences for learners everywhere.
</p>
<div class="mt-4">
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Our Journey</h3>
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
<li><strong class="text-gray-900 dark:text-gray-100">2009:</strong> Founded as a small hackerspace in Brooklyn, fostering a community-driven environment for exploration.</li>
<li><strong class="text-gray-900 dark:text-gray-100">2010:</strong> Hosted our first workshops on 3D printing and robotics, igniting local interest in emerging technologies.</li>
<li><strong class="text-gray-900 dark:text-gray-100">2012:</strong> Expanded lab facilities and introduced collaborative community projects, strengthening our member network.</li>
<li><strong class="text-gray-900 dark:text-gray-100">2015:</strong> Formed partnerships with local schools to bring hands-on STEM experiences to classrooms.</li>
<li><strong class="text-gray-900 dark:text-gray-100">2018:</strong> Launched a mentorship program connecting experienced professionals with aspiring innovators.</li>
<li><strong class="text-gray-900 dark:text-gray-100">2020:</strong> Adapted to global challenges by shifting to virtual learning initiatives.</li>
<li><strong class="text-gray-900 dark:text-gray-100">2023:</strong> Grew internationally through new educational partnerships and outreach programs.</li>
<li><strong class="text-gray-900 dark:text-gray-100">2025:</strong> Transitioned into a full-fledged education platform, continuing to empower learners with hands-on innovation.</li>
</ul>
</section>

<!-- Stats -->
<section>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="bg-gradient-to-br from-teal-500 to-cyan-600 rounded-2xl p-6 text-white text-center shadow-lg">
<div class="text-4xl font-extrabold mb-1">2009</div>
<div class="text-sm text-teal-100">Year Founded</div>
</div>
<div class="bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl p-6 text-white text-center shadow-lg">
<div class="text-4xl font-extrabold mb-1">16+</div>
<div class="text-sm text-orange-100">Years of Innovation</div>
</div>
<div class="bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl p-6 text-white text-center shadow-lg">
<div class="text-4xl font-extrabold mb-1">Global</div>
<div class="text-sm text-blue-100">Reach &amp; Partnerships</div>
</div>
<div class="bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl p-6 text-white text-center shadow-lg">
<div class="text-4xl font-extrabold mb-1">STEM</div>
<div class="text-sm text-purple-100">Focused Platform</div>
</div>
</div>
<div class="about-icons flex space-x-4 mt-6">
<i class="fas fa-flask text-indigo-600 dark:text-indigo-400 text-2xl" title="Experimentation"></i>
<i class="fas fa-lightbulb text-yellow-500 dark:text-yellow-400 text-2xl" title="Ideas"></i>
<i class="fas fa-rocket text-red-500 dark:text-red-400 text-2xl" title="Innovation"></i>
<i class="fas fa-chalkboard-teacher text-green-500 dark:text-green-400 text-2xl" title="Teaching"></i>
</section>

<!-- Timeline -->
<section>
<div class="relative flex py-5 items-center mb-12">
<div class="flex-grow border-t-2 border-teal-200 dark:border-teal-800"></div>
<div class="flex-shrink mx-4 flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-teal-400 to-cyan-500 flex items-center justify-center shadow-lg">
<i class="fas fa-timeline text-white text-lg"></i>
</div>
<span class="text-2xl font-extrabold bg-gradient-to-r from-teal-600 to-cyan-600 dark:from-teal-400 dark:to-cyan-400 bg-clip-text text-transparent">Our Journey</span>
</div>
<div class="flex-grow border-t-2 border-teal-200 dark:border-teal-800"></div>
</div>
</div>
</div>

<div class="max-w-3xl mx-auto">
<div class="space-y-4">

<!-- 2009 -->
<div class="timeline-item relative flex gap-6 pb-4">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-teal-500 to-cyan-600 flex items-center justify-center shadow-lg z-10">
<i class="fas fa-flag text-white text-sm"></i>
</div>
<div class="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-5 shadow-md hover:shadow-lg transition-shadow">
<div class="flex items-center gap-3 mb-2">
<span class="px-3 py-1 rounded-full text-xs font-bold bg-teal-100 dark:bg-teal-900 text-teal-700 dark:text-teal-300">2009</span>
<h3 class="font-bold text-gray-800 dark:text-gray-200">Foundation</h3>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
Founded as a small hackerspace in Brooklyn, fostering a community-driven environment for exploration.
</p>
</div>
</div>

<!-- 2010 -->
<div class="timeline-item relative flex gap-6 pb-4">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center shadow-lg z-10">
<i class="fas fa-print text-white text-sm"></i>
</div>
<div class="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-5 shadow-md hover:shadow-lg transition-shadow">
<div class="flex items-center gap-3 mb-2">
<span class="px-3 py-1 rounded-full text-xs font-bold bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300">2010</span>
<h3 class="font-bold text-gray-800 dark:text-gray-200">First Workshops</h3>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
Hosted our first workshops on 3D printing and robotics, igniting local interest in emerging technologies.
</p>
</div>
</div>

<!-- 2012 -->
<div class="timeline-item relative flex gap-6 pb-4">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-lg z-10">
<i class="fas fa-expand text-white text-sm"></i>
</div>
<div class="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-5 shadow-md hover:shadow-lg transition-shadow">
<div class="flex items-center gap-3 mb-2">
<span class="px-3 py-1 rounded-full text-xs font-bold bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300">2012</span>
<h3 class="font-bold text-gray-800 dark:text-gray-200">Lab Expansion</h3>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
Expanded lab facilities and introduced collaborative community projects, strengthening our member network.
</p>
</div>
</div>

<!-- 2015 -->
<div class="timeline-item relative flex gap-6 pb-4">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center shadow-lg z-10">
<i class="fas fa-school text-white text-sm"></i>
</div>
<div class="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-5 shadow-md hover:shadow-lg transition-shadow">
<div class="flex items-center gap-3 mb-2">
<span class="px-3 py-1 rounded-full text-xs font-bold bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300">2015</span>
<h3 class="font-bold text-gray-800 dark:text-gray-200">School Partnerships</h3>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
Formed partnerships with local schools to bring hands-on STEM experiences to classrooms.
</p>
</div>
</div>

<!-- 2018 -->
<div class="timeline-item relative flex gap-6 pb-4">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center shadow-lg z-10">
<i class="fas fa-handshake text-white text-sm"></i>
</div>
<div class="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-5 shadow-md hover:shadow-lg transition-shadow">
<div class="flex items-center gap-3 mb-2">
<span class="px-3 py-1 rounded-full text-xs font-bold bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300">2018</span>
<h3 class="font-bold text-gray-800 dark:text-gray-200">Mentorship Program</h3>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
Launched a mentorship program connecting experienced professionals with aspiring innovators.
</p>
</div>
</div>

<!-- 2020 -->
<div class="timeline-item relative flex gap-6 pb-4">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center shadow-lg z-10">
<i class="fas fa-laptop text-white text-sm"></i>
</div>
<div class="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-5 shadow-md hover:shadow-lg transition-shadow">
<div class="flex items-center gap-3 mb-2">
<span class="px-3 py-1 rounded-full text-xs font-bold bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300">2020</span>
<h3 class="font-bold text-gray-800 dark:text-gray-200">Virtual Learning</h3>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
Adapted to global challenges by shifting to virtual learning initiatives.
</p>
</div>
</div>

<!-- 2023 -->
<div class="timeline-item relative flex gap-6 pb-4">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-lg z-10">
<i class="fas fa-globe text-white text-sm"></i>
</div>
<div class="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-5 shadow-md hover:shadow-lg transition-shadow">
<div class="flex items-center gap-3 mb-2">
<span class="px-3 py-1 rounded-full text-xs font-bold bg-cyan-100 dark:bg-cyan-900 text-cyan-700 dark:text-cyan-300">2023</span>
<h3 class="font-bold text-gray-800 dark:text-gray-200">Global Expansion</h3>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
Grew internationally through new educational partnerships and outreach programs.
</p>
</div>
</div>

<!-- 2025 -->
<div class="relative flex gap-6">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-teal-400 to-cyan-500 flex items-center justify-center shadow-lg ring-4 ring-teal-200 dark:ring-teal-800 z-10">
<i class="fas fa-rocket text-white text-sm"></i>
</div>
<div class="flex-1 bg-gradient-to-br from-teal-50 to-cyan-50 dark:from-teal-900/40 dark:to-cyan-900/40 border-2 border-teal-300 dark:border-teal-600 rounded-2xl p-5 shadow-lg">
<div class="flex items-center gap-3 mb-2">
<span class="px-3 py-1 rounded-full text-xs font-bold bg-teal-500 text-white">2025</span>
<h3 class="font-bold text-gray-800 dark:text-gray-200">Full Education Platform</h3>
<span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300">Now</span>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
Transitioned into a full-fledged education platform, continuing to empower learners with hands-on innovation.
</p>
</div>
</div>

</div>
</div>
</section>

<!-- Values -->
<section>
<div class="relative flex py-5 items-center mb-12">
<div class="flex-grow border-t-2 border-teal-200 dark:border-teal-800"></div>
<div class="flex-shrink mx-4 flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-teal-400 to-cyan-500 flex items-center justify-center shadow-lg">
<i class="fas fa-heart text-white text-lg"></i>
</div>
<span class="text-2xl font-extrabold bg-gradient-to-r from-teal-600 to-cyan-600 dark:from-teal-400 dark:to-cyan-400 bg-clip-text text-transparent">What We Stand For</span>
</div>
<div class="flex-grow border-t-2 border-teal-200 dark:border-teal-800"></div>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="group bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-6 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 text-center">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-teal-400 to-cyan-500 flex items-center justify-center shadow-lg mx-auto mb-4 group-hover:scale-110 transition-transform">
<i class="fas fa-hands-holding text-white text-xl"></i>
</div>
<h3 class="text-lg font-bold mb-2 text-gray-800 dark:text-gray-200">Hands-On Learning</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
We believe in learning by doing. Every concept is best understood through experimentation and real-world application.
</p>
</div>

<div class="group bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-6 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 text-center">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-400 to-red-500 flex items-center justify-center shadow-lg mx-auto mb-4 group-hover:scale-110 transition-transform">
<i class="fas fa-users text-white text-xl"></i>
</div>
<h3 class="text-lg font-bold mb-2 text-gray-800 dark:text-gray-200">Community First</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
Our community of learners, teachers, and mentors is what makes Alpha One Labs special. Together, we grow faster.
</p>
</div>

<div class="group bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-6 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 text-center">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center shadow-lg mx-auto mb-4 group-hover:scale-110 transition-transform">
<i class="fas fa-code-branch text-white text-xl"></i>
</div>
<h3 class="text-lg font-bold mb-2 text-gray-800 dark:text-gray-200">Open Source</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
We build in public and believe education should be accessible to everyone. Knowledge is meant to be shared freely.
</p>
</div>
</div>
</section>

<!-- CTA -->
<section class="bg-gradient-to-br from-teal-600 to-cyan-600 dark:from-teal-800 dark:to-cyan-800 rounded-3xl p-10 text-center text-white shadow-2xl">
<h2 class="text-3xl font-extrabold mb-4">Ready to Join Our Community?</h2>
<p class="text-teal-100 mb-8 max-w-xl mx-auto">Whether you want to learn new skills or share your expertise, there's a place for you at Alpha One Labs.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/dashboard.html" class="px-8 py-4 bg-white text-teal-700 font-bold rounded-xl shadow-lg hover:shadow-2xl hover:-translate-y-1 transition-all flex items-center justify-center gap-2">
<i class="fas fa-graduation-cap"></i> Start Learning
</a>
<a href="/teach.html" class="px-8 py-4 bg-transparent border-2 border-white text-white font-bold rounded-xl hover:bg-white/10 transition-all flex items-center justify-center gap-2">
<i class="fas fa-chalkboard-user"></i> Start Teaching
</a>
</div>
</main>
{% endblock %}
Loading
Loading