did a lot of things

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "rac",
+	"name": "buape-com",
 	"version": "0.0.0",
 	"private": true,
 	"type": "module",
@@ -52,6 +52,7 @@
 		"react": "18.3.1",
 		"react-day-picker": "8.10.1",
 		"react-dom": "18.3.1",
+		"react-icons": "^5.3.0",
 		"react-spinners": "0.14.1",
 		"server-only": "0.0.1",
 		"sharp": "^0.33.5",

src/app/Navbar.tsx

@@ -23,7 +23,7 @@ export default async function Navbar() {
 							Service Status
 						</Button>
 					</Link>
-					<Link href={"https://discord.gg/7MUYugRj2T"}>
+					<Link href={"https://discord.gg/bgASSujRMj"}>
 						<Button variant={"nav"}>Join Us on Discord</Button>
 					</Link>
 				</div>

src/app/home/Content.tsx

@@ -3,15 +3,9 @@ import Image from "next/image"
 import Link from "next/link"
 import type { ReactNode } from "react"
 import { Button } from "~/components/ui/button"
-import {
-	Carousel,
-	CarouselContent,
-	CarouselItem,
-	CarouselNext,
-	CarouselPrevious
-} from "~/components/ui/carousel"
 import { cn } from "~/lib/utils"
 import type { ClassValue } from "clsx"
+import Marquee from "~/components/ui/marquee"
 
 type ContentCardData = {
 	name: string
@@ -25,12 +19,14 @@ export type ContentSectionData = {
 	title: string
 	description: string
 	cards: ContentCardData[]
-	carousel?: boolean
+	marquee?: boolean
 }
 
 export function ContentSection(data: ContentSectionData) {
+	const firstRow = data.cards.slice(0, data.cards.length / 2)
+	const secondRow = data.cards.slice(data.cards.length / 2)
 	return (
-		<div className="w-screen bg-[#101013] border border-gray py-20 items-center">
+		<section className="w-screen bg-[#101013] border border-gray py-20 items-center">
 			<div
 				className="max-w-full flex flex-col gap-4 text-center items-center justify-center px-24 lg:px-48"
 				id={data.id}
@@ -39,40 +35,42 @@ export function ContentSection(data: ContentSectionData) {
 				<div className="text-white text-lg font-normal whitespace-pre-wrap">
 					{data.description}
 				</div>
-				{!data.carousel ? (
-					<div className="flex flex-wrap flex-row gap-4 justify-center items-center grow mx-6">
+				{!data.marquee ? (
+					<div className="flex flex-wrap md:flex-row flex-col gap-4 justify-center grow mx-6 items-stretch">
 						{data.cards.map((x) => (
 							<ContentCard {...x} key={x.name} />
 						))}
 					</div>
 				) : (
-					<Carousel
-						className="flex flex-wrap flex-row gap-4 justify-center items-center grow mx-6 w-full"
-						opts={{ align: "start", loop: true }}
-					>
-						<CarouselContent>
-							{data.cards.map((x) => (
-								<CarouselItem
-									className="basis-1/2 md:basis-1/3 xl:basis-1/4 2xl:basis-1/5"
-									key={x.name}
-								>
-									<ContentCard {...x} className="h-32" />
-								</CarouselItem>
+					<div className="w-screen overflow-hidden">
+						<Marquee
+							pauseOnHover
+							className="[--duration:40s] flex items-stretch"
+						>
+							{firstRow.map((x) => (
+								<ContentCard {...x} key={x.name} />
 							))}
-						</CarouselContent>
-						<CarouselPrevious />
-						<CarouselNext />
-					</Carousel>
+						</Marquee>
+						<Marquee
+							reverse
+							pauseOnHover
+							className="[--duration:40s] flex items-stretch"
+						>
+							{secondRow.map((x) => (
+								<ContentCard {...x} key={x.name} />
+							))}
+						</Marquee>
+					</div>
 				)}
 			</div>
-		</div>
+		</section>
 	)
 }
 
 export function JoinTheTeam() {
 	return (
 		<div
-			className="w-screen bg-[#101013] border border-gray py-10 mb-10"
+			className="w-screen bg-[#101013] border border-gray p-10 mb-10"
 			id="join-the-team"
 		>
 			<div className="max-w-full flex flex-col gap-4 text-center items-center justify-center">
@@ -81,7 +79,7 @@ export function JoinTheTeam() {
 					We are always looking to expand our talented team and extensive
 					portfolio. Join the team today!
 				</div>
-				<div className="flex flex-row gap-10 justify-center items-center">
+				<div className="flex md:flex-row flex-col md:gap-10 gap-2 justify-center items-center">
 					<Link href={"https://go.buape.com/apply"} className="w-56">
 						<Button variant={"default"} className="w-full">
 							Apply to join us
@@ -107,11 +105,11 @@ function ContentCard(data: ContentCardData & { className?: ClassValue }) {
 	return (
 		<div
 			className={cn(
-				"grow p-4 bg-dark rounded-xl border-gray border flex-col flex gap-4 shrink-0 basis-0",
+				"grow p-4 bg-dark rounded-xl border-gray border flex-col flex gap-4 shrink-0 basis-0 w-80",
 				data.className || ""
 			)}
 		>
-			<div className="flex flex-row gap-2 items-center shrink grow-0 order-first">
+			<div className="flex flex-row gap-2 items-center order-first">
 				{data.icon ? (
 					<Image
 						src={data.icon}
@@ -130,7 +128,7 @@ function ContentCard(data: ContentCardData & { className?: ClassValue }) {
 					</Link>
 				) : null}
 			</div>
-			<div className="text-sm text-wrap whitespace-pre-wrap text-center`">
+			<div className="text-md text-wrap whitespace-pre-wrap text-center grow">
 				{data.body}
 			</div>
 			{data.linkBottomText && data.link ? (

src/app/home/Footer.tsx

@@ -1,8 +1,6 @@
-import {
-	DiscordLogoIcon,
-	GitHubLogoIcon,
-	TwitterLogoIcon
-} from "@radix-ui/react-icons"
+import { BsDiscord } from "react-icons/bs"
+import { FaGithub } from "react-icons/fa"
+import { FaXTwitter } from "react-icons/fa6"
 import Image from "next/image"
 import Link from "next/link"
 import type { ReactNode } from "react"
@@ -18,10 +16,10 @@ type FooterLink = {
 
 export function Footer({ data }: { data: FooterLinkSection[] }) {
 	return (
-		<div className="flex flex-col bg-dark w-screen container gap-5 px-28">
-			<div className="flex flex-col gap-8 mb-4">
-				<div className="flex flex-row py-20">
-					<div className="flex flex-col gap-2 grow shrink-0">
+		<footer className="flex flex-col bg-dark w-screen container gap-5 overflow-hidden">
+			<div className="flex flex-col gap-8 mb-4 md:px-28 px-10">
+				<div className="flex md:flex-row flex-col md:gap-10 py-20 justify-center">
+					<div className="flex flex-col gap-2 grow shrink-0 md:mb-0 mb-10">
 						<Image
 							src={"https://cdn.buape.com/buape_circle.png"}
 							width={64}
@@ -30,11 +28,12 @@ export function Footer({ data }: { data: FooterLinkSection[] }) {
 						/>
 						<span className="text-white text-2xl font-bold">Buape Studios</span>
 						<span className="text-md">
-							Made in the USA 🇺🇲 <br />
-							Loved by thousands worldwide 🌎
+							Developed by talents worldwide ⚒️
+							<br />
+							Loved by many around the world 🌎
 						</span>
 					</div>
-					<div className="flex flex-row gap-16">
+					<div className="grow grid grid-cols-2 lg:grid-cols-3 gap-16 justify-center">
 						{data.map((x) => (
 							<LinkSection data={x} key={x.title} />
 						))}
@@ -46,24 +45,24 @@ export function Footer({ data }: { data: FooterLinkSection[] }) {
 					</div>
 					<div className="flex flex-row gap-2">
 						<Link href="https://twitter.com/buapestudios">
-							<TwitterLogoIcon />
+							<FaXTwitter />
 						</Link>
 						<Link href="https://discord.gg/7MUYugRj2T">
-							<DiscordLogoIcon />
+							<BsDiscord />
 						</Link>
 						<Link href="https://github.com/buape">
-							<GitHubLogoIcon />
+							<FaGithub />
 						</Link>
 					</div>
 				</div>
 			</div>
-		</div>
+		</footer>
 	)
 }
 
 function LinkSection({ data }: { data: FooterLinkSection }) {
 	return (
-		<div className="flex flex-col gap-6">
+		<div className="flex flex-col gap-6 grow">
 			<div className="text-neutral-400">{data.title}</div>
 			<div className="flex flex-col gap-4">
 				{data.links.map((x) => (

src/app/home/Hero.tsx

@@ -32,7 +32,7 @@ export function Hero() {
 						Our Projects
 					</Button>
 				</Link>
-				<Link href={"https://discord.gg/7MUYugRj2T"} className="w-56">
+				<Link href={"https://discord.gg/bgASSujRMj"} className="w-56">
 					<Button variant={"outline"} className="w-full">
 						Join Us on Discord
 					</Button>