feat: past editions page (#265)

* feat: past editions page

* refactor: change code-of-conduct link color

* chore: remove lockfile

* chore: remove abbrevation

* chore: keep only year in cards

* chore: backdrop blur in past edition card

* style: past edition page

* chore: update card style

* chore: remove border-bottom

---------

Co-authored-by: Ace <[email protected]>

components/Footer/footer.js

@@ -20,14 +20,14 @@ function Footer() {
   ];
   return (
     <div className="container">
-          <div className="w-full flex justify-between items-center p-4 sm:flex-col sm:gap-3">
-            <img src="/img/logo.png" className="w-[150px]" />
+      <div className="w-full flex justify-between items-center p-4 sm:flex-col sm:gap-3">
+            <img src="/img/logo.png" alt="company logo" className="w-[150px]" />
       <div className="mt-2 text-[14px] text-gray-100 underline">
         <a
         href="https://github.com/asyncapi/.github/blob/master/CODE_OF_CONDUCT.md"
         target="_blank"
         rel="noreferrer"
-        className="hover:text-sky-500 duration-200 ease-in-out"
+        className="hover:text-sky-500 text-white duration-200 ease-in-out"
         >
               Code of Conduct
             </a>

components/PastEditionCard/index.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import {ExternalLink} from 'lucide-react'
+const PastEditonCard = ({ url }) => {
+    let year = url.split('.')[1]
+    return (
+        <div className='bg-white bg-opacity-10 backdrop-blur-lg bg-clip-padding shadow-lg p-4 w-full mx-auto border-[1.66px] border-[#FFFFFF66] rounded-xl '>
+            <div className='flex items-center flex-wrap justify-between'>
+                <h1 className='text-2xl text-white font-semibold'>{year}</h1>
+                <div>
+                    <a href={url} rel='noreferrer' target='_blank' className='flex hover:scale-95 transiti items-center justify-center'>
+                       <p className='mr-2 text-white text-sm'>View Website</p> 
+                       <ExternalLink color='white' size={19} />
+                    </a>
+                </div>
+            </div>
+
+
+            <iframe src={url} height={250} width={'100%'} scrolling='no' className='pointer-events-none overflow-hidden rounded-lg my-4' />
+
+        </div>
+    )
+}
+
+export default PastEditonCard

config/editions.json

@@ -0,0 +1,6 @@
+[
+    "https://conference.2023.asyncapi.com/",
+    "https://conference.2022.asyncapi.com/",
+    "https://conference.2021.asyncapi.com/",
+    "https://conference.2020.asyncapi.com/"
+]

config/links.json

@@ -28,6 +28,10 @@
 	{
 		"title": "Sponsors",
 		"ref": "/#sponsors"
+	},
+	{
+		"title":"Past Editions",
+		"ref":"/editions"
 	}
 ]
 

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "axios": "^1.6.0",
     "d3": "^7.8.5",
+    "lucide-react": "^0.350.0",
     "next": "^12.0.0",
     "react": "^17.0.2",
     "react-confetti": "^6.1.0",

pages/editions/index.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PastEditonCard from '../../components/PastEditionCard'
+import pastEditionsArchiveLinks from '../../config/editions.json'
+const PastEditions = () => {
+    return (
+        <div >
+            <title>Past Editions | AACoT</title>
+            <div className='my-[70px]'>
+                <h1 className='text-5xl sm:text-4xl sm:w-full text-white my-4 text-center w-1/2 mx-auto font-bold'>
+                    Past Editions of
+                </h1>
+                <h1 className='text-5xl sm:text-4xl px-10 py-4 rounded-full bg-violet-700 text-white my-4 text-center w-fit mx-auto font-bold'>AsyncAPI Conf</h1>
+            </div>
+
+            <div className='w-3/4 sm:w-10/12 my-10 mx-auto grid grid-cols-2 sm:grid-cols-1 gap-[60px]'>
+                {
+                    pastEditionsArchiveLinks.map((item, index) => {
+                        return <PastEditonCard key={index} url={item} />
+                    })
+                }
+            </div>
+        </div>
+    )
+}
+
+export default PastEditions