Skip to content

Adding FAQ and changes themepage for front page #10

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

Merged
akshay9085 merged 1 commit into from
Jan 23, 2026
Merged

Adding FAQ and changes themepage for front page #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 0 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/components/ContactUs.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import SectionTitle from "./SectionTitle.astro";
---

<section id="contact" class="py-12">
<section id="contact" class="py-12 scroll-mt-18 scroll-pt-18">
<div class="max-w-6xl mx-auto px-6">
<SectionTitle title="Contact Us" />
<div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm text-center">
Expand Down
86 changes: 51 additions & 35 deletions src/components/Faq.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import SectionTitle from "./SectionTitle.astro";
import { Fragment } from "astro/jsx-runtime";


const faqs = [
{
question: "What are the themes of the hackathon?",
Expand Down Expand Up @@ -56,52 +57,67 @@ const faqs = [
question: "Who should be contacted for queries?",
answer:
"Participants are advised to refer to the official contact details provided on the FOSSEE website for any queries related to registration or participation. Email ID - contact-oshw@fossee.in"
}

},
{
question: "Will FOSSEE or IIT Bombay provide financial support for hardware or project expenses?",
answer: `No. Participants are required to bear all expenses related to their project development, including the cost of hardware components, sensors, modules, tools, fabrication, internet access, or any other resources used during the hackathon.

FOSSEE, IIT Bombay will not provide any financial reimbursement or funding for project materials or associated costs. Participants are advised to plan their projects accordingly.`
},
];
---

<!-- <section id="faq" class="py-12">
<div class="max-w-6xl mx-auto px-6">
<SectionTitle id="faqTitle" title="FAQ" />
<div class="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
<div class="space-y-6 text-sm md:text-md leading-7 text-slate-700">
{faqs.map((item) => (
<div>
<p class="font-semibold text-slate-900">{item.question}</p>
<p class="mt-2">{item.answer}</p>
</div>
))}
</div>
</div>
</div>
</section> -->
<section id="faq" class="py-12">
<!-- // <section id="faq" class="py-12">
// <div class="max-w-6xl mx-auto px-6">
// <SectionTitle id="faqTitle" title="FAQ" />
// <div class="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
// <div class="space-y-6 text-sm md:text-md leading-7 text-slate-700">
// {faqs.map((item) => ( -->
<!-- // <div>
// <p class="font-semibold text-slate-900">{item.question}</p>
// <p class="mt-2">{item.answer}</p>
// </div>
// ))}
// </div>
// </div>
// </div>
// </section> -->

<section id="faq" class="py-12 scroll-pt-18 scroll-mt-18">
<div class="max-w-6xl mx-auto px-6">
<SectionTitle title="FAQ" />

<div class="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
<ol class="space-y-6 list-decimal pl-5 text-black leading-7">
<ol class="space-y-4 list-decimal pl-5 text-black leading-7">
{faqs.map((item, index) => (
<li key={index}>
<p class="font-semibold text-black">
{item.question}
</p>
<li>
<details class="group border-b border-slate-200 pb-3">
<summary class="cursor-pointer font-semibold flex justify-between items-center">
{item.question}
<span class="transition-transform group-open:rotate-180">
▼
</span>
</summary>

{item.answer && (
<p class="mt-2">{item.answer}</p>
)}
<div class="mt-3 pl-2">
{item.answer && (
<p class="mb-2">{item.answer}</p>
)}

{item.points && (
<ul class="list-disc pl-6 mt-2">
{item.points.map((point, i) => (
<li key={i}>{point}</li>
))}
</ul>
)}
{item.points && (
<ul class="list-disc pl-6 mb-2">
{item.points.map((point) => (
<li>{point}</li>
))}
</ul>
)}

{item.note && (
<p class="mt-2">{item.note}</p>
)}
{item.note && (
<p class="text-sm text-slate-600">{item.note}</p>
)}
</div>
</details>
</li>
))}
</ol>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Navbar.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const mobileLinkClass =
const navItems = [
{ href: "/", label: "Home" },
{ href: "/#about", label: "About" },
{ href: "/theme", label: "Themes" },
{ href: "/#themes", label: "Themes" },
{ href: "/#faq", label: "FAQ" },
{ href: "/#contact", label: "Contact Us" },

Expand Down
9 changes: 7 additions & 2 deletions src/components/ThemeCards.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import healthcareImage from "../images/healthcare_2966486.png";
import energyImage from "../images/eco-friendly_16517716.png";
import cityImage from "../images/smart-city_3253488.png";
import SectionTitle from "./SectionTitle.astro";

const themes = [
{
Expand Down Expand Up @@ -44,8 +45,10 @@ const themes = [
},
];
---

<div class="grid gap-6 md:grid-cols-3">
<section id="themes" class="py-12 scroll-pt-18 scroll-mt-18">
<div class="max-w-6xl mx-auto px-6">
<SectionTitle id="themesTitle" title="HACKATHON THEMES & SDG ALIGNMENT" />
<div id="theme" class="grid gap-6 md:grid-cols-3 pt-6 mt-6">
{themes.map((t) => (
<div class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
<div class="mb-3 flex justify-center">
Expand Down Expand Up @@ -76,3 +79,5 @@ const themes = [
</div>
))}
</div>
</div>
</section>
89 changes: 86 additions & 3 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,61 @@ import WhatYouWillDo from "../components/WhatYouWillDo.astro";
import Register from "../components/Register.astro";
import Rules from "../components/Rules.astro";
import Faq from "../components/Faq.astro";
import ThemeCards from "../components/ThemeCards.astro";
import ContactUs from "../components/ContactUs.astro";
import healthcareImage from "../images/healthcare_2966486.png";
import energyImage from "../images/eco-friendly_16517716.png";
import cityImage from "../images/smart-city_3253488.png";


const themes = [
{
title: "Healthcare & Assistive Devices",
image: healthcareImage.src,
imageAlt: "Healthcare and assistive devices",
subtitle: "Affordable • Accessible • Inclusive",
sdgs: ["SDG 3 – Good Health & Well-Being", "SDG 10 – Reduced Inequalities"],
bullets: [
"Low-cost diagnostics for primary healthcare",
"Wearables for community health monitoring",
"Assistive devices for elderly & persons with disabilities",
"Rural & remote healthcare tools",
],
},
{
title: "Energy & Sustainability",
image: energyImage.src,
imageAlt: "Energy and sustainability",
subtitle: "Efficient • Clean • Resilient",
sdgs: ["SDG 7 – Affordable & Clean Energy", "SDG 13 – Climate Action"],
bullets: [
"Renewable energy integration & monitoring",
"Energy audit systems & smart meters",
"Power quality & efficient energy usage solutions",
],
},
{
title: "Smart Campus / Smart City",
image: cityImage.src,
imageAlt: "Smart campus and smart city",
subtitle: "Safe • Sustainable • People-Centric",
sdgs: ["SDG 11 – Sustainable Cities & Communities", "SDG 9 – Industry, Innovation & Infrastructure"],
bullets: [
"Air Quality (AQI) & environmental monitoring",
"Energy management for campuses & public buildings",
"Safety systems with privacy-first design",
"Accessibility tools for inclusive infrastructure",
],
},
];
---

<Layout navPosition="sticky" headerOverlay>


<main>
<Hero />
<section id="about" class="py-12 pt-18">
<section id="about" class="py-12 pt-18 scroll-mt-18 scroll-pt-18">
<div class="max-w-6xl mx-auto px-6">
<SectionTitle id="abouttitle" title="OPEN SOURCE • REAL HARDWARE • REAL IMPACT" />
<div class=" rounded-3xl bg-linear-to-b from-slate-50 to-white p-8 ring-1 ring-slate-200">
Expand All @@ -37,7 +82,43 @@ import ContactUs from "../components/ContactUs.astro";

</div>
</section>
<section class="py-12">

<ThemeCards />
<br />
<div id="focus" class="max-w-6xl mx-auto px-6">
<SectionTitle id="focusTitle" title="INDIA & GLOBAL SUSTAINABILITY FOCUS" />
<br />
<div class="rounded-2xl max-w-xl mx-auto border border-slate-200 bg-white p-8 shadow-sm">
<p class="text-lg font-semibold text-slate-800">The hackathon supports:</p>
<ul class="mt-4 space-y-2 text-sm md:text-md">
<li class="flex items-start gap-2">
<span class="mt-2 h-2 w-2 rounded-full bg-sky-500"></span>
<span>Sustainable Development Goals (SDGs)</span>
</li>
<li class="flex items-start gap-2">
<span class="mt-2 h-2 w-2 rounded-full bg-sky-500"></span>
<span>Climate Action &amp; Adaptation</span>
</li>
<li class="flex items-start gap-2">
<span class="mt-2 h-2 w-2 rounded-full bg-sky-500"></span>
<span>Digital Public Infrastructure</span>
</li>
<li class="flex items-start gap-2">
<span class="mt-2 h-2 w-2 rounded-full bg-sky-500"></span>
<span>Affordable &amp; Open Innovation</span>
</li>
</ul>
<p class="mt-6 text-sm md:text-md leading-7 ">
Participants are encouraged to build deploy-able, scalable, and reproducible solutions
suitable for real-world conditions.
</p>
</div>
</div>
</main>



<section class="py-12 scroll-mt-18 scroll-pt-18">
<div class="max-w-6xl mx-auto px-6">
<div class="grid gap-10 md:grid-cols-2">
<div id="participate">
Expand Down Expand Up @@ -72,6 +153,7 @@ Maximum 5 participants per team</span>
</ul>
</div>
</div>

<div id="what">
<SectionTitle id="stepsTitle" title="What You Will Do" />
<WhatYouWillDo />
Expand All @@ -81,7 +163,7 @@ Maximum 5 participants per team</span>
</section>

<Register class="bg-slate-50" />
<section class="py-12 border-y border-slate-200">
<section class="py-12 border-y border-slate-200 scroll-mt-18 scroll-pt-18">
<div class="max-w-6xl mx-auto px-6">
<!-- <div class="grid gap-10 md:grid-cols-2"> -->
<div id="why">
Expand All @@ -97,6 +179,7 @@ Maximum 5 participants per team</span>
<ContactUs />



</main>


Expand Down