Skip to content
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

Redesigned the three pages Homepage , Previous quiz data page , Addin… #127

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+513 −333
Open

Redesigned the three pages Homepage , Previous quiz data page , Addin… #127

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
22 changes: 18 additions & 4 deletions eduaid_web/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.

113 changes: 113 additions & 0 deletions eduaid_web/src/components/feature_section.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import React from "react";

const FeaturesSection = () => {
const features = [
{
title: "Doc/Audio Input",
position: "left",
},
{
title: "In-depth Questions Generation",
position: "right",
},
{
title: "Dynamic Google Form Integration",
position: "left",
},
];

return (
<div className="relative w-full bg-transparent">
{/* Extended background container */}
<div className="absolute inset-0 w-full overflow-hidden">
{/* Background geometric patterns - now full width */}
<div className="absolute inset-0 opacity-20">
{/* Horizontal lines - extended */}
<div className="absolute top-1/4 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[#7877C6] to-transparent" />
<div className="absolute top-2/4 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-500 to-transparent" />
<div className="absolute top-3/4 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[#7877C6] to-transparent" />

{/* Diagonal lines - extended */}
<div className="absolute top-0 left-0 w-px h-full bg-gradient-to-b from-transparent via-[#7877C6] to-transparent transform -rotate-45" />
<div className="absolute top-0 right-0 w-px h-full bg-gradient-to-b from-transparent via-purple-500 to-transparent transform rotate-45" />

{/* Circular elements - positioned relative to viewport */}
<div className="absolute top-1/4 left-1/4 w-40 h-40 border border-[#7877C6]/30 rounded-full" />
<div className="absolute bottom-1/4 right-1/4 w-48 h-48 border border-purple-500/30 rounded-full" />

{/* Grid pattern - extended */}
<div
className="absolute inset-0"
style={{
backgroundImage: `
linear-gradient(to right, rgba(120,119,198, 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(120,119,198, 0.1) 1px, transparent 1px)
`,
backgroundSize: "2rem 2rem",
}}
/>
</div>
</div>

{/* Content container - maintained original size */}
<div className="relative h-[500px] w-96 mx-auto">
{/* Main vertical glowing line */}
<div
className="absolute left-1/2 top-0 bottom-0 w-px bg-gradient-to-b from-[#7877C6]/0 via-[#7877C6] to-[#7877C6]/0
after:absolute after:w-[2px] after:h-full after:bg-gradient-to-b after:from-transparent after:via-[#7877C6] after:to-transparent after:blur-sm
before:absolute before:w-[1px] before:h-full before:bg-gradient-to-b before:from-transparent before:via-[#7877C6] before:to-transparent before:blur-md"
/>

{/* Pulsing dots */}
<div className="absolute left-1/2 top-1/4 w-2 h-2 -ml-1 bg-[#7877C6] rounded-full animate-pulse" />
<div className="absolute left-1/2 top-2/4 w-2 h-2 -ml-1 bg-purple-500 rounded-full animate-pulse" />
<div className="absolute left-1/2 top-3/4 w-2 h-2 -ml-1 bg-[#7877C6] rounded-full animate-pulse" />

{/* Features content */}
<div className="relative space-y-12 py-6">
{features.map((feature, index) => (
<div
key={feature.title}
className={`flex items-center gap-4 ${
feature.position === "left" ? "flex-row" : "flex-row-reverse"
}`}
>
<div
className={`w-1/2 ${
feature.position === "left"
? "text-right pr-4"
: "text-left pl-4"
}`}
>
<div
className={`p-4 rounded-lg bg-neutral-900/80 backdrop-blur-sm border border-[#7877C6]/20
relative overflow-hidden group transition-all duration-300
hover:border-[#7877C6]/50 hover:bg-neutral-900/90
${feature.position === "left" ? "mr-4" : "ml-4"}`}
>
{/* Card background effect */}
<div className="absolute inset-0 bg-gradient-to-r from-[#7877C6]/0 via-[#7877C6]/10 to-purple-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

{/* Corner accent lines */}
<div className="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-[#7877C6]/30" />
<div className="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-purple-500/30" />

<div className="relative z-10">
<div className="flex items-center gap-2 justify-center">
<h3 className="text-base font-bold bg-gradient-to-r from-[#7877C6] to-purple-500 bg-clip-text text-transparent">
{feature.title}
</h3>
</div>
</div>
</div>
</div>
<div className="w-1/2" />
</div>
))}
</div>
</div>
</div>
);
};

export default FeaturesSection;
6 changes: 6 additions & 0 deletions eduaid_web/src/lib/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs) {
return twMerge(clsx(inputs));
}
133 changes: 56 additions & 77 deletions eduaid_web/src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import React, { useState, useEffect } from "react";
import "../index.css";
import logo from "../assets/aossie_logo.png";
import starsImg from "../assets/stars.png";
import arrow from "../assets/arrow.png";
import gitStar from "../assets/gitStar.png";
import { FaGithub } from "react-icons/fa";

import { FaArrowAltCircleRight, FaGithub, FaStar } from "react-icons/fa";
import FeaturesSection from "../components/feature_section";

const Home = () => {
const [stars, setStars] = useState(null);
Expand All @@ -22,7 +21,7 @@ const Home = () => {
}

function isMoreThanOneDayOld(timestamp) {
const oneDay = 24 * 60 * 60 * 1000; // One day in milliseconds
const oneDay = 24 * 60 * 60 * 1000;
return Date.now() - timestamp > oneDay;
}

Expand All @@ -49,83 +48,63 @@ const Home = () => {
}, []);

return (
<div className="popup w-screen h-screen bg-[#02000F] flex justify-center items-center">
<div className="w-full h-full bg-cust bg-opacity-50 bg-custom-gradient">
<div>
<img src={logo} alt="logo" className="w-24 my-6 mx-6 block" />
<div className="text-7xl text-center font-extrabold">
<span className="bg-gradient-to-r from-[#FF005C] to-[#7600F2] text-transparent bg-clip-text">
Edu
</span>
<span className="bg-gradient-to-r from-[#7600F2] to-[#00CBE7] text-transparent bg-clip-text">
Aid
</span>
</div>
<div className="text-white text-[1.5rem] text-center my-4">
<div>A tool that can auto-generate short quizzes</div>
<div className="flex text-center justify-center gap-4">
based on user input{" "}
<img src={starsImg} width={32} height={12} alt="" />
</div>
</div>
<div className="flex flex-col items-end">
<div className="my-6">
<div className="flex items-center rounded-l-2xl w-fit px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] justify-center gap-4">
<img src={starsImg} width={32} height={16} alt="" />
<div className="text-white text-xl">Doc/Audio Input</div>
</div>
</div>
<div className="my-4">
<div className="flex items-center rounded-l-2xl w-fit px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] justify-center gap-4">
<img src={starsImg} width={32} height={16} alt="" />
<div className="text-white text-xl">In-depth questions gen</div>
</div>
</div>
<div className="my-4">
<div className="flex items-center rounded-l-2xl w-fit px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] justify-center gap-4">
<img src={starsImg} width={32} height={16} alt="" />
<div className="text-white text-xl">
Dynamic Google Form Integration
</div>
</div>
</div>
</div>
<div className="flex justify-center gap-6">
<div className="mt-8 rounded-2xl">
<a href="question-type">
<button className="items-center text-lg flex justify-center gap-4 text-white px-6 py-3 mx-auto mt-6 border-gradient hover:wave-effect rounded-md">
Let’s get Started{" "}
<img src={arrow} width={28} height={24} alt="" />
</button>
</a>
</div>
<div className="mt-8 rounded-2xl">
<a href="history">
<button className="items-center text-lg flex justify-center gap-4 text-white px-6 py-3 mx-auto mt-6 border-gradient hover:wave-effect rounded-md">
Your previous Work!
<img src={arrow} width={28} height={24} alt="" />
</button>
</a>
</div>
</div>
<div className="relative min-h-screen bg-neutral-950">
{/* Background patterns - moved to lowest z-index */}
<div className="inset-0">
<div className="absolute inset-0 bg-neutral-950 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
<div className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:24px_32px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]" />
</div>
<img
src={logo}
alt=""
className=" absolute mix-blend-screen rounded-full size-20 m-4"
/>
{/* Content wrapper - above background */}
<div className="relative">
{/* Heading Section */}
<div className="w-full pt-28 flex items-center justify-center flex-col">
<h1 className="text-9xl font-extrabold bg-gradient-to-tr from-transparent via-white to-transparent text-transparent bg-clip-text">
EDUAID
</h1>
<p className="mt-10 text-gray-400 text-sm">
A tool that can auto-generate short quizzes
</p>
</div>

<div className="flex pt-11 items-center justify-center gap-4">
<a
href={"/question-type"}
className="p-2 hover:scale-95 active:scale-105 transition-transform w-44 flex items-center justify-center gap-3 rounded-lg px-4 bg-white text-black"
>
Lets get started <FaArrowAltCircleRight />
</a>
<a
className="p-2 w-fit hover:scale-95 active:scale-105 transition-transform flex items-center justify-center gap-3 rounded-lg px-4 bg-transparent border text-white"
href="history"
>
Your previous Work!
</a>
</div>

{/* Features Section */}
<div className="mt-28 bg-transparent">
<FeaturesSection />
</div>
<div className="w-full relative flex justify-center items-center pb-4 ">
<div className="w-80 h-14 flex absolute bg-gradient-to-r from-pink-600 to-fuchsia-700 rounded-xl blur"></div>
<a
className="w-80 h-14 relative bg-gradient-to-r from-gray-800 to-gray-900 rounded-xl shadow-lg flex items-center justify-between px-4 transition-all "
href="https://github.com/AOSSIE-Org/EduAid"
target="_blank"
rel="noopener noreferrer"
className="group"
>
<div className="bg-[#45454599] mt-10 w-fit mx-auto px-4 py-3 rounded-xl flex gap-4 items-center group-hover:bg-[#5a5a5a99] transition-colors duration-300">
<img src={gitStar} className="" width={28} height={12} alt="" />
<div className="text-white font-semibold">
{stars !== null ? (
<span className="flex text-2xl">
{stars}
<FaGithub size={36} className="ml-6" />
</span>
) : (
<span>{error}</span>
)}
</div>
<div className="flex items-center space-x-2">
<FaGithub className="text-white text-2xl" />
<span className="text-white font-semibold">GitHub Stars</span>
</div>
<div className="flex items-center space-x-1">
<FaStar className="text-yellow-400 text-xl" />
<span className="text-white font-bold text-xl">37</span>
</div>
</a>
</div>
Expand Down
Loading