BlahajTeam/next-app
3
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

Compare commits

base: BlahajTeam:main
Branches Tags
BlahajTeam:main
BlahajTeam:form
BlahajTeam:animations2
BlahajTeam:backend-1
BlahajTeam:uitest
BlahajTeam:initapiserver-flashcards
..
compare: BlahajTeam:animations2
Branches Tags
BlahajTeam:form
BlahajTeam:main
BlahajTeam:animations2
BlahajTeam:backend-1
BlahajTeam:uitest
BlahajTeam:initapiserver-flashcards

No commits in common. "main" and "animations2" have entirely different histories.
main ... animations

14 changed files with 65 additions and 272 deletions
Show stats Expand all files Collapse all files

45
app/about-us/page.tsx
View file

@ -1,29 +1,25 @@
import { ClipboardDocumentListIcon, DocumentTextIcon } from '@heroicons/react/24/outline';
import { DocumentTextIcon } from '@heroicons/react/24/outline';
import Logo from '../components/logo';
import TopicCard from '../components/topic_card';
import LinkButton from '../components/link-button';
{/*Index of people and their respective image and title*/}
const people = [
{
name: 'Andrei Banu',
role: 'UI/UX designer',
imageUrl:
'arch.png',
email: 'mailto:child1.andy@gmail.com'
},
{
name: 'Ioan Cristian Chelaru',
role: 'UI/UX designer',
imageUrl:
'blahaj.avif',
email: 'mailto:iccjoc@proton.me'
},
{
name: 'Alexandru Gabriel Stan',
role: 'Backend & UI developer',
role: 'Back end developer',
imageUrl:
'alex.png',
email: 'mailto:alex.stan.2010@proton.me'
},
// More people...
]
@ -31,7 +27,6 @@ const people = [
export default function Example() {
return (
<div className="sm:py-32">
{/*Background visuals*/}
<div
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
@ -43,24 +38,16 @@ const people = [
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
<Logo/>
<div style={{paddingBottom: '100px'}}></div>
<div className="mx-auto grid max-w-7xl gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3"> {/*Team presentation text*/}
<div className="mx-auto grid max-w-7xl gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
<div className="max-w-2xl">
<h2 className="text-3xl font-bold tracking-tight text-gray-200 sm:text-4xl">Meet our developers</h2>
<p className="mt-6 text-lg leading-8 text-gray-200">
We are a group of passionate middle schoolers that got together to hopefully make a difference in the world
We are a group of passionate middle schoolers that got togather to hopefully make a difference in the world
</p>
</div>
{/*Display people*/}
<ul role="list" className="grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2">
{people.map((person) => (
<li key={person.name}>
@ -69,7 +56,6 @@ const people = [
<div>
<h3 className="text-base font-semibold leading-7 tracking-tight text-gray-200">{person.name}</h3>
<p className="text-sm font-semibold leading-6 text-indigo-200">{person.role}</p>
<LinkButton text="Send mail" href={person.email}/>
</div>
</div>
</li>
@ -77,32 +63,29 @@ const people = [
</ul>
</div>
<br></br>
{/*Licence and source code buttons*/}
<div
style={{display:"flex", alignItems: 'center', alignSelf:'center', justifyContent: 'center', marginLeft: "40px", marginRight: "40px"}}
style={{display:"flex", alignItems: 'center', justifyContent: 'center', marginLeft: "40px", marginRight: "40px"}}
>
<a
href="https://git.gra.phite.ro/BlahajTeam/next-app"
className="rounded-md text-sm font-semibold text-gray-200 shadow-sm hover:text-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
style={{minWidth: '190px', maxWidth: '190px', paddingLeft: '50px', paddingRight: '50px', paddingTop: '20px', paddingBottom: '20px', alignSelf: 'center'}}
style={{maxWidth: '250px', paddingLeft: '50px', paddingRight: '50px', paddingTop: '20px', paddingBottom: '20px', alignSelf: 'center'}}
>
<DocumentTextIcon></DocumentTextIcon>
Source Code
</a>
<a
href="https://git.gra.phite.ro/BlahajTeam/next-app/src/branch/main/LICENSE"
className="rounded-md text-sm font-semibold text-gray-200 shadow-sm hover:text-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
style={{minWidth: '190px', maxWidth: '190px', paddingLeft: '50px', paddingRight: '50px', paddingTop: '20px', paddingBottom: '20px', alignSelf: 'center'}}
>
<ClipboardDocumentListIcon></ClipboardDocumentListIcon>
Our Licence
</a>
</div>
<div
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
</div>
)

26
app/components/link-button.tsx
View file

@ -1,26 +0,0 @@
'use client';
import { motion } from "framer-motion"
import { useState } from "react";
const LinkButton = ({text, href, onPress}: {text: string, href: string, onPress?: () => any}) => {
const [buttonHovered, setButtonHovered] = useState( false );
const [buttonPressed, setButtonPressed] = useState( false );
return (
<div className="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
<motion.a
href={href}
className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
style={{ marginBottom: '40px' }}
animate={{opacity: buttonHovered ? 0.8 : 1}}
onMouseEnter={()=>setButtonHovered(true)}
onMouseLeave={()=>setButtonHovered(false)}
onClick={()=>{setButtonPressed(true); onPress && onPress();}}
>
{text}
</motion.a>
</div>
);
}
export default LinkButton;

16
app/components/logo.tsx
View file

@ -1,8 +1,6 @@
'use client';
import { Transition } from "@headlessui/react";
import { motion } from "framer-motion";
import { useState } from "react";
import LinkButton from "./link-button";
const Logo = () => {
@ -20,24 +18,20 @@ const Logo = () => {
leave="transition-opacity duration-75"
leaveFrom={logoHovered ? "opacity-70" : "opacity-100"}
leaveTo={logoHovered ? "opacity-100" : "opacity-70"}> */}
<motion.a href="/" style={{ marginBottom: '40px', marginLeft: '40px'}} animate={{opacity: logoHovered ? 0.7 : 1}}
<a href="/" style={{ marginBottom: '40px', marginLeft: '40px', transition: 'opacity', opacity: logoHovered ? 0.7 : 1 , animationDuration: '0.3s'}}
onMouseEnter={()=>setLogoHovered(true)}
onMouseLeave={()=>setLogoHovered(false)}>
<img src="/logo-no-background.png" height="auto" width="400px"/>
</motion.a>
</a>
{/* </Transition> */}
<div style={{ marginBottom: '40px', marginRight: '50px' }}></div>
{/* <motion.a
<div style={{ marginBottom: '40px', marginRight: '40px' }}></div>
<a
href="/about-us"
className="rounded-md bg-white text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
style={{ marginBottom: '40px', marginRight: '40px', padding: '10px' }}
animate={{opacity: aboutButtonHovered ? 0.8 : 1}}
onMouseEnter={()=>setAboutButtonHovered(true)}
onMouseLeave={()=>setAboutButtonHovered(false)}
>
About us
</motion.a> */}
<LinkButton text="About us" href="/about-us"/>
</a>
</div>
)
}

26
app/components/question_component.tsx
View file

@ -1,10 +1,8 @@
import { ReactComponentElement, ReactNode, useEffect } from "react";
import { ReactComponentElement, ReactNode } from "react";
import { AnswerType, Question } from "../lib/question";
import { SessionState } from "../lib/session";
import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
import { Button, Transition } from "@headlessui/react";
import wait from "../lib/delay";
import { motion } from "framer-motion";
const QuestionView = ({ question, setState, state }: { question: Question, setState: any, state: SessionState }) => {
@ -18,10 +16,6 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
}))
}
useEffect( () => {
wait( 1000 );
}, [] );
const handleAnswerClick = (right: boolean) => {
setState( (prevState: SessionState) => ({
...prevState,
@ -53,16 +47,14 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
{question.text}
</h1>
</Transition>
{/* <Transition
<Transition
show={(question && state.opened[ question.id ]) ? true : false}
enter="transition-opacity duration-300"
enterFrom="opacity-0"
enterTo="opacity-90"
leave="transition-opacity duration-150"
leaveFrom="opacity-90"
leaveTo="opacity-0"> */}
{/* <motion.div animate={{visibility: ((question && state.opened[ question.id ]) ? "visible" : "collapse") }}> */}
<motion.div animate={(question && state.opened[ question.id ]) ? {visibility: "visible", opacity: 1} : {visibility: "collapse", opacity: 0}}>
leaveTo="opacity-0">
<div><p className="mt-6 text-lg leading-8 text-gray-200">
{question.answer}
</p>
@ -84,22 +76,22 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
<button
onClick={() => { handleAnswerClick( true )}}
className="rounded-md bg-green-600 px-3.5 py-2.5 text-s font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
style={{minWidth:'40%', minHeight:'40%', maxWidth:'40%', maxHeight:'40%'}}
style={{width:'30%', height:'30%'}}
>
<CheckCircleIcon></CheckCircleIcon>
I knew that!
</button>
<button
onClick={() => {handleAnswerClick( false )}}
className="rounded-md bg-red-600 px-3.5 py-2.5 text-s font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
style={{minWidth:'40%', minHeight:'40%', maxWidth:'40%', maxHeight:'40%'}}
className="rounded-md bg-red-600 px-3.5 py-2.5 text-xs font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
style={{width:'30%', height:'30%'}}
>
<XCircleIcon></XCircleIcon>
I didn't know!
I didn't know that!
</button>
</div>
</div>
</motion.div>
</Transition>
<Transition
show={(question && (state.opened[ question.id ])) ? false : true}
enter="transition-opacity duration-300"
@ -108,7 +100,7 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
leave="transition-opacity duration-150"
leaveFrom="opacity-90"
leaveTo="opacity-0">
<Button className="leading-6 text-black back rounded-md bg-white text-sm font-semibold text-gray-900" onClick={handleOpenClick} style = {{padding: '5px'}}>
<Button className="text-sm font-semibold leading-6 text-gray-200" onClick={handleOpenClick}>
Show answer
</Button>
</Transition>

10
app/components/results.tsx
View file

@ -1,7 +1,6 @@
import { CheckIcon, XMarkIcon, QuestionMarkCircleIcon, FingerPrintIcon, LockClosedIcon } from '@heroicons/react/24/outline'
import Logo from './logo';
import { SessionState } from '../lib/session';
import LinkButton from './link-button';
/*
const features = [
@ -82,17 +81,16 @@ const ResultScreen = ({state}: {state: SessionState}) => {
))} */}
<Result name="Correct Answers" key="correct" text1="Congrats for your" number={state.right} text2="correctly answered questions! Great job!" Icon={CheckIcon}/>
<Result name="Wrong Answers" key="wrong" text1="You had" number={state.wrong} text2="wrong answers... It's never too late to learn!" Icon={XMarkIcon}/>
<Result name="Total Answers" key="total" text1="The" number={state.answered} text2="questions you answered surely helped you learn more." Icon={QuestionMarkCircleIcon}/>
<Result name="Total answers" key="total" text1="The" number={state.answered} text2="questions you answered surely helped you learn more." Icon={QuestionMarkCircleIcon}/>
</dl>
<br></br>
{/* <a
href="/sessionconfig"
<a
href="sessionconfig"
className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-gray-100 shadow-sm hover:bg-indigo-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
style={{ marginTop: '100px' }}
>
Go Back
</a> */}
<LinkButton text="Learn about another topic" href="/sessionconfig"/>
</a>
</div>
</div>
<div

21
app/components/topic_card.tsx
View file

@ -1,13 +1,7 @@
'use client';
import { motion } from 'framer-motion';
import { useState } from 'react';
import LinkButton from './link-button';
import { PlayIcon } from '@heroicons/react/24/outline'
const TopicCard = ({ title, children, link }: { title: string, children: any, link: string }) => {
const [clicked, setClicked] = useState( false );
const [hovered, setHovered] = useState( false );
return (
<motion.div className="mx-auto mt-16 max-w-2xl rounded-3xl sm:mt-20 lg:mx-0 lg:flex lg:max-w-none relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0" style={{marginTop: '20px', paddingTop: '0px', paddingBottom: '24px'}}
animate={{x: hovered? 10 : 0, opacity: clicked ? 0.5 : 1 }} onMouseEnter={()=>setHovered(true)} onMouseLeave={()=>setHovered(false)}>
return(
<div className="mx-auto mt-16 max-w-2xl rounded-3xl sm:mt-20 lg:mx-0 lg:flex lg:max-w-none relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0" style={{marginTop: '20px', paddingTop: '0px', paddingBottom: '24px'}}>
<svg
viewBox="0 0 1024 1024"
className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
@ -31,17 +25,16 @@ const TopicCard = ({ title, children, link }: { title: string, children: any, li
className="-mt-2 p-2 lg:mt-0 lg:max-w-md lg:flex-shrink-0 lg:flex lg:flex-col lg:justify-center"
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
>
{/* <a
<a
href={link}
className="rounded-md text-sm font-semibold border text-gray-200 shadow-sm hover:text-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
className="mt-10 block w-full rounded-md bg-blue-500 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
style={{ paddingLeft: '50px', paddingRight: '50px', paddingTop: '20px', paddingBottom: '20px'}}
>
Begin
</a> */}
<LinkButton text="Begin" href={link} onPress={()=>setClicked(true)}/>
</a>
</div>
</motion.div>
</div>
)
}

17
app/learn/[category]/page.tsx
View file

@ -92,15 +92,8 @@ const Page = ({ params }: { params: { category: string }}) => {
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
<div style={{paddingTop: '72px'}}></div>
{(()=>{
if ( !questions[ 0 ] )
@ -114,7 +107,13 @@ const Page = ({ params }: { params: { category: string }}) => {
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
</div>
</div>

87
app/learn/page.tsx
View file

@ -1,87 +0,0 @@
import { CheckIcon } from '@heroicons/react/20/solid'
import TopicCard from '../components/topic_card'
import Logo from '../components/logo';
import { Transition } from '@headlessui/react';
const includedFeatures = [
'Private forum access',
'Member resources',
'Entry to annual conference',
'Official member t-shirt',
]
export default function Example() {
//List of topics
const cards = [
["Learn cybersecurity", "Learning cybersecurity is like becoming a guardian of the digital realm.\nIt's about mastering the art of protecting information, systems, and networks from cyber threats.\nFrom understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.", "/learn/cybersec" ],
["Learn geography", "Geography is the study of our world's intricate tapestry — from the towering peaks of the Himalayas to the vast expanse of the Sahara Desert. It's about understanding the relationships between people, places, and the environment.", "/learn/geography"],
["Learn CPP", "As a powerful, versatile language, CPP teaches you the fundamentals of object-oriented programming while offering fine-grained control over system resources. You'll explore concepts like classes, inheritance, and polymorphism, alongside memory management and pointers.", "/learn/cpp"]
];
return (
<div className="py-24 sm:py-32" style = {{ alignItems: 'center', justifyContent: 'center' }}>
{/*Background*/}
<div
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
>
<div
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
{/*The logo*/}
<Logo/>
<div style={{paddingTop: '128px'}}></div>
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<Transition
appear={true}
show={true}
enter="transition-opacity duration-300"
enterFrom="opacity-0"
enterTo="opacity-80">
<div>
{ cards.map((elem) => {
return (
<TopicCard title={elem[0]} link={elem[2]}>{elem[1]}</TopicCard>
)})}
</div>
</Transition>
{/*
<TopicCard title = "Learn cybersecurity">
Learning cybersecurity is like becoming a guardian of the digital realm.
It's about mastering the art of protecting information, systems, and networks from cyber threats.
From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.
</TopicCard>
<TopicCard title = "Learn geography">
Learning cybersecurity is like becoming a guardian of the digital realm.
It's about mastering the art of protecting information, systems, and networks from cyber threats.
From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.
</TopicCard>
<TopicCard title = "Learn C++">
Learning cybersecurity is like becoming a guardian of the digital realm.
It's about mastering the art of protecting information, systems, and networks from cyber threats.
From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.
</TopicCard>
*/}
</div>
{/*Background*/}
<div
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
</div>
</div>
)
}

5
app/lib/delay.ts
View file

@ -1,5 +0,0 @@
const wait = (time: number): Promise<void> => {
return new Promise( res => setTimeout( res, time ) );
}
export default wait;

32
app/page.tsx
View file

@ -1,18 +1,14 @@
'use client';
import { Fragment, useState } from 'react'
import { Fragment } from 'react'
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/20/solid'
import Logo from './components/logo';
import { motion } from 'framer-motion';
import LinkButton from './components/link-button';
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
const [buttonPressed, setButtonPressed] = useState( false );
return (
<div>
{/*Background visual elements*/}
<div
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
@ -24,25 +20,15 @@ export default function Example() {
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
<div style={{paddingTop: '128px'}}></div>
<Logo/>
<Transition
appear={true}
show={!buttonPressed}
show={true}
enter="transition-opacity duration-500"
enterFrom="opacity-0"
enterTo="opacity-80"
leave="transition-opacity duration-150"
leaveFrom="opacity-80"
leaveTo="opacity-0">
enterTo="opacity-80">
<div className="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
<div className="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
<svg
@ -68,18 +54,14 @@ export default function Example() {
Get questions from a multitude of different subjects that include cybersecurity, geography and C++
</p>
<div className="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
{/* <motion.a
<a
href="sessionconfig"
className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
style={{ marginBottom: '40px' }}
animate={{opacity: buttonHovered ? 0.8 : 1}}
onMouseEnter={()=>setButtonHovered(true)}
onMouseLeave={()=>setButtonHovered(false)}
onClick={()=>setButtonPressed(true)}
>
Get started
</motion.a> */}
<LinkButton text="Get started" href="/sessionconfig" onPress={()=>setButtonPressed(true)}/>
</a>
</div>
</div>
</div>

22
app/sessionconfig/page.tsx
View file

@ -12,16 +12,14 @@ const includedFeatures = [
export default function Example() {
//List of topics
const cards = [
["Learn cybersecurity", "Learning cybersecurity is like becoming a guardian of the digital realm.\nIt's about mastering the art of protecting information, systems, and networks from cyber threats.\nFrom understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.", "/learn/cybersec" ],
["Learn geography", "Geography is the study of our world's intricate tapestry — from the towering peaks of the Himalayas to the vast expanse of the Sahara Desert. It's about understanding the relationships between people, places and the environment.", "/learn/geography"],
["Learn CPP", "As a powerful, versatile language, C++ teaches you the fundamentals of object-oriented programming while offering fine-grained control over system resources. You'll explore concepts like classes, inheritance, and polymorphism, alongside memory management and pointers.", "/learn/cpp"]
["Learn geography", "Geography is the study of our world's intricate tapestry — from the towering peaks of the Himalayas to the vast expanse of the Sahara Desert. It's about understanding the relationships between people, places, and the environment.", "/learn/geography"],
["Learn CPP", "As a powerful, versatile language, CPP teaches you the fundamentals of object-oriented programming while offering fine-grained control over system resources. You'll explore concepts like classes, inheritance, and polymorphism, alongside memory management and pointers.", "/learn/cpp"]
];
return (
<div className="py-24 sm:py-32" style = {{ alignItems: 'center', justifyContent: 'center' }}>
{/*Background*/}
<div
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
@ -33,15 +31,7 @@ export default function Example() {
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
{/*The logo*/}
<Logo/>
<div style={{paddingTop: '128px'}}></div>
<div className="mx-auto max-w-7xl px-6 lg:px-8">
@ -76,11 +66,17 @@ export default function Example() {
</TopicCard>
*/}
</div>
{/*Background*/}
<div
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
</div>
)

25
package-lock.json generated
View file

@ -10,7 +10,6 @@
"dependencies": {
"@headlessui/react": "^2.0.4",
"@heroicons/react": "^2.1.3",
"framer-motion": "^11.2.10",
"next": "14.2.3",
"react": "^18",
"react-dom": "^18",
@ -2246,30 +2245,6 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/framer-motion": {
"version": "11.2.10",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.10.tgz",
"integrity": "sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==",
"dependencies": {
"tslib": "^2.4.0"
},
"peerDependencies": {
"@emotion/is-prop-valid": "*",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"peerDependenciesMeta": {
"@emotion/is-prop-valid": {
"optional": true
},
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
}
},
"node_modules/fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",

1
package.json
View file

@ -11,7 +11,6 @@
"dependencies": {
"@headlessui/react": "^2.0.4",
"@heroicons/react": "^2.1.3",
"framer-motion": "^11.2.10",
"next": "14.2.3",
"react": "^18",
"react-dom": "^18",

BIN
public/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 258 KiB