diff --git a/package.json b/package.json
index bebf96b..901f61d 100644
--- a/package.json
+++ b/package.json
@@ -9,10 +9,12 @@
"preview": "vite preview"
},
"dependencies": {
+ "class-variance-authority": "^0.4.0",
"framer-motion": "^8.5.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "react-modal-sheet": "^1.10.0"
+ "react-modal-sheet": "^1.10.0",
+ "react-router-dom": "^6.8.0"
},
"devDependencies": {
"@types/react": "^18.0.26",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c1e8591..5fe806b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,21 +5,25 @@ specifiers:
'@types/react-dom': ^18.0.9
'@vitejs/plugin-react': ^3.0.0
autoprefixer: ^10.4.13
+ class-variance-authority: ^0.4.0
framer-motion: ^8.5.4
postcss: ^8.4.21
react: ^18.2.0
react-dom: ^18.2.0
react-modal-sheet: ^1.10.0
+ react-router-dom: ^6.8.0
tailwindcss: ^3.2.4
typescript: ^4.9.3
vite: ^4.0.0
vite-plugin-pwa: ^0.14.1
dependencies:
+ class-variance-authority: 0.4.0_typescript@4.9.4
framer-motion: 8.5.4_react-dom@18.2.0+react@18.2.0
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
react-modal-sheet: 1.10.0_framer-motion@8.5.4+react@18.2.0
+ react-router-dom: 6.8.0_react-dom@18.2.0+react@18.2.0
devDependencies:
'@types/react': 18.0.27
@@ -1576,6 +1580,11 @@ packages:
react: 18.2.0
dev: false
+ /@remix-run/router/1.3.1:
+ resolution: {integrity: sha512-+eun1Wtf72RNRSqgU7qM2AMX/oHp+dnx7BHk1qhK5ZHzdHTUU4LA1mGG1vT+jMc8sbhG3orvsfOmryjzx2PzQw==}
+ engines: {node: '>=14'}
+ dev: false
+
/@rollup/plugin-babel/5.3.1_d8e457a9eec5694be0a6185ede2794cb:
resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
engines: {node: '>= 10.0.0'}
@@ -1957,6 +1966,17 @@ packages:
fsevents: 2.3.2
dev: true
+ /class-variance-authority/0.4.0_typescript@4.9.4:
+ resolution: {integrity: sha512-74enNN8O9ZNieycac/y8FxqgyzZhZbxmCitAtAeUrLPlxjSd5zA7LfpprmxEcOmQBnaGs5hYhiSGnJ0mqrtBLQ==}
+ peerDependencies:
+ typescript: '>= 4.5.5 < 5'
+ peerDependenciesMeta:
+ typescript:
+ optional: true
+ dependencies:
+ typescript: 4.9.4
+ dev: false
+
/clsx/1.2.1:
resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
engines: {node: '>=6'}
@@ -2929,6 +2949,29 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
+ /react-router-dom/6.8.0_react-dom@18.2.0+react@18.2.0:
+ resolution: {integrity: sha512-hQouduSTywGJndE86CXJ2h7YEy4HYC6C/uh19etM+79FfQ6cFFFHnHyDlzO4Pq0eBUI96E4qVE5yUjA00yJZGQ==}
+ engines: {node: '>=14'}
+ peerDependencies:
+ react: '>=16.8'
+ react-dom: '>=16.8'
+ dependencies:
+ '@remix-run/router': 1.3.1
+ react: 18.2.0
+ react-dom: 18.2.0_react@18.2.0
+ react-router: 6.8.0_react@18.2.0
+ dev: false
+
+ /react-router/6.8.0_react@18.2.0:
+ resolution: {integrity: sha512-760bk7y3QwabduExtudhWbd88IBbuD1YfwzpuDUAlJUJ7laIIcqhMvdhSVh1Fur1PE8cGl84L0dxhR3/gvHF7A==}
+ engines: {node: '>=14'}
+ peerDependencies:
+ react: '>=16.8'
+ dependencies:
+ '@remix-run/router': 1.3.1
+ react: 18.2.0
+ dev: false
+
/react/18.2.0:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
engines: {node: '>=0.10.0'}
diff --git a/src/App.tsx b/src/App.tsx
index a5fdb55..fdaffba 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,115 +1,21 @@
-import Sheet from 'react-modal-sheet';
-import { useState } from 'react';
-import logo from './assets/mutiny-logo.svg';
-import mutiny_m from './assets/m.svg';
-import scan from './assets/scan.svg';
-import settings from './assets/settings.svg';
-import send from './assets/send.svg';
-
-
-function ActivityItem() {
- return (
-
-

-
-
Bitcoin Beefsteak
- -1,441,851 SAT
- Jul 24
-
-
SEND
-
- )
-}
+import { Routes, Route } from "react-router-dom";
+import { AnimatePresence } from "framer-motion";
+import Home from "./Home";
+import Receive from "./Receive";
+import Join from "./Join";
function App() {
- const [isOpen, setOpen] = useState(false);
-
return (
-
-
-
-
-
-
-
-
-
-
- 69,420 SAT
-
-
-
-
-
-
-
-
- {/* safety div */}
-
-
+
+ {/* globals such as header will go here */}
-
-
-
setOpen(false)}>
-
-
-
-
-
-
-
- It's a sheet! Like a modal, but a sheet.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
+
+ {/* } /> */}
+ } />
+
+
+ );
}
-export default App
+export default App;
\ No newline at end of file
diff --git a/src/Home.tsx b/src/Home.tsx
new file mode 100644
index 0000000..94ff9f6
--- /dev/null
+++ b/src/Home.tsx
@@ -0,0 +1,115 @@
+import Sheet from 'react-modal-sheet';
+import { useState } from 'react';
+import logo from './assets/mutiny-logo.svg';
+import mutiny_m from './assets/m.svg';
+import scan from './assets/scan.svg';
+import settings from './assets/settings.svg';
+import send from './assets/send.svg';
+
+
+function ActivityItem() {
+ return (
+
+

+
+
Bitcoin Beefsteak
+ -1,441,851 SAT
+ Jul 24
+
+
SEND
+
+ )
+}
+
+function App() {
+ const [isOpen, setOpen] = useState(false);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ 69,420 SAT
+
+
+
+
+
+
+
+
+ {/* safety div */}
+
+
+
+
+
+
+
setOpen(false)}>
+
+
+
+
+
+
+
+ It's a sheet! Like a modal, but a sheet.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default App
diff --git a/src/Join.tsx b/src/Join.tsx
new file mode 100644
index 0000000..8816559
--- /dev/null
+++ b/src/Join.tsx
@@ -0,0 +1,42 @@
+import { useState } from "react";
+import button from "./components/button"
+
+const INPUT = "w-full mb-4 p-2 rounded-lg text-black"
+export default function Join() {
+ let [nostr, setNostr] = useState(true);
+ return (
+
+
+
+ Join Waitlist
+ {/* HTML form with three inputs: nostr pubkey (text), email (text), and a textarea for comments */}
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/Receive.tsx b/src/Receive.tsx
new file mode 100644
index 0000000..6d78ea7
--- /dev/null
+++ b/src/Receive.tsx
@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
+
+function Receive() {
+ const pageMotion = {
+ initial: { opacity: 0, x: 0 },
+ animate: { opacity: 1, x: 50, transition: { duration: 2 } },
+ exit: { opacity: 0, x: 0, transition: { duration: 2 } }
+ };
+
+ return (
+
+ about page
+ Go to home page
+
+ )
+}
+
+export default Receive
\ No newline at end of file
diff --git a/src/components/button.ts b/src/components/button.ts
new file mode 100644
index 0000000..12d88b4
--- /dev/null
+++ b/src/components/button.ts
@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority";
+
+const button = cva(["p-4", "rounded-xl", "text-xl", "font-semibold"], {
+ variants: {
+ intent: {
+ active: "bg-white text-black",
+ inactive: "bg-black text-white border border-white",
+ blue: "bg-[#3B6CCC] text-white",
+ red: "bg-[#F61D5B] text-white"
+ },
+ layout: {
+ flex: "flex-1",
+ pad: "px-8"
+ },
+ },
+
+ defaultVariants: {
+ intent: "inactive",
+ layout: "flex"
+ },
+});
+
+export default button
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 791f139..049a9c5 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,19 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import App from './App'
import './index.css'
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element: ,
+ },
+]);
+
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-
+
+ {/* */}
,
)
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index afb8e0c..04cd01a 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -8,6 +8,9 @@ module.exports = {
],
theme: {
extend: {
+ colors: {
+ "half-black": "rgba(0, 0, 0, 0.5)",
+ },
backgroundImage: {
'fade-to-blue': 'linear-gradient(1.63deg, #0B215B 32.05%, rgba(11, 33, 91, 0) 84.78%)'
}