From 2f6981f4f61c0d4882c7064ae3afda5807a55fe0 Mon Sep 17 00:00:00 2001
From: Alex Stan <alex.stan.2010@proton.me>
Date: Sun, 2 Jun 2024 12:04:41 +0300
Subject: [PATCH] redid some changes

Signed-off-by: Alex Stan <alex.stan.2010@proton.me>
---
 app/components/results.tsx |  6 ++-
 app/learn/page.tsx         | 87 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 app/learn/page.tsx

diff --git a/app/components/results.tsx b/app/components/results.tsx
index bf4b6d8..9bafae2 100644
--- a/app/components/results.tsx
+++ b/app/components/results.tsx
@@ -1,6 +1,7 @@
 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 = [
@@ -84,13 +85,14 @@ const ResultScreen = ({state}: {state: SessionState}) => {
             <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
+          {/* <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>
+          </a> */}
+          <LinkButton text="Learn about another topic" href="/sessionconfig"/>
         </div>
       </div>
       <div
diff --git a/app/learn/page.tsx b/app/learn/page.tsx
new file mode 100644
index 0000000..a73894e
--- /dev/null
+++ b/app/learn/page.tsx
@@ -0,0 +1,87 @@
+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>
+  )
+}