From 9ce3d76092eb3186b9d8bbf2b223cfeb63d53905 Mon Sep 17 00:00:00 2001
From: sid <35936587+siddharth-shringarpure@users.noreply.github.com>
Date: Sat, 26 Oct 2024 17:22:07 +0100
Subject: [PATCH 01/11] =?UTF-8?q?=F0=9F=8E=A8=20Defined=20colour=20palette?=
 =?UTF-8?q?=20for=20Tailwind.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tailwind.config.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3b25f1f..5ea29e2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -14,6 +14,12 @@ const config: Config = {
           DEFAULT: '#000',
           100: '#000319',
         },
+        'darkest-purple': '#240046',
+        'darker-purple': '#3C096C',
+        'dark-purple': '#5A189A',
+        purple: '#7B2CBF',
+        'light-purple': '#9D4EDD',
+
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
         card: {

From deb52f36b1d319cd25fe13f417d1ed06a00df10d Mon Sep 17 00:00:00 2001
From: sid <35936587+siddharth-shringarpure@users.noreply.github.com>
Date: Sat, 26 Oct 2024 17:38:49 +0100
Subject: [PATCH 02/11] =?UTF-8?q?=F0=9F=8E=A8=20Themed=20header=20componen?=
 =?UTF-8?q?ts.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/custom/header.tsx    | 10 ++++++----
 components/scripts/MetaMask.tsx | 10 ++++++++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/components/custom/header.tsx b/components/custom/header.tsx
index 5e80639..b044a19 100644
--- a/components/custom/header.tsx
+++ b/components/custom/header.tsx
@@ -36,14 +36,16 @@ const Header = () => {
       ></div>
       <div className="container mx-auto px-6 py-4 flex justify-between items-center">
         <Link href="/" legacyBehavior>
-          <a className="text-2xl font-semibold text-white">TicketChain</a>
+          <a className="text-2xl font-semibold text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300">
+            TicketChain
+          </a>
         </Link>
         <nav className="nav">
           <ul className="flex space-x-6">
             <li>
               <Link href="/" legacyBehavior>
                 <a
-                  className="text-white hover:text-blue-500 transition-colors duration-300"
+                  className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
                   style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
                 >
                   Home
@@ -53,7 +55,7 @@ const Header = () => {
             <li>
               <Link href="/events" legacyBehavior>
                 <a
-                  className="text-white hover:text-blue-500 transition-colors duration-300"
+                  className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
                   style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
                 >
                   Events
@@ -63,7 +65,7 @@ const Header = () => {
             <li>
               <Link href="/contact" legacyBehavior>
                 <a
-                  className="text-white hover:text-blue-500 transition-colors duration-300"
+                  className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
                   style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
                 >
                   Contact
diff --git a/components/scripts/MetaMask.tsx b/components/scripts/MetaMask.tsx
index 4794a02..9b52ed0 100644
--- a/components/scripts/MetaMask.tsx
+++ b/components/scripts/MetaMask.tsx
@@ -64,7 +64,9 @@ function MetaMaskConnect() {
       {isConnected ? (
         <Popover>
           <PopoverTrigger asChild>
-            <Button>{formatAddress(account)}</Button>
+            <Button variant="link" className="text-white">
+              {formatAddress(account)}
+            </Button>
           </PopoverTrigger>
           <PopoverContent className="w-44">
             <Button
@@ -77,7 +79,11 @@ function MetaMaskConnect() {
           </PopoverContent>
         </Popover>
       ) : (
-        <Button disabled={connecting} onClick={connect}>
+        <Button
+          disabled={connecting}
+          onClick={connect}
+          className="bg-light-purple bg-opacity-75 hover:bg-purple border-0 hover:border-0"
+        >
           <WalletIcon className="mr-2 h-4 w-4" /> Connect Wallet
         </Button>
       )}

From 2ebdb7d479c7c35abb533b01bcea626f461d7b1c Mon Sep 17 00:00:00 2001
From: sid <35936587+siddharth-shringarpure@users.noreply.github.com>
Date: Sat, 26 Oct 2024 17:40:16 +0100
Subject: [PATCH 03/11] =?UTF-8?q?=F0=9F=8E=A8=20Themed=20and=20updated=20f?=
 =?UTF-8?q?ooter=20component.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/custom/footer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/custom/footer.tsx b/components/custom/footer.tsx
index 4012306..9d39d64 100644
--- a/components/custom/footer.tsx
+++ b/components/custom/footer.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 const Footer = () => {
   return (
     <footer className="text-center mt-8">
-      <p className="text-gray-500">
-        &copy; 2024 Ticket Chain. All rights reserved.
+      <p className="text-light-purple text-opacity-75">
+        &copy; 2024 TicketChain. All rights reserved.
       </p>
     </footer>
   );

From eb43087dbf9c17e1ee350bdb9ed01aed2d4b686d Mon Sep 17 00:00:00 2001
From: Shay Patel <shay@shay.services>
Date: Sat, 26 Oct 2024 20:23:36 +0100
Subject: [PATCH 04/11] Update homepage and link input to search

---
 app/events/page.tsx                 |  6 +++
 app/page.tsx                        | 79 ++++++++++++++++++++---------
 components/custom/FeaturedEvent.tsx | 46 +++++++++++++++++
 3 files changed, 107 insertions(+), 24 deletions(-)
 create mode 100644 components/custom/FeaturedEvent.tsx

diff --git a/app/events/page.tsx b/app/events/page.tsx
index 7bda79c..1aa11f6 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -2,6 +2,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import Header from '../../components/custom/header';
 import Footer from '../../components/custom/footer';
+import { useSearchParams } from 'next/navigation';
 
 // Define the Event interface including new fields
 interface Event {
@@ -70,6 +71,8 @@ const EventsPage: React.FC = () => {
   const [showSortMenu, setShowSortMenu] = useState<boolean>(false);
   const [showFilterMenu, setShowFilterMenu] = useState<boolean>(false);
 
+  const searchParams = useSearchParams();
+
   const sortRef = useRef<HTMLDivElement>(null);
   const filterRef = useRef<HTMLDivElement>(null);
 
@@ -140,6 +143,9 @@ const EventsPage: React.FC = () => {
 
   useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside);
+    if (searchParams.get("q")) {
+      setSearchQuery(searchParams.get("q")!);
+    };
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
diff --git a/app/page.tsx b/app/page.tsx
index 0018a04..c1413cd 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,16 +1,26 @@
 'use client';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
 import Header from '../components/custom/header';
 import Footer from '../components/custom/footer';
 import { Input } from '@/components/ui/input';
+import FeaturedEvent from '@/components/custom/FeaturedEvent';
+import { Button } from '@/components/ui/button';
 
 export default function Home() {
+  const router = useRouter();
   const [isClient, setIsClient] = useState(false);
+  const inputRef: any = useRef(null);
 
   useEffect(() => {
     setIsClient(true);
   }, []);
 
+  function searchForEvents() {
+    if (inputRef.current.value == "") return;
+    router.replace("/events?q=" + encodeURIComponent(inputRef.current.value));
+  }
+
   return (
     <>
       <Header />
@@ -32,34 +42,55 @@ export default function Home() {
         <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
 
         {/* Page Content Over the Video */}
-        <div className="relative z-20 min-h-screen bg-gradient-to-b from-transparent to-gray-900 pt-16">
+        <div className="relative z-20 min-h-screen bg-gradient-to-b from-transparent to-gray-900 pt-20">
           <div className="container mx-auto p-4">
-            <div className="flex items-center justify-center">
+            <h1 className="text-4xl font-bold text-white text-shadow-lg">
+              Book your next adventure <div className="inline bg-white p-2 rounded-lg shadow-lg text-black">on the <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-pink-600">Flare</span> blockchain</div>
+            </h1>
+            <div className="flex items-center justify-center mt-6 flex-col gap-4">
               <Input
                 type="text"
-                placeholder="Search events ..."
-                className="search-bar mt-4 p-2 border bg-white bg-opacity-25 border-gray-300 rounded-xl w-full max-w-5xl text-white"
+                placeholder="Search for your next experience..."
+                className="flex w-full rounded-md border border-input bg-white bg-opacity-50 placeholder:text-black px-4 py-6 text-lg shadow-sm"
+                ref={inputRef}
               />
+              <Button
+                className="bg-pink-600 bg-opacity-50 text-white px-4 py-6 text-lg w-full hover:bg-pink-500"
+                onClick={searchForEvents}
+              >Search for events</Button>
             </div>
             <main>
-              <br></br>
-              <section className="mb-8">
-                <h2 className="text-2xl font-semibold text-white mb-4">
-                  Featured Events
-                </h2>
-                <p className="text-gray-300">
-                  No events available at the moment.
-                </p>
-              </section>
-              <section>
-                <h2 className="text-2xl font-semibold text-white mb-4">
-                  Upcoming Events
-                </h2>
-                <ul className="list-disc list-inside text-gray-300">
-                  <li>Event 1 - Date</li>
-                  <li>Event 2 - Date</li>
-                  <li>Event 3 - Date</li>
-                </ul>
+              <section className="mb-8 mt-4 mx-auto grid grid-cols-4 gap-4">
+                <FeaturedEvent
+                  name="FAB XO Halloween"
+                  description="Halloween is upon us and is one of the biggest nights of the FAB XO calendar.  Fancy dress is encouraged! So have your fancy dress ready and we look forward to seeing who have the best fancy dress on the night!  As a special treat we will be serving our very own witches brew!!!"
+                  location="Birmingham, UK"
+                  capacity={100}
+                  ticketsSold={50}
+                  eventStartDate={1729980000}
+                  eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
+                  imageURL={"https://www.guildofstudents.com/asset/Event/7572/Halloween-Fab-XO-Web-Event.jpg"}
+                />
+                <FeaturedEvent
+                  name="Halls Halloween Spooktacular"
+                  description="Put on your spookiest costume and head on down to Pritchatts Park and join your Event Activators for our ResLife SPOOKTACULAR on Wednesday 30th October 5-8pm."
+                  location="Birmingham, UK"
+                  capacity={100}
+                  ticketsSold={50}
+                  eventStartDate={1730307600}
+                  eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
+                  imageURL={"https://www.guildofstudents.com/asset/Event/41187/Spooktacular-Web-Event-2024.png"}
+                />
+                <FeaturedEvent
+                  name="Housing Fair"
+                  description="We’re hosting a Housing Fair, so make sure you save the date! Whether you’re living in student accommodation or the local community, this will be a great place to start as you begin thinking about where you’ll be living next year."
+                  location="Birmingham, UK"
+                  capacity={100}
+                  ticketsSold={50}
+                  eventStartDate={1730804400}
+                  eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
+                  imageURL={"https://www.guildofstudents.com/asset/Event/41111/Housing-Fair-Web-Event.png"}
+                />
               </section>
             </main>
             <Footer />
@@ -68,4 +99,4 @@ export default function Home() {
       </div>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/components/custom/FeaturedEvent.tsx b/components/custom/FeaturedEvent.tsx
new file mode 100644
index 0000000..a1e1c51
--- /dev/null
+++ b/components/custom/FeaturedEvent.tsx
@@ -0,0 +1,46 @@
+'use client';
+import React from 'react';
+import {
+    Card,
+    CardHeader,
+    CardFooter,
+    CardTitle,
+    CardDescription,
+    CardContent,
+} from '@/components/ui/card';
+
+interface props {
+    name: string;
+    description: string;
+    location: string;
+    capacity: number;
+    ticketsSold: number;
+    eventStartDate: number;
+    eventHost: string;
+    imageURL: string | null;
+}
+
+const FeaturedEvent = ({
+    name, description, location, capacity, ticketsSold, eventStartDate, eventHost, imageURL
+}: props) => {
+    return <Card>
+        <CardHeader>
+            {imageURL && <img src={imageURL}></img>}
+            <CardTitle>
+            {name}
+            </CardTitle>
+            <CardDescription>
+            {location}<br />
+            {new Date(eventStartDate*1000).toLocaleString()}
+            </CardDescription>
+        </CardHeader>
+        <CardContent>
+            {description}
+        </CardContent>
+        <CardFooter>
+            <i>Host: {eventHost.substring(0, 8)}...{eventHost.substring(eventHost.length-3)}</i>
+        </CardFooter>
+    </Card>
+}
+
+export default FeaturedEvent;
\ No newline at end of file

From 6cb2481bc60fc8420af2200da8001e2ab0a92f70 Mon Sep 17 00:00:00 2001
From: Shay Patel <shay@shay.services>
Date: Sat, 26 Oct 2024 20:32:28 +0100
Subject: [PATCH 05/11] Allow any in certain situations

---
 .eslintrc.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 1a1ad7a..c9fcf13 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,7 @@
 {
   "extends": ["next/core-web-vitals", "next/typescript"],
   "rules": {
-    "@next/next/no-img-element": "off"
+    "@next/next/no-img-element": "off",
+    "@typescript-eslint/no-explicit-any": "off"
   }
 }

From 6dd271d9a81398014d870981d4520621b8fd1afe Mon Sep 17 00:00:00 2001
From: Shay Patel <shay@shay.services>
Date: Sat, 26 Oct 2024 20:34:01 +0100
Subject: [PATCH 06/11] Fix warnings

---
 app/events/page.tsx                 | 2 +-
 app/page.tsx                        | 6 ------
 components/custom/FeaturedEvent.tsx | 6 ++----
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/app/events/page.tsx b/app/events/page.tsx
index 1aa11f6..75825ca 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -149,7 +149,7 @@ const EventsPage: React.FC = () => {
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, []);
+  }, [searchParams]);
 
   return (
     <div className="relative min-h-screen overflow-hidden">
diff --git a/app/page.tsx b/app/page.tsx
index c1413cd..c66eab0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -65,8 +65,6 @@ export default function Home() {
                   name="FAB XO Halloween"
                   description="Halloween is upon us and is one of the biggest nights of the FAB XO calendar.  Fancy dress is encouraged! So have your fancy dress ready and we look forward to seeing who have the best fancy dress on the night!  As a special treat we will be serving our very own witches brew!!!"
                   location="Birmingham, UK"
-                  capacity={100}
-                  ticketsSold={50}
                   eventStartDate={1729980000}
                   eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
                   imageURL={"https://www.guildofstudents.com/asset/Event/7572/Halloween-Fab-XO-Web-Event.jpg"}
@@ -75,8 +73,6 @@ export default function Home() {
                   name="Halls Halloween Spooktacular"
                   description="Put on your spookiest costume and head on down to Pritchatts Park and join your Event Activators for our ResLife SPOOKTACULAR on Wednesday 30th October 5-8pm."
                   location="Birmingham, UK"
-                  capacity={100}
-                  ticketsSold={50}
                   eventStartDate={1730307600}
                   eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
                   imageURL={"https://www.guildofstudents.com/asset/Event/41187/Spooktacular-Web-Event-2024.png"}
@@ -85,8 +81,6 @@ export default function Home() {
                   name="Housing Fair"
                   description="We’re hosting a Housing Fair, so make sure you save the date! Whether you’re living in student accommodation or the local community, this will be a great place to start as you begin thinking about where you’ll be living next year."
                   location="Birmingham, UK"
-                  capacity={100}
-                  ticketsSold={50}
                   eventStartDate={1730804400}
                   eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
                   imageURL={"https://www.guildofstudents.com/asset/Event/41111/Housing-Fair-Web-Event.png"}
diff --git a/components/custom/FeaturedEvent.tsx b/components/custom/FeaturedEvent.tsx
index a1e1c51..50ab18d 100644
--- a/components/custom/FeaturedEvent.tsx
+++ b/components/custom/FeaturedEvent.tsx
@@ -13,19 +13,17 @@ interface props {
     name: string;
     description: string;
     location: string;
-    capacity: number;
-    ticketsSold: number;
     eventStartDate: number;
     eventHost: string;
     imageURL: string | null;
 }
 
 const FeaturedEvent = ({
-    name, description, location, capacity, ticketsSold, eventStartDate, eventHost, imageURL
+    name, description, location, eventStartDate, eventHost, imageURL
 }: props) => {
     return <Card>
         <CardHeader>
-            {imageURL && <img src={imageURL}></img>}
+            {imageURL && <img src={imageURL} alt={name}></img>}
             <CardTitle>
             {name}
             </CardTitle>

From 2235ae9851170cd8f12e6f5f941ecf9b7fbe8777 Mon Sep 17 00:00:00 2001
From: sid <35936587+siddharth-shringarpure@users.noreply.github.com>
Date: Sat, 26 Oct 2024 20:40:04 +0100
Subject: [PATCH 07/11] =?UTF-8?q?=E2=9E=95=20Modified=20config=20files=20f?=
 =?UTF-8?q?or=20Aceternity.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json  | 12 +++++++++---
 package.json       |  3 ++-
 tailwind.config.ts | 46 +++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ea562bf..1735469 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "next": "14.2.13",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "tailwind-merge": "^2.5.2",
+        "tailwind-merge": "^2.5.4",
         "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
@@ -39,6 +39,7 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "@types/tailwindcss": "^3.0.11",
         "chai": "^4.2.0",
         "eslint": "^8",
         "eslint-config-next": "14.2.13",
@@ -7461,6 +7462,13 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/@types/tailwindcss": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/tailwindcss/-/tailwindcss-3.0.11.tgz",
+      "integrity": "sha512-PR+BOIrI+rxteHwFvkfIOty+PDJwTG4ute3alxSSXpF/xKpryO1room265m46Auyae0VwqUYs3PuVEOF9Oil3w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.33",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
@@ -13016,7 +13024,6 @@
       "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.5.tgz",
       "integrity": "sha512-HTm14iMQKK2FjFLRTM5lAVcyaUzOnqbPtesFIvREgXpJHdQm8bWS+GkQgIkfaBYRHuCnea7w8UVNfwiAQhlr9A==",
       "dev": true,
-      "hasInstallScript": true,
       "optional": true,
       "dependencies": {
         "node-gyp-build": "^4.3.0"
@@ -13379,7 +13386,6 @@
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.7.tgz",
       "integrity": "sha512-vLt1O5Pp+flcArHGIyKEQq883nBt8nN8tVBcoL0qUXj2XT1n7p70yGIq2VK98I5FdZ1YHc0wk/koOnHjnXWk1Q==",
       "dev": true,
-      "hasInstallScript": true,
       "optional": true,
       "dependencies": {
         "node-gyp-build": "^4.3.0"
diff --git a/package.json b/package.json
index 74f4bca..54c4813 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "next": "14.2.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
@@ -43,6 +43,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/tailwindcss": "^3.0.11",
     "chai": "^4.2.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.13",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5ea29e2..01d6ddf 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,4 +1,10 @@
 import type { Config } from 'tailwindcss';
+import tailwindcssAnimate from 'tailwindcss-animate';
+
+type ColorValue = string | ColorDictionary;
+interface ColorDictionary {
+  [colorName: string]: ColorValue;
+}
 
 const config: Config = {
   darkMode: ['class'],
@@ -68,6 +74,44 @@ const config: Config = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [tailwindcssAnimate, addVariablesForColors],
 };
+
 export default config;
+
+// Plugin to add each Tailwind color as a CSS variable
+function addVariablesForColors({
+  addBase,
+  theme,
+}: {
+  addBase: (styles: Record<string, Record<string, string>>) => void;
+  theme: (path: string) => unknown;
+}) {
+  const colors = theme('colors') as ColorDictionary;
+  const flattenedColors = flattenColors(colors);
+  const newVars = Object.fromEntries(
+    Object.entries(flattenedColors).map(([key, val]) => [`--${key}`, val])
+  );
+
+  addBase({
+    ':root': newVars,
+  });
+}
+
+// Recursive function to flatten nested color objects
+function flattenColors(
+  colors: ColorDictionary,
+  prefix = ''
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const [key, value] of Object.entries(colors)) {
+    if (typeof value === 'string') {
+      // If the value is a string, add it to the result
+      result[prefix + key] = value;
+    } else if (typeof value === 'object' && value !== null) {
+      // If the value is an object, recursively flatten it
+      Object.assign(result, flattenColors(value, `${prefix}${key}-`));
+    }
+  }
+  return result;
+}

From 1ede2133b39175ec455f74ae11bf0d499a1931d4 Mon Sep 17 00:00:00 2001
From: Ayush Acharjya <ayushacharjya@gmail.com>
Date: Sat, 26 Oct 2024 21:05:00 +0100
Subject: [PATCH 08/11] update ticket cost

---
 lib/buyHandler.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/buyHandler.ts b/lib/buyHandler.ts
index 0f8530d..dfd2808 100644
--- a/lib/buyHandler.ts
+++ b/lib/buyHandler.ts
@@ -38,7 +38,8 @@ export const buyHandler = async (
     const signer = provider.getSigner();
     const contract = getContract().connect(signer);
 
-    const ticketCost = await contract.getEventPriceFlare(eventId);
+    let ticketCost = await contract.getEventPriceFlare(eventId);
+    ticketCost = ticketCost.mul(105).div(100);
     const balance = await provider.getBalance(await signer.getAddress());
 
     if (balance.lt(ticketCost)) {

From 9071da494c9a5477b9d8fb4ab6250f0f7ddbb7c5 Mon Sep 17 00:00:00 2001
From: Shay Patel <shay@shay.services>
Date: Sat, 26 Oct 2024 21:15:16 +0100
Subject: [PATCH 09/11] Load search query from URL parameter

---
 app/events/page.tsx | 41 ++++++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/app/events/page.tsx b/app/events/page.tsx
index 75825ca..11473a2 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, Suspense } from 'react';
 import Header from '../../components/custom/header';
 import Footer from '../../components/custom/footer';
 import { useSearchParams } from 'next/navigation';
@@ -63,7 +63,7 @@ const fetchEvents = (): Event[] => {
 const EventsPage: React.FC = () => {
   const [events, setEvents] = useState<Event[]>([]);
   const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
-  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [searchQuery, setSearchQuery] = useState<string>("");
   const [hoveredEventId, setHoveredEventId] = useState<number | null>(null);
   const [sortOption, setSortOption] = useState<string>(''); // Track sorting option
   const [filterOptions, setFilterOptions] = useState<string[]>([]); // Track applied filters
@@ -71,8 +71,6 @@ const EventsPage: React.FC = () => {
   const [showSortMenu, setShowSortMenu] = useState<boolean>(false);
   const [showFilterMenu, setShowFilterMenu] = useState<boolean>(false);
 
-  const searchParams = useSearchParams();
-
   const sortRef = useRef<HTMLDivElement>(null);
   const filterRef = useRef<HTMLDivElement>(null);
 
@@ -82,6 +80,17 @@ const EventsPage: React.FC = () => {
     setFilteredEvents(eventsData);
   }, []);
 
+  const SearchBox = () => {
+    setSearchQuery(useSearchParams().get("q") || "");
+    return <input
+      type="text"
+      placeholder="Search events..."
+      value={searchQuery}
+      onChange={(e) => setSearchQuery(e.target.value)}
+      className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md"
+    />
+  };
+
   useEffect(() => {
     let filtered = events.filter((event) =>
       ['name', 'date', 'location', 'description', 'host'].some((key) =>
@@ -143,13 +152,10 @@ const EventsPage: React.FC = () => {
 
   useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside);
-    if (searchParams.get("q")) {
-      setSearchQuery(searchParams.get("q")!);
-    };
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [searchParams]);
+  }, []);
 
   return (
     <div className="relative min-h-screen overflow-hidden">
@@ -167,13 +173,18 @@ const EventsPage: React.FC = () => {
 
       <div className="relative z-20 container mx-auto p-4 pt-16">
         <div className="mb-6">
-          <input
-            type="text"
-            placeholder="Search events..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md"
-          />
+          <Suspense fallback={
+            <input
+              type="text"
+              placeholder="Search events..."
+              disabled={true}
+              value="loading..."
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md"
+            />
+          }>
+            <SearchBox />
+          </Suspense>
           <div className="flex mt-4 space-x-4">
             {/* Sort Button and Dropdown */}
             <div className="relative" ref={sortRef}>

From c0e0f51309c4b464512be53631e6176da930f95e Mon Sep 17 00:00:00 2001
From: Ayush Acharjya <ayushacharjya@gmail.com>
Date: Sat, 26 Oct 2024 21:59:48 +0100
Subject: [PATCH 10/11] add temp env

---
 .env.example | 2 ++
 .gitignore   | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)
 create mode 100644 .env.example

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..e06dfc2
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_RPC_URL=
+NEXT_PUBLIC_CONTRACT_ADDRESS=
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index f7e1f5a..f9fcfb5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,7 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*
+.env
 .local
 
 # vercel

From 64b546975e322cb2b0c60819a1597f9b5784a4a2 Mon Sep 17 00:00:00 2001
From: sid <35936587+siddharth-shringarpure@users.noreply.github.com>
Date: Sat, 26 Oct 2024 22:08:48 +0100
Subject: [PATCH 11/11] =?UTF-8?q?=E2=9C=A8=20Utilised=20Aceternity=20flip-?=
 =?UTF-8?q?words=20to=20enhance=20home=20page.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/page.tsx                 | 48 ++++++++++++++----
 components/ui/flip-words.tsx | 98 ++++++++++++++++++++++++++++++++++++
 2 files changed, 136 insertions(+), 10 deletions(-)
 create mode 100644 components/ui/flip-words.tsx

diff --git a/app/page.tsx b/app/page.tsx
index c66eab0..775ec3d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,6 +7,9 @@ import { Input } from '@/components/ui/input';
 import FeaturedEvent from '@/components/custom/FeaturedEvent';
 import { Button } from '@/components/ui/button';
 
+import React from 'react';
+import { FlipWords } from '@/components/ui/flip-words';
+
 export default function Home() {
   const router = useRouter();
   const [isClient, setIsClient] = useState(false);
@@ -17,10 +20,19 @@ export default function Home() {
   }, []);
 
   function searchForEvents() {
-    if (inputRef.current.value == "") return;
-    router.replace("/events?q=" + encodeURIComponent(inputRef.current.value));
+    if (inputRef.current.value == '') return;
+    router.replace('/events?q=' + encodeURIComponent(inputRef.current.value));
   }
 
+  const words = [
+    'adventure',
+    'concert',
+    'outing',
+    'journey',
+    'hackathon',
+    'conference',
+  ];
+
   return (
     <>
       <Header />
@@ -44,9 +56,17 @@ export default function Home() {
         {/* Page Content Over the Video */}
         <div className="relative z-20 min-h-screen bg-gradient-to-b from-transparent to-gray-900 pt-20">
           <div className="container mx-auto p-4">
-            <h1 className="text-4xl font-bold text-white text-shadow-lg">
-              Book your next adventure <div className="inline bg-white p-2 rounded-lg shadow-lg text-black">on the <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-pink-600">Flare</span> blockchain</div>
-            </h1>
+            <div className="container mx-auto justify-center items-center p-4">
+              <div className="text-4xl font-bold text-white text-shadow-lg">
+                Book your next
+                <FlipWords
+                  words={words}
+                  className="text-light-purple text-opacity-75"
+                />
+                on the Flare blockchain.
+              </div>
+            </div>
+
             <div className="flex items-center justify-center mt-6 flex-col gap-4">
               <Input
                 type="text"
@@ -57,7 +77,9 @@ export default function Home() {
               <Button
                 className="bg-pink-600 bg-opacity-50 text-white px-4 py-6 text-lg w-full hover:bg-pink-500"
                 onClick={searchForEvents}
-              >Search for events</Button>
+              >
+                Search for events
+              </Button>
             </div>
             <main>
               <section className="mb-8 mt-4 mx-auto grid grid-cols-4 gap-4">
@@ -67,7 +89,9 @@ export default function Home() {
                   location="Birmingham, UK"
                   eventStartDate={1729980000}
                   eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
-                  imageURL={"https://www.guildofstudents.com/asset/Event/7572/Halloween-Fab-XO-Web-Event.jpg"}
+                  imageURL={
+                    'https://www.guildofstudents.com/asset/Event/7572/Halloween-Fab-XO-Web-Event.jpg'
+                  }
                 />
                 <FeaturedEvent
                   name="Halls Halloween Spooktacular"
@@ -75,7 +99,9 @@ export default function Home() {
                   location="Birmingham, UK"
                   eventStartDate={1730307600}
                   eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
-                  imageURL={"https://www.guildofstudents.com/asset/Event/41187/Spooktacular-Web-Event-2024.png"}
+                  imageURL={
+                    'https://www.guildofstudents.com/asset/Event/41187/Spooktacular-Web-Event-2024.png'
+                  }
                 />
                 <FeaturedEvent
                   name="Housing Fair"
@@ -83,7 +109,9 @@ export default function Home() {
                   location="Birmingham, UK"
                   eventStartDate={1730804400}
                   eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
-                  imageURL={"https://www.guildofstudents.com/asset/Event/41111/Housing-Fair-Web-Event.png"}
+                  imageURL={
+                    'https://www.guildofstudents.com/asset/Event/41111/Housing-Fair-Web-Event.png'
+                  }
                 />
               </section>
             </main>
@@ -93,4 +121,4 @@ export default function Home() {
       </div>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/components/ui/flip-words.tsx b/components/ui/flip-words.tsx
new file mode 100644
index 0000000..20f74d1
--- /dev/null
+++ b/components/ui/flip-words.tsx
@@ -0,0 +1,98 @@
+'use client';
+import React, { useCallback, useEffect, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+export const FlipWords = ({
+  words,
+  duration = 3000,
+  className,
+}: {
+  words: string[];
+  duration?: number;
+  className?: string;
+}) => {
+  const [currentWord, setCurrentWord] = useState(words[0]);
+  const [isAnimating, setIsAnimating] = useState<boolean>(false);
+
+  // thanks for the fix Julian - https://github.com/Julian-AT
+  const startAnimation = useCallback(() => {
+    const word = words[words.indexOf(currentWord) + 1] || words[0];
+    setCurrentWord(word);
+    setIsAnimating(true);
+  }, [currentWord, words]);
+
+  useEffect(() => {
+    if (!isAnimating)
+      setTimeout(() => {
+        startAnimation();
+      }, duration);
+  }, [isAnimating, duration, startAnimation]);
+
+  return (
+    <AnimatePresence
+      onExitComplete={() => {
+        setIsAnimating(false);
+      }}
+    >
+      <motion.div
+        initial={{
+          opacity: 0,
+          y: 10,
+        }}
+        animate={{
+          opacity: 1,
+          y: 0,
+        }}
+        transition={{
+          type: 'spring',
+          stiffness: 100,
+          damping: 10,
+        }}
+        exit={{
+          opacity: 0,
+          y: -40,
+          x: 40,
+          filter: 'blur(8px)',
+          scale: 2,
+          position: 'absolute',
+        }}
+        className={cn(
+          'z-10 inline-block relative text-left text-neutral-900 dark:text-neutral-100 px-2',
+          className
+        )}
+        key={currentWord}
+      >
+        {/* edit suggested by Sajal: https://x.com/DewanganSajal */}
+        {currentWord.split(' ').map((word, wordIndex) => (
+          <motion.span
+            key={word + wordIndex}
+            initial={{ opacity: 0, y: 10, filter: 'blur(8px)' }}
+            animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
+            transition={{
+              delay: wordIndex * 0.3,
+              duration: 0.3,
+            }}
+            className="inline-block whitespace-nowrap"
+          >
+            {word.split('').map((letter, letterIndex) => (
+              <motion.span
+                key={word + letterIndex}
+                initial={{ opacity: 0, y: 10, filter: 'blur(8px)' }}
+                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
+                transition={{
+                  delay: wordIndex * 0.3 + letterIndex * 0.05,
+                  duration: 0.2,
+                }}
+                className="inline-block"
+              >
+                {letter}
+              </motion.span>
+            ))}
+            <span className="inline-block">&nbsp;</span>
+          </motion.span>
+        ))}
+      </motion.div>
+    </AnimatePresence>
+  );
+};