Adding events and better why sectino

ui/public/components/JoinForm.js

@@ -1,9 +1,3 @@
-css(`
-    joinform- input::placeholder {
-        color: var(--accent)
-    }
-`)
-
 class JoinForm extends Shadow {
 
     inputStyles(el) {

ui/public/pages/Events.js

@@ -1,6 +1,48 @@
 class Events extends Shadow {
-    render() {
 
+    events = [
+        {
+            date: `January 2, 2025`,
+            title: `Hyperia Winter Ball`,
+            description: `Join us in Austin, Texas for a dance. Live music and drinks will be included. <br>Admission for men is $50, women are free. Open to the public.`,
+            location: `Austin, TX`
+        }
+    ]
+
+    render() {
+        VStack(() => {
+
+            (window.isMobile() ? VStack : HStack)(() => {
+    
+                VStack(() => {
+                    p(`January 2, 2025`)
+    
+                    p(`Hyperia Winter Ball`)
+                    .fontSize(1.2, em)
+    
+                    p(`Austin, TX`)
+
+                })
+
+                p(`Join us in Austin, Texas for a dance. Live music and drinks will be included. <br>Admission for men is $50, women are free. Open to the public.`)
+                    .marginTop(1, em)
+
+                button("Buy Ticket")
+                    .color("var(--darkbrown")
+                    .border("1px solid #ab2f007d")
+                    .background('var(--green)')
+                    .marginLeft("auto")
+            })
+            .gap(3, em)
+            .color("var(--darkbrown)")
+            .background(`var(--accent)`)
+            .padding(1, em)
+            .borderRadius(12, px)
+            .border("2px solid #ab2f007d")
+        })
+        .marginLeft(window.isMobile() ? 0 : 15, vmax)
+        .marginRight(window.isMobile() ? 0 : 15, vmax)
+        .marginTop(15, vmax)
     }
 }
 

ui/public/pages/Join.js

@@ -1,6 +1,21 @@
 class Join extends Shadow {
     render() {
-        p("Membership is invitation-only. Look out for us in person, or come to an event!")
+
+        VStack(() => {
+            p("Membership is invitation-only. But sign up for our newsletter to hear about more events!")
+
+            HStack(() => {
+                input("Email", "40vmin")
+                    .attr({name: "email", type: "email"})
+
+                button("Sign Up")
+                    .width(15, vmin)
+            })
+            .gap(1, em)
+            .marginTop(1, em)
+        })
+        .alignItems("center")
+        .maxWidth(90, vw)
         .x(50, vw).y(50, vh)
         .center()
     }

ui/public/pages/SIgnIn.js

@@ -1,9 +1,3 @@
-css(`
-    signin- input::placeholder {
-        color: var(--accent)
-    }
-`)
-
 class SignIn extends Shadow {
 
     inputStyles(el) {

ui/public/pages/Why.js

@@ -1,7 +1,20 @@
 class Why extends Shadow {
     render() {
-        p("The West is Falling. Why Not?")
-        .x(50, vw).y(50, vh)
+        p(`I grew up going to Classical Christian schools all my life. It was great - because we got to learn all about our history, and everyone had a shared understanding of what it looks like to lead a moral life. 
+
+            <br><br>Only when I went out into the world did I realize that most Americans have no idea what this is like. They have never been a part of a shared culture, and the only value they know is multiculturalism.
+
+            <br><br>And the reality is that actually, that world, with no culture and no morals, is the default one today.
+
+            <br><br>That is the world the we are all expected to live in, as adults.
+
+            <br><br>Classical Christian schools are great, but what if I want to live a Classical Christian life?
+
+            <br><br>That is what Hyperia is for. It is a Classical Christian space for adults.
+
+            <br><br> -- Sam Russell, Founder
+        `)
+        .x(50, vw).y(55, vh)
         .center()
     }
 }