From 7d76207057a7cc6aaff2529deeb03d13ba730a2a Mon Sep 17 00:00:00 2001
From: Alex Stan <alex.stan.2010@proton.me>
Date: Sat, 1 Jun 2024 16:24:36 +0300
Subject: [PATCH] split the logo into a separate component (#8) Co-authored-by:
 Alex Stan <alex.stan.2010@proton.me> Co-committed-by: Alex Stan
 <alex.stan.2010@proton.me>

---
 app/components/logo.tsx    | 11 +++++++++++
 app/sessionconfig/page.tsx | 33 ++++-----------------------------
 2 files changed, 15 insertions(+), 29 deletions(-)
 create mode 100644 app/components/logo.tsx

diff --git a/app/components/logo.tsx b/app/components/logo.tsx
new file mode 100644
index 0000000..c3469ed
--- /dev/null
+++ b/app/components/logo.tsx
@@ -0,0 +1,11 @@
+const Logo = () => {
+  return (
+    <div style={{ display:"flex", alignItems: 'center', justifyContent: 'center'}}>
+      <a href="/">
+        <img src="/logo-no-background.png" height="auto" width="40%"/>
+      </a>
+    </div>
+  )
+}
+
+export default Logo;
\ No newline at end of file
diff --git a/app/sessionconfig/page.tsx b/app/sessionconfig/page.tsx
index 8d5d004..6e29fc9 100644
--- a/app/sessionconfig/page.tsx
+++ b/app/sessionconfig/page.tsx
@@ -1,5 +1,6 @@
 import { CheckIcon } from '@heroicons/react/20/solid'
 import TopicCard from '../components/topic_card'
+import Logo from '../components/logo';
 
 const includedFeatures = [
   'Private forum access',
@@ -13,26 +14,12 @@ export default function Example() {
     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", "It's cool ig", "/learn/geography"],
-      ["Learn C++", "Don't.", "/learn/cpp"],
-      ["Learn C", "Do.", "/learn/c"]
+      ["Learn C++", "Don't.", "/learn/cpp"]
     ];
   return (
     
-    <div className="sm:py-32">
-        <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>
-      <div style={{ display:"flex", alignItems: 'center', justifyContent: 'center', paddingTop:'40px'}}><img className="flex" src="/logo-no-background.png" height="auto" width="40%" style={{ alignSelf: 'center'}}></img></div>
-<div style={{ display:"flex", alignItems: 'center', justifyContent: 'center'}}><a href="/"><img src="/logo-no-background.png" height="auto" width="40%"/></a></div>
+    <div className="bg-black py-24 sm:py-32" style = {{ alignItems: 'center', justifyContent: 'center' }}>
+      <Logo/>
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         { cards.map((elem) => {
           return (<TopicCard title={elem[0]} link={elem[2]}>{elem[1]}</TopicCard>)
@@ -55,18 +42,6 @@ export default function Example() {
         </TopicCard>
   */}
       </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>
   )
 }