Payment page

web/src/main.tsx

@@ -20,6 +20,7 @@ import PVVScreen from "./screens/PVVScreen.tsx";
 import LoginScreen from "./screens/LoginScreen.tsx";
 import { ClerkProvider } from "@clerk/clerk-react";
 import { graphqlClient } from "./graphql/client.ts";
+import PaymentScreen from "./screens/PaymentScreen.tsx";
 
 //Add any routes for screens below
 const router = createBrowserRouter(
@@ -32,6 +33,7 @@ const router = createBrowserRouter(
       <Route path="/signup" element={<SignUpScreen />} />
       <Route path="/pvv" element={<PVVScreen />} />
       <Route path="/photos" element={<PhotosScreen />} />
+      <Route path="/payments" element={<PaymentScreen />} />
     </Route>
   )
 );

web/src/screens/HomeScreen.tsx

@@ -1,10 +1,4 @@
-import Hero from "@components/Hero";
-import SponsorCard from "@components/SponsorCard";
 
-export default function HomeScreen() {
-  return (
-    <div>
-      <SponsorCard/>
-    </div>
-  );
-}
+
+
+export default function HomeScreen() {}

web/src/screens/PaymentScreen.tsx

@@ -1,33 +1,29 @@
+import { IoCartOutline } from "react-icons/io5";
+import { MdEvent } from "react-icons/md";
+
 function PaymentScreen() {
-    return (
-        <div style={{ paddingLeft: '350px', marginTop: '150px' }}>
-          <h1 style={{ fontSize: '32px', fontWeight: 'bold', paddingBottom: '3px' }}>
-            Review Order
-          </h1>
-          <div style={{ borderBottom: '1px solid #ccc', width: '700px', marginBottom: '10px' }}></div>
-          <h2 style={{ fontSize: '15px', fontWeight: 'bold', paddingTop: '25px', paddingLeft: '30px' }}>Two Semester Membership:</h2>
-          <h3 style={{ fontSize: '15px', paddingTop: '11px', paddingLeft: '50px' }}>
-            - Full-year <i>free</i> access to all AUIS events (except steins, balls, and select events)
-          </h3>
-          <h4 style={{ fontSize: '15px', paddingLeft: '50px', paddingTop: '4px' }}>
-            - Discounted tickets to other host events
-          </h4>
-
-          <div style={{ display: 'flex', alignItems: 'center', marginTop: '20px' }}>
-            <span style={{ fontSize: '18px', fontWeight: 'bold', marginLeft: '370px' }}>$15.00 NZD</span>
-            <button style={{
-              padding: '8px 25px', 
-              fontSize: '20px', 
-              fontWeight: 'bold',
-              backgroundColor: 'orange', 
-              color: 'white',
-              borderRadius: '17px',
-              marginLeft: '30px' }}>
-              Continue
-            </button>
-          </div>
+  return (
+    <>
+    <div className="px-12 mt-[8rem] md:pl-[10rem]">
+      <h1 className="font-bold text-5xl pb-[1rem] pl-[1rem]" >Review Order</h1>
+      <div className="border-b border-gray-300 w-3/4"> </div>
+      <div> 
+        <h2 className="font-bold text-xl pt-[2rem]"> Two Semester Membership:</h2>
+        <li> Full-year <i>free</i> access to all AUIS events (except steins, balls, and select events) </li>
+        <li> Discounted tickets to other host events 2</li>
+      </div>
+      <div>
+      <div className="flex justify-end items-center space-x-4 pt-[1rem] md:pr-[20rem]"> 
+        <div className="hidden sm:block">
+          <IoCartOutline size={70} color="black" />
         </div>
-      );
-    }
+        <h2 className="text-xl font-[500]"> $15.00 NZD </h2>
+        <button className=" h-10 px-4 text-xl font-bold bg-orange-400 text-white rounded-xl"> Continue </button>
+      </div>
+      </div> 
+    </div>
+    </>
+);
+}
 
 export default PaymentScreen;