diff --git a/app/BottomBar.jsx b/app/BottomBar.jsx
new file mode 100644
index 0000000..71cea8f
--- /dev/null
+++ b/app/BottomBar.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import styled from '@emotion/styled'
+
+const CustomDiv = styled.div`
+ background-color: ${(props) => props.theme.palette.primary.brightest};
+ height: 10vh;
+ width: 100%
+`;
+
+const BottomBar = () => {
+ return (
+
+ contact: 530-368-6616
+ email: mrheffern@gmail.com
+
+ )
+}
+
+export default BottomBar
\ No newline at end of file
diff --git a/app/CalendarPage.jsx b/app/CalendarPage.jsx
new file mode 100644
index 0000000..b467e7e
--- /dev/null
+++ b/app/CalendarPage.jsx
@@ -0,0 +1,117 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import { Box, Container, Grid, Paper, Typography } from '@mui/material';
+import { grey } from '@mui/material/colors';
+import { DateCalendar } from '@mui/x-date-pickers';
+
+const SuiteAndBTCGraphic = (
+
+
+);
+
+const CustomDiv = styled.div`
+ background-color: ${(props) => props.theme.palette.primary.brightest};
+ height: 140vh;
+ width: 100%;
+ display: flex;
+ align-items: center;
+
+`;
+
+
+const CalendarPage = () => {
+ return (
+
+
+
+
+
+ Calendar
+
+
+
+
+
+
+
+ Trade
+ Looking to buy bitcoin? Sell bitcoin? Buy goods and services with bitcoin? Come and meet up with us! Lets change our world one transaction at a time.
+
+
+
+
+ Education
+ Curious? Skeptical? Can’t get enough? We have monthly meetups where we teach people what BTC is, why it matters, and how it works. Let us show you how BTW can help YOU!
+
+
+ Socialize
+ Just feel like hanging out with people that understand the the value of financial empowerment and freedom? We love to get together for coffee, a drink, or a bite and talk about bitcoin and everything else.
+
+
+ {SuiteAndBTCGraphic}
+
+
+
+
+
+ )
+}
+
+export default CalendarPage
\ No newline at end of file
diff --git a/app/GraphPage.jsx b/app/GraphPage.jsx
new file mode 100644
index 0000000..095a19b
--- /dev/null
+++ b/app/GraphPage.jsx
@@ -0,0 +1,97 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import { Card, Grid, TextField, Typography, Box, Container } from '@mui/material';
+import { DatePicker } from '@mui/x-date-pickers';
+import { LineChart, Line, XAxis, YAxis } from 'recharts';
+
+
+const BTCWorkers = (
+
+
+);
+
+const CustomDiv = styled.div`
+ background-color: ${(props) => props.theme.palette.primary.light};
+ height: 140vh;
+ width: 100%
+`;
+
+const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, {name: 'Page B', uv: 300, pv: 2400, amt: 2400}, {name: 'Page C', uv: 300, pv: 2400, amt: 2400}];
+
+const GraphPage = () => {
+ return (
+
+
+
+ How Much Would You Have Made?
+
+
+
+ Pick a past date and an amount invested to see how much you could have made! Pick a past date and an amount invested to see how much you could have made!
+
+
+ investment date
+
+
+
+ amount
+
+
+
+
+ {BTCWorkers}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default GraphPage
diff --git a/app/MainPage.jsx b/app/MainPage.jsx
new file mode 100644
index 0000000..19e0bc7
--- /dev/null
+++ b/app/MainPage.jsx
@@ -0,0 +1,62 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Grid } from '@mui/material';
+import React from 'react'
+
+const CustomDiv = styled.div`
+ background-color: ${(props) => props.theme.palette.primary.main};
+ height: 140vh;
+ width: 100%
+`;
+
+const CustomH1 = styled.h1`
+ color: #2F2E41;
+`;
+
+const CustomH3 = styled.h3`
+ color: #000;
+`;
+
+const StyledGrid = styled(Grid)`
+ height: 100vh;
+`;
+
+const CircleContainer = styled.div`
+ width: 325px;
+ height: 325px;
+ border-radius: 50%;
+ background-color: ${(props) => props.theme.palette.primary.dark}; /* Replace with your desired color */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 24px; /* Replace with your desired font size */
+`;
+
+const HorizontalLine = styled.div`
+ height: 2px;
+ background-color: #FAE84E; /* Yellow color */
+ margin: 20px 0; /* Adjust the margin to position the line */
+`;
+
+function MainPage() {
+ return (
+
+
+
+ Empowerment for those who need it most
+
+ Bitcoin is a grassroots technology for communities to build lasting wealth
+
+
+
+
+
+ /
+
+
+ );
+}
+
+export default MainPage
\ No newline at end of file
diff --git a/app/PerksPage.jsx b/app/PerksPage.jsx
new file mode 100644
index 0000000..a051b8f
--- /dev/null
+++ b/app/PerksPage.jsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import styled from '@emotion/styled';
+import InfoCard from '@components/InfoCard';
+import { Grid } from '@mui/material';
+
+const CustomDiv = styled.div`
+ background-color: ${(props) => props.theme.palette.primary.light};
+ height: 140vh;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+
+const PerksPage = () => {
+ let wealthCardPicture = (
+
+ );
+
+ let independenceCardPicture = (
+
+ );
+
+ let securityCardPicture = (
+
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default PerksPage
\ No newline at end of file
diff --git a/app/WheelSpinPage.jsx b/app/WheelSpinPage.jsx
new file mode 100644
index 0000000..e82fe3a
--- /dev/null
+++ b/app/WheelSpinPage.jsx
@@ -0,0 +1,96 @@
+import React, { useRef, useEffect, useState } from 'react'
+import styled from '@emotion/styled';
+import { Box, Button, Container, Grid, Input, TextField } from '@mui/material';
+import { useTheme } from '@emotion/react';
+import { Wheel } from 'spin-wheel/src/wheel';
+import WinningDialog from '@components/WinningDialog';
+
+
+const CustomDiv = styled.div`
+ background-color: ${(props) => props.theme.palette.primary.main};
+ height: 140vh;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+
+
+const WheelSpinPage = () => {
+
+ const [openSpinResult, setOpenSpinResult] = useState(false);
+ const [winningIndex, setWinningIndex] = useState(0);
+
+ const wheelRef = useRef();
+
+ const submitHandler = () => {
+ wheelRef.current.spin(1000);
+ }
+
+ const handleRest = (event) => {
+ console.log(event.currentIndex);
+ setWinningIndex(event.currentIndex);
+ setOpenSpinResult(true);
+ }
+
+ const theme = useTheme();
+
+ const containerRef = useRef();
+
+
+ const wheelItems = {
+ items: [
+ { label: '4 KSats', backgroundColor: theme.palette.secondary.main },
+ { label: '4 KSats', backgroundColor: '#f7931a' },
+ { label: '4 KSats', backgroundColor: theme.palette.secondary.main },
+ { label: '17 KSats', backgroundColor: '#f7931a'},
+ { label: '4 KSats', backgroundColor: theme.palette.secondary.main},
+ { label: '4 KSats', backgroundColor: '#f7931a'},
+ { label: '4 KSats', backgroundColor: theme.palette.secondary.main},
+ { label: '4 KSats', backgroundColor: '#f7931a'},
+ { label: '17 KSats', backgroundColor: theme.palette.secondary.main},
+ { label: '4 KSats', backgroundColor: '#f7931a'},
+ { label: '4 KSats', backgroundColor: theme.palette.secondary.main},
+ { label: '4 KSats', backgroundColor: '#f7931a'}
+ ]
+ };
+
+
+ useEffect(() => {
+
+ // Create a new Wheel using the container and props
+ // Make sure the containerRef.current is not null before creating the Wheel
+ if (containerRef.current) {
+ wheelRef.current = new Wheel(containerRef.current, wheelItems);
+ wheelRef.current.pointerAngle = 0;
+ wheelRef.current.overlayImage = '/assets/images/example-3-overlay.svg';
+ wheelRef.current.isInteractive = false;
+ wheelRef.current.rotationSpeedMax = 1000;
+ wheelRef.current.itemLabelFontSizeMax = 20;
+ wheelRef.current.rotationResistance = -100;
+
+ wheelRef.current.onRest = handleRest;
+ }
+ }, []);
+
+ return (
+
+
+
+
+
+ Join our mailing list to spin the wheel for a chance to win BTC!
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default WheelSpinPage
\ No newline at end of file
diff --git a/app/theme.js b/app/theme.js
new file mode 100644
index 0000000..35eec1b
--- /dev/null
+++ b/app/theme.js
@@ -0,0 +1,25 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+ palette: {
+ primary: {
+ main: '#AB96D9',
+ light: '#DCDCDC',
+ brightest: '#FFF',
+ dark: '#200459',
+ extraDark: '#6D49F1'
+ },
+ secondary: {
+ main: '#FAE84E',
+ },
+ text: {
+ light: '#FFF',
+ dark: '#000'
+ }
+ },
+ typography: {
+ fontFamily: 'Ubuntu',
+ },
+});
+
+export default theme;
\ No newline at end of file
diff --git a/components/InfoCard.jsx b/components/InfoCard.jsx
new file mode 100644
index 0000000..4a652c6
--- /dev/null
+++ b/components/InfoCard.jsx
@@ -0,0 +1,23 @@
+import styled from '@emotion/styled'
+import { Grid, Card, Box, Typography, Container } from '@mui/material';
+import React from 'react'
+
+const InfoCard = (props) => {
+ return (
+
+
+ {props.title}
+
+
+ {props.picture}
+
+
+ {props.text}
+
+
+
+
+ )
+}
+
+export default InfoCard
\ No newline at end of file
diff --git a/components/WinningDialog.jsx b/components/WinningDialog.jsx
new file mode 100644
index 0000000..a2f9c07
--- /dev/null
+++ b/components/WinningDialog.jsx
@@ -0,0 +1,21 @@
+import { Dialog, Button, DialogActions, DialogContent, DialogTitle } from '@mui/material'
+import React from 'react'
+
+const WinningDialog = (props) => {
+
+ const okHandler = () => {
+ props.close(false);
+ }
+
+ return (
+
+ )
+}
+
+export default WinningDialog
\ No newline at end of file
diff --git a/public/assets/images/example-3-overlay.svg b/public/assets/images/example-3-overlay.svg
new file mode 100644
index 0000000..120f8bb
--- /dev/null
+++ b/public/assets/images/example-3-overlay.svg
@@ -0,0 +1,26 @@
+
+
+