diff --git a/src/App.css b/src/App.css index e994711e8..f8fd48d0b 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,35 @@ .App { text-align: center; +} + +body { + color: #9ca9b3; + font-size: 1rem; +} + +.frow { + display: flex; + flex-direction: row; +} + +.flex-column { + display: flex; + flex-direction: column; +} + +.full-width { + width: '100%' +} + +text-white { + color: white; +} + +a, a:hover, a:focus, a:active { + text-decoration: none; + color: inherit; +} + +.footer-svg { + fill: #6163ff; } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index d7943e0d2..03e161e41 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,9 @@ import "./App.css"; import { useMemo } from "react"; - +import NavBar from "./navBar/navBar"; import Home from "./Home"; - +import FaqCard from "./shared/FaqCard"; +import placeHolderImage from './media/image-placeholder.jpeg' import * as anchor from "@project-serum/anchor"; import { clusterApiUrl } from "@solana/web3.js"; import { WalletAdapterNetwork } from "@solana/wallet-adapter-base"; @@ -20,6 +21,8 @@ import { } from "@solana/wallet-adapter-react"; import { WalletDialogProvider } from "@solana/wallet-adapter-material-ui"; +import TextAndImage from "./shared/TextAndImage"; +import Footer from "./shared/Footer"; import { createTheme, ThemeProvider } from "@material-ui/core"; const treasury = new anchor.web3.PublicKey( @@ -82,24 +85,101 @@ const App = () => { [] ); + const FreeText = () => { + return ( +
+

Generic Second Header

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +

+
+ ) + } + + const container = { + justifyContent: 'center', + alignItems: 'center', + } + return ( - - - - - + +
+
+ + + + ` - - - - - ); + />` + + + +
+ + + + + +
+

Frequently Asked Questions

+
+ + + +
+
+
+
+ + ); }; export default App; diff --git a/src/Home.tsx b/src/Home.tsx index 3bf799fbc..e1c0e3199 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -3,12 +3,12 @@ import styled from "styled-components"; import Countdown from "react-countdown"; import { Button, CircularProgress, Snackbar } from "@material-ui/core"; import Alert from "@material-ui/lab/Alert"; - +import placeHolderImage from './media/image-placeholder.jpeg' import * as anchor from "@project-serum/anchor"; import { LAMPORTS_PER_SOL } from "@solana/web3.js"; -import { useAnchorWallet } from "@solana/wallet-adapter-react"; +import { AnchorWallet, useAnchorWallet } from "@solana/wallet-adapter-react"; import { WalletDialogButton } from "@solana/wallet-adapter-material-ui"; import { @@ -25,7 +25,7 @@ const CounterText = styled.span``; // add your styles here const MintContainer = styled.div``; // add your styles here -const MintButton = styled(Button)``; // add your styles here +const MintButton = styled(Button)`background: #6163ff; color: white`; // add your styles here export interface HomeProps { candyMachineId: anchor.web3.PublicKey; @@ -48,9 +48,13 @@ const Home = (props: HomeProps) => { severity: undefined, }); + interface IAnchorWallet extends AnchorWallet { + connected?: boolean; + } + const [startDate, setStartDate] = useState(new Date(props.startDate)); - const wallet = useAnchorWallet(); + const wallet: IAnchorWallet | undefined = useAnchorWallet(); const [candyMachine, setCandyMachine] = useState(); const onMint = async () => { @@ -145,45 +149,61 @@ const Home = (props: HomeProps) => { })(); }, [wallet, props.candyMachineId, props.connection]); - return ( -
- {wallet && ( -

Address: {shortenAddress(wallet.publicKey.toBase58() || "")}

- )} + const containerStyles = { + display: 'flex', + flexDirection: 'column' as any, + justifyContent: 'space-evenly', + alignItems: 'center', - {wallet && ( + } + + return ( +
+ {/* {wallet.connected && + <> +

Address: {shortenAddress(wallet.publicKey?.toBase58() || "")}

Balance: {(balance || 0).toLocaleString()} SOL

- )} + + } */} + +
+

Place

+

Holder

+
+ +

This is placeholder text that can be replaced.

+ + {!wallet && Connect Wallet} - {!wallet ? ( - Connect Wallet - ) : ( - - {isSoldOut ? ( - "SOLD OUT" + {wallet && + + {isSoldOut ? ( + "SOLD OUT" ) : isActive ? ( isMinting ? ( - ) : ( - "MINT" - ) - ) : ( - completed && setIsActive(true)} - onComplete={() => setIsActive(true)} - renderer={renderCounter} - /> - )} - - )} + ) : ( + "MINT" + ) + ) : ( + completed && setIsActive(true)} + onComplete={() => setIsActive(true)} + renderer={renderCounter} + /> + )} + + } + + \ No newline at end of file diff --git a/src/media/image-placeholder.jpeg b/src/media/image-placeholder.jpeg new file mode 100644 index 000000000..77540906c Binary files /dev/null and b/src/media/image-placeholder.jpeg differ diff --git a/src/media/penguin.png b/src/media/penguin.png new file mode 100644 index 000000000..77f86b2c3 Binary files /dev/null and b/src/media/penguin.png differ diff --git a/src/media/twitter-icon.png b/src/media/twitter-icon.png new file mode 100644 index 000000000..34bbc4d80 Binary files /dev/null and b/src/media/twitter-icon.png differ diff --git a/src/media/twitter-icon.svg b/src/media/twitter-icon.svg new file mode 100644 index 000000000..742352a0a --- /dev/null +++ b/src/media/twitter-icon.svg @@ -0,0 +1 @@ +Twitter \ No newline at end of file diff --git a/src/navBar/navBar.css b/src/navBar/navBar.css new file mode 100644 index 000000000..139597f9c --- /dev/null +++ b/src/navBar/navBar.css @@ -0,0 +1,2 @@ + + diff --git a/src/navBar/navBar.tsx b/src/navBar/navBar.tsx new file mode 100644 index 000000000..5d306b72e --- /dev/null +++ b/src/navBar/navBar.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import placeHolderImage from '../media/image-placeholder.jpeg' +import { Button, CircularProgress, Snackbar } from "@material-ui/core"; + +const navBar = () => { + + const frowBetween = { + display: 'flex', + flexDirection: 'row' as any, + justifyContent: 'space-between', + } + + const frowCenter = { + display: 'flex', + flexDirection: 'row' as any, + justifyContent: 'center', + paddingTop: '50px', + } + + + return ( +
+
+
+ + + +
+
+ + +
+ +
+
+ ) +} + +export default navBar; \ No newline at end of file diff --git a/src/shared/FaqCard.tsx b/src/shared/FaqCard.tsx new file mode 100644 index 000000000..f0a94df0b --- /dev/null +++ b/src/shared/FaqCard.tsx @@ -0,0 +1,31 @@ +import React from 'react' + +const FaqCard = ({question, answer}: {question: string, answer: string}) => { + + return ( +
+

{answer}

+ + {question} + +
+ ) +} + +export default FaqCard; diff --git a/src/shared/Footer.tsx b/src/shared/Footer.tsx new file mode 100644 index 000000000..554ddf477 --- /dev/null +++ b/src/shared/Footer.tsx @@ -0,0 +1,37 @@ +import discordIcon from '../media/discord-icon.svg' +import twitterIcon from '../media/twitter-icon.svg' + +interface IProps { + image: string, + disclaimer: string, + roadmapLink: string, + faqLink: string +} +const Footer = ({image, disclaimer, roadmapLink, faqLink}: IProps) => { + + return ( +
+
+ + {disclaimer} +
+
+ +
+ Roadmap + FAQ +
+
+
+ ) + +} + +export default Footer \ No newline at end of file diff --git a/src/shared/TextAndImage.tsx b/src/shared/TextAndImage.tsx new file mode 100644 index 000000000..c41a93fca --- /dev/null +++ b/src/shared/TextAndImage.tsx @@ -0,0 +1,31 @@ +import React from 'react' + +const TextAndImage = ({reversed, image, text}: {reversed?: boolean, image: string, text: string}) => { + + return ( +
+
+

Text Header

+

{text}

+
+
+ +
+
+ ) +} + +TextAndImage.defaultProps = { + reversed: false, +} + +export default TextAndImage; \ No newline at end of file