Skip to content

feat: improve landing page with how-it-works section and strong CTA #488

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
mahek2016 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: improve landing page with how-it-works section and strong CTA #488

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2b488ae
feat: improve landing page with how-it-works section and strong CTA
mahek2016 Feb 26, 2026
ce79c02
feat: improve landing page with how-it-works section and strong CTA
mahek2016 Feb 26, 2026
39efd86
fix: address CodeRabbit review (safe parsing + remove nested buttons)
mahek2016 Feb 26, 2026
1449774
fix: harden cache guard and validate GitHub API response per CodeRabb…
mahek2016 Feb 26, 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
175 changes: 132 additions & 43 deletions eduaid_web/src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import "../index.css";
import logo_trans from "../assets/aossie_logo_transparent.png"
import logo_trans from "../assets/aossie_logo_transparent.png";
import starsImg from "../assets/stars.png";
import arrow from "../assets/arrow.png";
import gitStar from "../assets/gitStar.png";
Expand All @@ -12,9 +12,21 @@ const Home = () => {
const [error, setError] = useState("");

async function fetchGitHubStars() {
const response = await fetch("https://api.github.com/repos/AOSSIE-Org/EduAid");
if (!response.ok) throw new Error("Failed to fetch stars");
const response = await fetch(
"https://api.github.com/repos/AOSSIE-Org/EduAid"
);

const data = await response.json();

if (
!response.ok ||
!data ||
typeof data.stargazers_count !== "number"
) {
console.error("Invalid GitHub API response:", data);
throw new Error("Invalid GitHub response");
}

return data.stargazers_count;
}

Expand All @@ -27,24 +39,36 @@ const Home = () => {
const storedStars = localStorage.getItem("stars");
const storedTime = localStorage.getItem("fetchTime");

if (storedStars && storedTime && !isMoreThanOneDayOld(parseInt(storedTime))) {
setStars(parseInt(storedStars));
} else {
fetchGitHubStars()
.then((starCount) => {
setStars(starCount);
localStorage.setItem("stars", starCount);
localStorage.setItem("fetchTime", Date.now().toString());
})
.catch(() => setError("Failed to fetch stars"));
if (storedStars !== null && storedTime !== null) {
const cachedStars = Number(storedStars);
const cachedTime = Number(storedTime);

if (
Number.isFinite(cachedStars) &&
Number.isFinite(cachedTime) &&
!isMoreThanOneDayOld(cachedTime)
) {
setStars(cachedStars);
return;
}
}

fetchGitHubStars()
.then((starCount) => {
setStars(starCount);
localStorage.setItem("stars", String(starCount));
localStorage.setItem("fetchTime", Date.now().toString());
})
.catch(() => setError("Failed to fetch stars"));
}, []);

return (
<div className="popup w-screen h-screen bg-[#02000F] flex justify-center items-center">
<div className="popup w-screen min-h-screen bg-[#02000F] flex justify-center items-start">
<div className="w-full h-full bg-cust bg-opacity-50 bg-custom-gradient overflow-auto px-4 py-6 sm:px-8 md:px-16">
<div className="max-w-5xl mx-auto">
<img src={logo_trans} alt="logo" className="w-24 my-4 sm:my-6" />
<div className="max-w-5xl mx-auto text-white">

{/* Logo */}
<img src={logo_trans} alt="EduAid Logo" className="w-24 my-6" />

{/* Heading */}
<h1 className="text-5xl sm:text-6xl md:text-7xl text-center font-extrabold leading-tight">
Expand All @@ -57,44 +81,108 @@ const Home = () => {
</h1>

{/* Subtitle */}
<div className="text-white text-lg sm:text-xl text-center mt-4 mb-6">
<p>A tool that can auto-generate short quizzes</p>
<div className="flex items-center justify-center gap-2 mt-2">
<p>based on user input</p>
<img src={starsImg} width={24} height={12} alt="stars" />
</div>
<div className="text-center mt-6 mb-10 text-lg sm:text-xl">
<p>Turn your notes into interactive quizzes in seconds.</p>
<p className="mt-2 text-gray-300">
Upload your PDF or DOC file and start practicing instantly.
</p>
</div>

{/* Features */}
<div className="flex flex-col items-end sm:items-center sm:flex-row sm:justify-between gap-4 mt-8">
{/* Feature Highlights */}
<div className="flex flex-col items-center sm:flex-row sm:justify-between gap-4 mt-8">
{[
"Doc/Audio Input",
"In-depth questions gen",
"Dynamic Google Form Integration",
"PDF / DOC Upload",
"AI-powered Quiz Generation",
"Instant Practice Mode",
].map((feature, i) => (
<div
key={i}
className="flex items-center rounded-l-2xl sm:rounded-2xl px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] gap-4 w-fit"
className="flex items-center rounded-2xl px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] gap-4"
>
<img src={starsImg} width={32} height={16} alt="" />
<div className="text-white text-base sm:text-xl">{feature}</div>
<div className="text-white text-base sm:text-lg">
{feature}
</div>
</div>
))}
</div>

{/* Buttons */}
<div className="flex flex-col sm:flex-row justify-center items-center gap-6 mt-10">
<Link to="/question-type" className="w-full sm:w-auto">
<button className="w-full sm:w-auto items-center text-lg flex justify-center gap-3 text-white px-6 py-3 border-gradient hover:wave-effect rounded-md transition-all duration-300">
Let’s get Started
<img src={arrow} width={24} height={24} alt="arrow" />
</button>
{/* Primary Buttons */}
<div className="flex flex-col sm:flex-row justify-center items-center gap-6 mt-12">

<Link
to="/question-type"
className="w-full sm:w-auto flex justify-center gap-3 text-white px-6 py-3 border-gradient hover:wave-effect rounded-md transition-all duration-300"
>
<span>Upload & Generate Quiz</span>
<img src={arrow} width={24} height={24} alt="" aria-hidden="true" />
</Link>
<Link to="/history" className="w-full sm:w-auto">
<button className="w-full sm:w-auto items-center text-lg flex justify-center gap-3 text-white px-6 py-3 border-gradient hover:wave-effect rounded-md transition-all duration-300">
Your previous Work!
<img src={arrow} width={24} height={24} alt="arrow" />
</button>

<Link
to="/history"
className="w-full sm:w-auto flex justify-center gap-3 text-white px-6 py-3 border-gradient hover:wave-effect rounded-md transition-all duration-300"
>
<span>View Previous Work</span>
<img src={arrow} width={24} height={24} alt="" aria-hidden="true" />
</Link>

</div>

{/* How It Works */}
<div className="mt-20 text-center">
<h2 className="text-3xl sm:text-4xl font-bold mb-10">
How It Works
</h2>

<div className="flex flex-col sm:flex-row justify-center gap-8">
{[
"Upload your PDF or DOC file",
"AI generates quiz questions instantly",
"Start practicing and test your knowledge",
].map((step, i) => (
<div
key={i}
className="bg-[#1a1a2e] p-6 rounded-xl w-full sm:w-1/3"
>
<h3 className="text-xl font-semibold mb-3">
Step {i + 1}
</h3>
<p className="text-gray-300">{step}</p>
</div>
))}
</div>
</div>

{/* Why EduAid */}
<div className="mt-20 text-center">
<h2 className="text-3xl sm:text-4xl font-bold mb-10">
Why EduAid?
</h2>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
{[
"Saves hours of manual question creation",
"Encourages active recall learning",
"Instant feedback improves retention",
"Perfect for exams and revision",
].map((point, i) => (
<div
key={i}
className="bg-[#1a1a2e] p-6 rounded-xl"
>
<p className="text-gray-300">{point}</p>
</div>
))}
</div>
</div>

{/* Final CTA */}
<div className="mt-20 text-center">
<Link
to="/question-type"
className="inline-flex text-white text-lg px-8 py-4 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] rounded-xl hover:opacity-90 transition-all duration-300"
>
Turn Your Notes Into a Quiz Now
</Link>
</div>

Expand All @@ -103,7 +191,7 @@ const Home = () => {
href="https://github.com/AOSSIE-Org/EduAid"
target="_blank"
rel="noopener noreferrer"
className="group block mt-10"
className="group block mt-16"
>
<div className="bg-[#45454599] hover:bg-[#5a5a5a99] transition-colors duration-300 w-fit mx-auto px-4 py-3 rounded-xl flex gap-4 items-center">
<img src={gitStar} width={28} height={12} alt="GitHub Star" />
Expand All @@ -119,10 +207,11 @@ const Home = () => {
</div>
</div>
</a>

</div>
</div>
</div>
);
};

export default Home;
export default Home;