Cm/events page

package.json

@@ -14,8 +14,10 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "firebase": "^10.14.1",
+    "framer-motion": "^11.15.0",
     "lucide-react": "^0.436.0",
     "next": "14.2.6",
+    "ngrok": "^5.0.0-beta.2",
     "puppeteer": "^23.11.1",
     "react": "^18",
     "react-dom": "^18",

src/app/events/page.tsx

@@ -1,13 +1,13 @@
 "use client";
-import Calendar from "@/components/client-events/Calendar";
-import MonthlyEvents from "@/components/client-events/MonthlyEvents";
+import Calendar from "@/components/events/Calendar";
+import MonthlyEvents from "@/components/events/MonthlyEvents";
 
 export default function Events() {
   return (
     <>
-      <div className="bg" />
-      <section className="relative min-h-screen">
-        <div className="mx-auto max-w-7xl px-10 py-8 text-white">
+      <section className="relative min-h-screen bg-[#050a10]">
+        <div className="noise-bg"/>
+        <div className="mx-auto max-w-7xl px-4 md:px-10 pt-24 pb-12 text-white">
           <MonthlyEvents />
           <Calendar />
         </div>

src/app/globals.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Krub:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Michroma&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Michroma&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -15,12 +15,40 @@ textarea {
 }
 
 body {
-  font-family: "Krub", sans-serif;
+  font-family: "Inter", sans-serif;
+  background-color: #ffffff;
+  overflow-x: hidden;
 }
 
-.bg {
-  background: linear-gradient(60deg, #000000, #3c4175);
-  inset: 0;
+#hero {
+  background-image: url("/landing/bg.svg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.noise-bg {
   position: fixed;
-  z-index: -1;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0.02;
+  background:
+    repeating-radial-gradient(#fff 0 0.0001%, #000 0 0.0002%) 50% 0/2500px
+      2500px,
+    repeating-conic-gradient(#fff 0 0.0001%, #000 0 0.0002%) 50% 50%/2500px
+      2500px;
+  background-blend-mode: difference;
+}
+
+.monthly-event {
+  background: radial-gradient(
+      138.71% 110.11% at 93.15% -36.58%,
+      #4255f922 25%,
+      #0f1319 100%
+    ),
+    radial-gradient(61.66% 37.6% at 6.63% 95.08%, #4255f922 25%, #0f1319 100%),
+    rgba(26, 26, 26, 0.43);
+  box-shadow: 0px 0.5px 16px 0px rgba(200, 200, 255, 0.1);
+  border: 1px solid #4255f911;
 }