NSA Compliance (#3)

* Add: sign-in alert notice

* Splash page design

* Add: Splash page link to previous year's site

* Add: required inidicator on registration fields

apps/web/src/app/globals.css

@@ -46,6 +46,9 @@
 		--gradient-color-2: #3366ff;
 		--gradient-color-3: #002db3;
 		--gradient-color-4: #1952cc;
+
+		--forest-green: 77, 21%, 37%;
+		--pixy-blue: 192, 94%, 63%;
 	}
 
 	.dark {
@@ -115,6 +118,12 @@
 	/* made at https://learnui.design/tools/gradient-generator.html */
 }
 
+.hero-section {
+	background-image: url("/design/datathon_bg_full.svg");
+	background-position: center;
+	background-size: cover
+}
+
 svg.curved-title {
 	transform: rotate(0);
 }

apps/web/src/app/page.tsx

@@ -23,7 +23,7 @@ const oswald = Oswald({
 
 export default function Home() {
 	return (
-		<div className={`${oswald.className} w-full overflow-hidden`}>
+		<div className={`${oswald.className} overflow-hidden`}>
 			<Navbar />
 			{/* <MLHBadge /> */}
 			<main className="overflow-hidden">

apps/web/src/app/sign-in/[[...sign-in]]/page.tsx

@@ -1,8 +1,22 @@
 import { SignIn } from "@clerk/nextjs";
+import {
+	Alert,
+	AlertDescription,
+	AlertTitle,
+} from "@/components/shadcn/ui/alert";
+
+import { CircleAlert } from "lucide-react";
 
 export default function Page() {
 	return (
-		<div className="flex min-h-screen items-center justify-center">
+		<div className="flex min-h-screen flex-col items-center justify-center gap-y-8">
+			<Alert className="max-w-xl">
+				<CircleAlert className="h-4 w-4" />
+				<AlertTitle>NOTE</AlertTitle>
+				<AlertDescription>
+					You can sign in with just your email address below!
+				</AlertDescription>
+			</Alert>
 			<SignIn afterSignUpUrl={"/register"} afterSignInUrl={"/dash/"} />
 		</div>
 	);

apps/web/src/components/landing/Hero.tsx

@@ -13,34 +13,28 @@ const berkshire = Berkshire_Swash({
 
 export default function Hero() {
 	return (
-		<section className="wild-gradient h-screen w-full">
-			<div className="flex h-full w-full flex-col items-center">
-				<div className="text-center">
-					<h1 className={`text-8xl ${berkshire.className} mt-32`}>
-						<ReactCurvedText
-							text="Rowdy Datathon"
-							width={750}
-							height={225}
-							cx={750 / 2}
-							cy={350}
-							rx={1000 / 2.5}
-							ry={250}
-							startOffset={160}
-							reversed={true}
-							textProps={{
-								style: {
-									// textAnchor: "middle",
-								},
-							}}
-							// svgProps={{ className: "curved-title" }}
-						/>
-					</h1>
-					<h2 className="font-roca mx-auto w-fit rounded-full bg-black/10 p-1 text-2xl">
+		<section className="hero-section relative z-0 h-screen w-full">
+			<div className="z-10 flex h-full w-full flex-col items-center">
+				<div className="mt-32 w-full text-center">
+					<Image
+						src={"/design/datathon_title.svg"}
+						width={750}
+						height={32}
+						alt="Rowdy Datathon"
+						className="mx-auto h-auto w-3/4"
+					></Image>
+					<h2 className="font-roca z-10 mx-auto w-fit rounded-full bg-black/10 p-1 text-2xl">
 						OCTOBER 5-6 @ UT SAN ANTONIO
 					</h2>
 				</div>
+				<Link
+					href="/sign-up"
+					className="bg-forest-green z-20 mt-16 rounded-full p-2"
+				>
+					<h4>Click Here To Register!</h4>
+				</Link>
 			</div>
-			<div className="absolute top-[85dvh] flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-4">
+			{/* <div className="absolute top-[85dvh] flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-4">
 				<div className="max-h-[50px] overflow-hidden">
 					<Link
 						href={
@@ -54,6 +48,18 @@ export default function Hero() {
 						/>
 					</Link>
 				</div>
+			</div> */}
+			<div className="fixed bottom-0 left-0 p-8 text-center hover:scale-125">
+				<Link href="https://2023.rowdydatathon.org" className="z-20">
+					<Image
+						src="/design/rd23_ghost.svg"
+						width={64}
+						height={64}
+						className="hover:drop-shadow-white mx-auto hover:drop-shadow-lg"
+						alt="Cowboy ghost from Rowdy Datathon 2023"
+					></Image>
+					<h5>Previous year</h5>
+				</Link>
 			</div>
 		</section>
 	);

apps/web/src/components/registration/RegisterForm.tsx

@@ -79,6 +79,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 			hackerTag: "",
 			heardAboutEvent: "" as any,
 			levelOfStudy: "" as any,
+			softwareBuildingExperience: "Beginner",
 			linkedin: "",
 			personalWebsite: "",
 			profileDiscordName: "",
@@ -205,7 +206,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="firstName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>First Name</FormLabel>
+										<FormLabel>First Name*</FormLabel>
 										<FormControl>
 											<Input
 												placeholder="Some"
@@ -221,7 +222,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="lastName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Last Name</FormLabel>
+										<FormLabel>Last Name*</FormLabel>
 										<FormControl>
 											<Input
 												placeholder="One"
@@ -237,7 +238,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="email"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Email</FormLabel>
+										<FormLabel>Email*</FormLabel>
 										<FormControl>
 											<Input
 												readOnly={
@@ -257,7 +258,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="age"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Age</FormLabel>
+										<FormLabel>Age*</FormLabel>
 										<FormControl>
 											<Input type="number" {...field} />
 										</FormControl>
@@ -270,7 +271,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="gender"
 								render={({ field }) => (
 									<FormItem className="col-span-2">
-										<FormLabel>Gender</FormLabel>
+										<FormLabel>Gender*</FormLabel>
 										<Select
 											onValueChange={field.onChange}
 											defaultValue={field.value}
@@ -309,7 +310,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="race"
 								render={({ field }) => (
 									<FormItem className="col-span-2">
-										<FormLabel>Race</FormLabel>
+										<FormLabel>Race*</FormLabel>
 										<Select
 											onValueChange={field.onChange}
 											defaultValue={field.value}
@@ -352,7 +353,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="ethnicity"
 								render={({ field }) => (
 									<FormItem className="col-span-2">
-										<FormLabel>Ethnicity</FormLabel>
+										<FormLabel>Ethnicity*</FormLabel>
 										<Select
 											onValueChange={field.onChange}
 											defaultValue={field.value}
@@ -394,7 +395,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="university"
 								render={({ field }) => (
 									<FormItem className="col-span-2 flex flex-col">
-										<FormLabel>University</FormLabel>
+										<FormLabel>University*</FormLabel>
 										<Popover>
 											<PopoverTrigger asChild>
 												<FormControl>
@@ -471,7 +472,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="major"
 								render={({ field }) => (
 									<FormItem className="col-span-2 flex flex-col">
-										<FormLabel>Major</FormLabel>
+										<FormLabel>Major*</FormLabel>
 										<Popover>
 											<PopoverTrigger asChild>
 												<FormControl>
@@ -548,7 +549,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="levelOfStudy"
 								render={({ field }) => (
 									<FormItem className="col-span-2 flex flex-col md:col-span-1">
-										<FormLabel>Level of Study</FormLabel>
+										<FormLabel>Level of Study*</FormLabel>
 										<Select
 											onValueChange={field.onChange}
 											defaultValue={field.value}
@@ -598,7 +599,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 										}`}
 									>
 										<FormLabel>
-											{c.localUniversityShortIDName}
+											{c.localUniversityShortIDName}*
 										</FormLabel>
 										<FormControl>
 											<Input
@@ -723,7 +724,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="shirtSize"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Shirt Size</FormLabel>
+										<FormLabel>Shirt Size*</FormLabel>
 										<Select
 											onValueChange={field.onChange}
 											defaultValue={field.value}
@@ -948,7 +949,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="hackerTag"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>HackerTag</FormLabel>
+										<FormLabel>HackerTag*</FormLabel>
 										<FormControl>
 											<div className="flex">
 												<div className="flex h-10 w-10 items-center justify-center rounded-l bg-accent text-lg font-light text-primary">
@@ -970,7 +971,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="profileDiscordName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Discord Username</FormLabel>
+										<FormLabel>Discord Username*</FormLabel>
 										<FormControl>
 											<Input
 												placeholder={`${c.hackathonName.toLowerCase()} or ${c.hackathonName.toLowerCase()}#1234`}
@@ -986,7 +987,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="pronouns"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Pronouns</FormLabel>
+										<FormLabel>Pronouns*</FormLabel>
 										<FormControl>
 											<Input {...field} />
 										</FormControl>
@@ -1001,7 +1002,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								name="bio"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Bio</FormLabel>
+										<FormLabel>Bio*</FormLabel>
 										<FormControl>
 											<Textarea
 												placeholder="Hello! I'm..."
@@ -1031,7 +1032,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 								render={({ field }) => (
 									<FormItem className="flex flex-col items-start">
 										<FormLabel className="pb-2 text-left">
-											Skills
+											Skills*
 										</FormLabel>
 										<FormControl className="min-h-[80px]">
 											<TagInput

apps/web/src/components/shadcn/ui/alert.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils/client/cn";
+
+const alertVariants = cva(
+	"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+	{
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive:
+					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+const Alert = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+	<div
+		ref={ref}
+		role="alert"
+		className={cn(alertVariants({ variant }), className)}
+		{...props}
+	/>
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+	<h5
+		ref={ref}
+		className={cn(
+			"mb-1 font-medium leading-none tracking-tight",
+			className,
+		)}
+		{...props}
+	/>
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("text-sm [&_p]:leading-relaxed", className)}
+		{...props}
+	/>
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

apps/web/src/components/shared/Navbar.tsx

@@ -41,7 +41,9 @@ export default async function Navbar({ className }: NavbarProps) {
 								height={32}
 							/>
 							{/* <div className="bg-muted-foreground h-[45%] rotate-[25deg] w-[2px]" /> */}
-							<h2 className={`${berkshire.className} text-lg font-bold text-[#3186AF] dark:text-[#49D6F9]`}>
+							<h2
+								className={`${berkshire.className} text-lg font-bold text-[#3186AF] dark:text-[#49D6F9]`}
+							>
 								{c.hackathonName}
 							</h2>
 						</Link>
@@ -83,7 +85,7 @@ export default async function Navbar({ className }: NavbarProps) {
 											Sign In
 										</Button>
 									</Link>
-									<Link href={"/register"}>
+									<Link href={"/sign-up"}>
 										<Button>Register</Button>
 									</Link>
 								</>

apps/web/src/components/shared/ProfileButton.tsx

@@ -127,7 +127,7 @@ export default async function ProfileButton() {
 				>
 					<Avatar className="h-8 w-8">
 						<AvatarImage
-							src={user.profileData.profilePhoto}
+							src={user.profileData?.profilePhoto}
 							alt="@shadcn"
 						/>
 						<AvatarFallback>

apps/web/src/validators/shared/RegisterForm.ts

@@ -94,6 +94,7 @@ export const RegisterFormValidator = z.object({
 	]),
 	heardAboutEvent: z
 		.union([
+			z.literal(""),
 			z.literal("Instagram"),
 			z.literal("Class Presentation"),
 			z.literal("Twitter"),
@@ -144,7 +145,6 @@ export const RegisterFormValidator = z.object({
 	pronouns: z.string().min(1).max(15),
 	bio: z
 		.string()
-		.min(1)
 		.max(500, { message: "Bio must be less than 500 characters." })
 		.refine(noProfanityValidator, noProfanityMessage),
 	skills: z.array(