diff --git a/.env.example b/.env.example index db96ace0f..0a09008ff 100644 --- a/.env.example +++ b/.env.example @@ -29,4 +29,5 @@ GOOGLE_CLIENT_EMAIL="" # Minio MINIO_ENDPOINT="" MINIO_ACCESS_KEY="" -MINIO_SECRET_KEY="" \ No newline at end of file +MINIO_SECRET_KEY="" +#can I get a cheese burger \ No newline at end of file diff --git a/apps/club/src/app/contact/_components/assets/abstract-left.tsx b/apps/club/src/app/contact/_components/assets/abstract-left.tsx new file mode 100644 index 000000000..2a0c5915d --- /dev/null +++ b/apps/club/src/app/contact/_components/assets/abstract-left.tsx @@ -0,0 +1,66 @@ +import type { SVGProps } from "react"; +import * as React from "react"; + +const AbstractLeft = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + +); +export default AbstractLeft; diff --git a/apps/club/src/app/contact/_components/assets/abstract-right.tsx b/apps/club/src/app/contact/_components/assets/abstract-right.tsx new file mode 100644 index 000000000..10b948ca0 --- /dev/null +++ b/apps/club/src/app/contact/_components/assets/abstract-right.tsx @@ -0,0 +1,68 @@ +import type { SVGProps } from "react"; +import * as React from "react"; + +const AbstractRight = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + +); +export default AbstractRight; diff --git a/apps/club/src/app/contact/_components/assets/shield.tsx b/apps/club/src/app/contact/_components/assets/shield.tsx new file mode 100644 index 000000000..83746b715 --- /dev/null +++ b/apps/club/src/app/contact/_components/assets/shield.tsx @@ -0,0 +1,20 @@ +import type { SVGProps } from "react"; +import * as React from "react"; + +const Shield = (props: SVGProps) => ( + + + +); +export default Shield; diff --git a/apps/club/src/app/contact/_components/assets/sword-left.tsx b/apps/club/src/app/contact/_components/assets/sword-left.tsx new file mode 100644 index 000000000..39250b511 --- /dev/null +++ b/apps/club/src/app/contact/_components/assets/sword-left.tsx @@ -0,0 +1,5298 @@ +import type { SVGProps } from "react"; +import * as React from "react"; + +const SwordLeft = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); +export default SwordLeft; diff --git a/apps/club/src/app/contact/_components/assets/sword-right.tsx b/apps/club/src/app/contact/_components/assets/sword-right.tsx new file mode 100644 index 000000000..9c7a8da03 --- /dev/null +++ b/apps/club/src/app/contact/_components/assets/sword-right.tsx @@ -0,0 +1,5298 @@ +import type { SVGProps } from "react"; +import * as React from "react"; + +const SvgComponent = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); +export default SvgComponent; diff --git a/apps/club/src/app/contact/_components/contact-form.tsx b/apps/club/src/app/contact/_components/contact-form.tsx new file mode 100644 index 000000000..1115999d0 --- /dev/null +++ b/apps/club/src/app/contact/_components/contact-form.tsx @@ -0,0 +1,153 @@ +"use client"; + +// TABLET PUT EVERYTHING IN ITEMS CENTER AND JUSTIFY CENTER +import React, { useState } from "react"; + +function ContactForm() { + const [formData, setFormData] = useState({ + name: "", + email: "", + subject: "", + message: "", + mentorship: false, + outreach: false, + development: false, + design: false, + }); + + const handleChange = ( + e: React.ChangeEvent, + ) => { + const { name, value } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: value, + })); + }; + + const handleCheckboxChange = (e: React.ChangeEvent) => { + const { name, checked } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: checked, + })); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + const jsonFormData = JSON.stringify(formData); + console.log("The Form:", jsonFormData); + }; + + return ( +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ {["mentorship", "outreach", "development", "design"].map( + (option) => ( + + ), + )} +
+
+ +
+ +
+
+
+ ); +} + +export default ContactForm; diff --git a/apps/club/src/app/contact/_components/header.tsx b/apps/club/src/app/contact/_components/header.tsx new file mode 100644 index 000000000..0f66adc24 --- /dev/null +++ b/apps/club/src/app/contact/_components/header.tsx @@ -0,0 +1,33 @@ +"use client"; + +import React from "react"; + +function Header() { + return ( + //style later contact us will flicker and make contact us larger +
+
+ Contact Us +
+ {/* IPhone SE and iPhone12 pro because width messing up formatting */} +
+ To get in touch with KnightHacks, +
+
+ please fill out the following form and +
+
+ a member of our team will get back to you soon: +
+ {/* Anythilng larger than width 390px */} +
+ To get in touch with KnightHacks, please fill out the following +
+
+ form and a member of our team will get back to you soon: +
+
+ ); +} + +export default Header; diff --git a/apps/club/src/app/contact/_components/left-side.tsx b/apps/club/src/app/contact/_components/left-side.tsx new file mode 100644 index 000000000..e859b766c --- /dev/null +++ b/apps/club/src/app/contact/_components/left-side.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +import AbstractLeft from "./assets/abstract-left"; +import Shield from "./assets/shield"; +import SwordLeft from "./assets/sword-left"; + +function LeftSide() { + return ( +
+
+ + + +
+
+ ); +} + +export default LeftSide; diff --git a/apps/club/src/app/contact/_components/right-side.tsx b/apps/club/src/app/contact/_components/right-side.tsx new file mode 100644 index 000000000..82583c2af --- /dev/null +++ b/apps/club/src/app/contact/_components/right-side.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +import AbstractRight from "./assets/abstract-left"; +import Shield from "./assets/shield"; +import SwordRight from "./assets/sword-left"; + +function RightSide() { + return ( +
+
+ + + +
+
+ ); +} + +export default RightSide; diff --git a/apps/club/src/app/contact/page.tsx b/apps/club/src/app/contact/page.tsx new file mode 100644 index 000000000..b3b35c58d --- /dev/null +++ b/apps/club/src/app/contact/page.tsx @@ -0,0 +1,38 @@ +import React from "react"; + +import ContactForm from "./_components/contact-form"; +import Header from "./_components/header"; +import LeftSide from "./_components/left-side"; +import RightSide from "./_components/right-side"; + +export default function page() { + return ( +
+ {/* left background panel for the swords and etc */} + + + {/* right background panel for the swords and etc */} + + + {/* Main content */} + {/* Main content under 2xl */} +
+
+ +
+ + {/* Main content over 2xl */} +
+
+
+
+
+ +
+
+
+ ); +} diff --git a/apps/club/src/app/globals.css b/apps/club/src/app/globals.css index b7aa4a068..7e60596d7 100644 --- a/apps/club/src/app/globals.css +++ b/apps/club/src/app/globals.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Pragati+Narrow:wght@400;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; @@ -20,3 +22,93 @@ body { background: var(--background); font-family: Arial, Helvetica, sans-serif; } + +input[type="checkbox"].custom-checkbox { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + position: relative; + + background-color: #f4f4ed; + border: 1px solid #000000; + border-radius: 0.25rem; + cursor: pointer; + filter: saturate(200%); +} + +input[type="checkbox"].custom-checkbox:checked { + background-color: #2563eb; + border-color: #2563eb; +} + +input[type="checkbox"].custom-checkbox:checked::after { + content: ""; + position: absolute; + top: 2px; + left: 5px; + width: 4px; + height: 8px; + border: solid white; + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} +@media (min-width: 1024px) { + input[type="checkbox"].custom-checkbox:checked::after { + width: 6px; + height: 12px; + border-width: 0 3px 3px 0; + top: 3px; + left: 8px; + } +} + +@keyframes flicker { + 0%, + 19%, + 21%, + 23%, + 25%, + 30%, + 32%, + 54%, + 55%, + 58%, + 100% { + opacity: 1; + } + 20%, + 24%, + 31%, + 54.9%, + 57% { + opacity: 0.6; + } +} +.flicker { + animation: flicker 10s infinite; +} +.glow { + color: #c084fc; + text-shadow: + 0 0 2px #c084fc, + 0 0 4px #c084fc, + 0 0 7px #9333ea, + 0 0 17px #9333ea, + 0 0 25px #9333ea, + 0 0 38px #9333ea, + 0 0 46px #9333ea, + 0 0 68px #9333ea; +} + +/* abstract shape area 60% */ +.bg-contact-gradient { + background: linear-gradient( + to bottom, + rgba(15, 23, 42, 0) 0%, + rgba(15, 23, 42, 0.52) 30%, + rgba(107, 33, 168, 0.3) 47%, + rgba(61, 28, 105, 0.75) 60%, + rgba(15, 23, 42, 1) 72%, + rgba(15, 23, 42, 0) 100% + ); +} diff --git a/apps/club/tailwind.config.ts b/apps/club/tailwind.config.ts index 918b07fd5..8d4ed195d 100644 --- a/apps/club/tailwind.config.ts +++ b/apps/club/tailwind.config.ts @@ -8,6 +8,7 @@ export default { // those classes are included correctly. content: [...baseConfig.content, "../../packages/ui/src/*.{ts,tsx}"], presets: [baseConfig], + theme: { extend: { backgroundImage: { @@ -31,6 +32,8 @@ export default { }, colors: { background: "hsl(var(--background))", + 950: "#10182B", + cream: "#F4F4ED", }, boxShadow: { impact: ` @@ -52,6 +55,8 @@ export default { ...fontFamily.sans, ], mono: ["var(--font-geist-mono)", ...fontFamily.mono], + narrow: ["Pragati Narrow", ...fontFamily.sans], + prompt: ["Prompt", ...fontFamily.sans], }, animation: { "infinite-scroll": "infinite-scroll 160s linear infinite", @@ -78,6 +83,22 @@ export default { "100%": { transform: "rotate(360deg)" }, }, }, + screens: { + seOnly: { max: "391px" }, + seWidth: { max: "376px" }, + iPadMini: { + raw: "(min-width: 768px) and (max-width: 819px) and (min-height: 1024px)", + }, + iPadPro: { + raw: "(min-width: 1024px) and (max-width: 1366px) and (min-height: 1366px)", + }, + tall: { + raw: "(min-height: 800px) and (max-width: 765px)", + }, + taller: { + raw: "(min-height: 1200px) and (max-width: 1023px)", + }, + }, }, }, } satisfies Config;