@@ -57,7 +57,7 @@ export default function Dashboard() {
className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6"
>
+
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index e743475..66540a7 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -1,19 +1,74 @@
"use client";
-import Calendar from "@/components/events/Calendar";
-import MonthlyEvents from "@/components/events/MonthlyEvents";
+import Calendar from "@/components/events/CalendarMonthView/Calendar";
+import FiveDayCalendar from "@/components/events/CalendarWeekView/WeekViewCalendar";
+import MonthlyEvents from "@/components/events/CalendarListView/MonthlyEvents";
+import { FaRegCalendarAlt, FaList } from "react-icons/fa";
import Footer from "@/components/Footer";
+import { Clock, Calendar as CalendarIcon, List } from "lucide-react";
+import { useState } from "react";
export default function Events() {
+ const [calendarView, setCalendarView] = useState<"month" | "day" | "list">(
+ "month",
+ );
+
return (
<>
-
-
-
-
+
+
Events
+
+ Discover everything you need to know about upcoming{" "}
+ club events and{" "}
+ exclusive opportunities.
+
+
Views:
+
+ {/* buttons to change view */}
+
+
+
+
+
+ {/* end buttons */}
+
+ {/* Views */}
+ {calendarView === "day" &&
}
+ {calendarView === "month" &&
}
+ {calendarView === "list" &&
}
+
-
+
);
}
diff --git a/src/app/globals.css b/src/app/globals.css
index 1a67f4b..5784955 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@tailwind base;
@tailwind components;
@@ -21,27 +21,11 @@ body {
overflow-x: hidden;
}
-#hero {
- background-image: url("/landing/bg.svg");
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
-}
-
-.noise-bg {
- position: fixed;
- 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;
+.footer-clip-path {
+ clip-path: polygon(15% 34%, 100% 0%, 100% 100%, 0% 100%);
}
+/* Events Page */
.monthly-event {
background: radial-gradient(
138.71% 110.11% at 93.15% -36.58%,
@@ -54,6 +38,7 @@ body {
border: 1px solid #4255f911;
}
+/* About Page */
.about-bg {
background: radial-gradient(
138.71% 110.11% at 93.15% -36.58%,
@@ -67,34 +52,64 @@ body {
border: 1px solid #242424;
}
-.footer-clip-path {
- clip-path: polygon(15% 34%, 100% 0%, 100% 100%, 0% 100%);
-}
-.grad {
- background: linear-gradient(0deg, #4255f922, #080d14);
- filter: blur(20px);
-}
-/* monospace font - will update later */
+/* Landing Page */
-.m {
- font-family: "Space Mono", serif;
+.cta-btn:hover {
+ /* Apply a full (all-around) shadow with #79C7FD */
+ box-shadow: 0 0 16px 4px rgba(121, 199, 253, 0.7);
}
-/* fade background of hero */
+/* infinite carousel */
+
+.scroller-list {
+ list-style: none;
+ flex-shrink: 0;
+ min-width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 16px;
+ /* Remove animation from here so it only applies when all images are loaded */
+}
+.scroller-list.animate-scroll {
+ animation: scroll 24s linear infinite;
+}
-.hero-btn:hover {
- /* Apply a full (all-around) shadow with #79C7FD */
- box-shadow: 0 0 20px 5px rgba(121, 199, 253, 0.7);
+@keyframes scroll {
+ to {
+ transform: translateX(calc(-100% - 16px));
+ }
}
-.hero-fade {
- background: linear-gradient(180deg,#080d1400 0%, #080d14 100%);
+/* Discord PC */
+
+.pc-stand {
+ background: linear-gradient(
+ 180deg,
+ rgba(64, 64, 64, 0.1) 0%,
+ rgba(64, 64, 64, 0.2) 13.27%,
+ rgba(64, 64, 64, 0.25) 27.21%,
+ rgba(64, 64, 64, 0.48) 60.58%,
+ rgba(64, 64, 64, 0.54) 76.36%,
+ rgba(64, 64, 64, 0.45) 92.14%
+ );
}
-.about-fade {
- background: linear-gradient(0deg,#080d1400 0%, #080d14 100%);
+.pc-base {
+ background: linear-gradient(
+ 90deg,
+ rgba(64, 64, 64, 0.6) 0%,
+ rgba(64, 64, 64, 0.3) 6.5%,
+ rgba(64, 64, 64, 0.6) 19.18%,
+ rgba(64, 64, 64, 0.3) 32.93%,
+ rgba(64, 64, 64, 0.3) 66.46%,
+ rgba(64, 64, 64, 0.6) 81%,
+ rgba(64, 64, 64, 0.3) 94%,
+ rgba(64, 64, 64, 0.6) 100%
+ );
+ box-shadow: 0px -7px 2px 0px rgba(0, 0, 0, 0.18);
}
\ No newline at end of file
diff --git a/src/app/icon.ico b/src/app/icon.ico
deleted file mode 100644
index 7610987..0000000
Binary files a/src/app/icon.ico and /dev/null differ
diff --git a/src/app/icon.png b/src/app/icon.png
new file mode 100644
index 0000000..9827d40
Binary files /dev/null and b/src/app/icon.png differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 13708ca..f72ab72 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,18 +1,19 @@
"use client";
import Footer from "@/components/Footer";
import About from "@/components/landing/About";
+import DiscordPC from "@/components/landing/DiscordPc";
import Events from "@/components/landing/Events";
import Faq from "@/components/landing/Faq";
import Hero from "@/components/landing/Hero";
-
const Website = () => {
return (
);
diff --git a/src/components/Buttons/BackButton.tsx b/src/components/Buttons/BackButton.tsx
index a20c583..4dfc440 100644
--- a/src/components/Buttons/BackButton.tsx
+++ b/src/components/Buttons/BackButton.tsx
@@ -13,12 +13,12 @@ const BackButton: React.FC = () => {
return (
);
};
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index be4c7af..b89a147 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,119 +1,94 @@
+import { ArrowUpRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
export default function Footer() {
return (
-