Styles/update landing page

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;
 }

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 (
+    <div style={{borderTop: '1px solid #25282c', ...container, width: '50%', marginBottom: '30px'}} className='flex-column'>
+      <h2 style={{paddingTop: '30px'}}>Generic Second Header</h2>
+      <p>
+        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. 
+      </p>
+    </div>
+    )
+  }
+
+  const container = {
+    justifyContent: 'center',
+    alignItems: 'center',
+  }
+
   return (
-      <ThemeProvider theme={theme}>
-        <ConnectionProvider endpoint={endpoint}>
-          <WalletProvider wallets={wallets} autoConnect>
-            <WalletDialogProvider>
-              <Home
+    <div style={{background: 'black'}}>
+      <NavBar />
+      <div style={{...container, }} className='flex-column'>
+        <div style={{marginBottom: '30px'}}>
+          <ConnectionProvider endpoint={endpoint}>
+            <WalletProvider wallets={wallets} autoConnect>
+              <WalletDialogProvider>
+              ` <Home
                 candyMachineId={candyMachineId}
                 config={config}
                 connection={connection}
                 startDate={startDateSeed}
                 treasury={treasury}
                 txTimeout={txTimeout}
-              />
-            </WalletDialogProvider>
-          </WalletProvider>
-        </ConnectionProvider>
-      </ThemeProvider>
-  );
+              />`
+              </WalletDialogProvider>
+            </WalletProvider>
+          </ConnectionProvider>
+        </div>
+        <FreeText />
+        <TextAndImage
+          text='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. 
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+          image={placeHolderImage}  
+        />
+        <TextAndImage reversed
+          text='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. 
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+          image={placeHolderImage}
+        />
+        <TextAndImage 
+          text='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. 
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+          image={placeHolderImage}
+        />
+
+        <div className='flex-column' 
+          style={{
+            borderTop: '1px solid #25282c',
+            width: '60%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            paddingTop: '50px', 
+            paddingBottom: '50px',
+            marginTop: '40px'
+          }}>
+          <h2 style={{marginBottom: '40px'}}>Frequently Asked Questions</h2>
+          <div className='frow'>
+            <FaqCard
+              answer='We are a team a developers from around the world passionate about NFTs and the Solana ecosystem. We want to generate NFTs that are not only fun, but also have utility. Join our Discord to learn more about the team.'
+              question='Who is behind ProjectName'
+            />
+            <FaqCard
+              answer='Once the minting process starts, one of the available SolPenguins will be sent to you. SolPenguins use the Metaplex protocol, which is the premier NFT protocol on Solana. This means that you will be able to view your NFT in any wallet/application supporting Metaplex.'
+              question='Who is behind ProjectName'
+            />
+            <FaqCard
+              answer='We are a team a developers from around the world passionate about NFTs and the Solana ecosystem. We want to generate NFTs that are not only fun, but also have utility. Join our Discord to learn more about the team.'
+              question='Who is behind ProjectName'
+            />
+          </div>
+        </div>
+        <Footer 
+          image={placeHolderImage}
+          disclaimer='this is a generic disclaimer statement'
+          roadmapLink='https://www.solpenguins.com/'
+          faqLink='https://www.solpenguins.com/'
+        />
+      </div>
+    </div>
+    );
 };
 
 export default App;

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<CandyMachine>();
 
   const onMint = async () => {
@@ -145,45 +149,61 @@ const Home = (props: HomeProps) => {
     })();
   }, [wallet, props.candyMachineId, props.connection]);
 
-  return (
-    <main>
-      {wallet && (
-        <p>Address: {shortenAddress(wallet.publicKey.toBase58() || "")}</p>
-      )}
+  const containerStyles = {
+    display: 'flex',
+    flexDirection: 'column' as any,
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
 
-      {wallet && (
+  }
+
+  return (
+    <main style={containerStyles}>
+      {/* {wallet.connected && 
+      <>
+        <p>Address: {shortenAddress(wallet.publicKey?.toBase58() || "")}</p>
         <p>Balance: {(balance || 0).toLocaleString()} SOL</p>
-      )}
+      </>  
+      } */}
+
+      <div style={{display: 'flex', flexDirection: 'row', marginBottom: '5px'}}>
+        <h1 style={{color: 'white', fontSize: '42px', marginBottom: '5px', marginTop: '5px'}}>Place</h1>
+        <h1 style={{color: '#5658dd', fontSize: '42px', marginBottom: '5px',  marginTop: '5px'}}>Holder</h1>
+      </div>
+
+      <h3 style={{color: '#9ca9b3', marginBottom: '20px'}}>This is placeholder text that can be replaced.</h3>
+
+      {!wallet && <ConnectButton>Connect Wallet</ConnectButton>}
 
       <MintContainer>
-        {!wallet ? (
-          <ConnectButton>Connect Wallet</ConnectButton>
-        ) : (
-          <MintButton
-            disabled={isSoldOut || isMinting || !isActive}
-            onClick={onMint}
-            variant="contained"
-          >
-            {isSoldOut ? (
-              "SOLD OUT"
+        {wallet && 
+        <MintButton
+        disabled={isSoldOut || isMinting || !isActive}
+        onClick={onMint}
+        variant="contained"
+        >
+          {isSoldOut ? (
+            "SOLD OUT"
             ) : isActive ? (
               isMinting ? (
                 <CircularProgress />
-              ) : (
-                "MINT"
-              )
-            ) : (
-              <Countdown
-                date={startDate}
-                onMount={({ completed }) => completed && setIsActive(true)}
-                onComplete={() => setIsActive(true)}
-                renderer={renderCounter}
-              />
-            )}
-          </MintButton>
-        )}
+                ) : (
+                  "MINT"
+                  )
+                  ) : (
+                    <Countdown
+                    date={startDate}
+                    onMount={({ completed }) => completed && setIsActive(true)}
+                    onComplete={() => setIsActive(true)}
+                    renderer={renderCounter}
+                    />
+                    )}
+        </MintButton>
+        }
       </MintContainer>
 
+      <img src={placeHolderImage} style={{width: '550px', marginTop: '20px'}}/>
+
       <Snackbar
         open={alertState.open}
         autoHideDuration={6000}

src/navBar/navBar.css

@@ -0,0 +1,2 @@
+
+

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 (
+    <div style={frowCenter}>
+      <div style={{...frowBetween, width: '70%'}}>
+        <div>
+          <a href=''>
+            <img src={placeHolderImage} style={{width: '30px'}}/>
+          </a>  
+        </div>
+        <div style={{...frowBetween, width: '25%'}}>
+          <Button style={{color: 'white'}} href='https://discord.com/'>Discord</Button>
+          <Button style={{background: '#6163ff', color: 'white'}} href='https://twitter.com/'>Twitter</Button>
+        </div>
+
+      </div>
+    </div>
+  )
+}
+
+export default navBar;

src/shared/FaqCard.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+const FaqCard = ({question, answer}: {question: string, answer: string}) => {
+
+  return (
+    <div
+      style={{
+        padding: '24px 32px',
+        background: '#25282c',
+        minHeight: '100%',
+        margin: '10px',
+        width: '30%'
+      }
+    }>
+    <p style={{borderBottom: '1px solid #33363a', paddingBottom: '15px'}}>{answer}</p>
+    <span 
+      style={{
+        color:'white',
+        borderTop: '#33363a',
+        paddingTop: '10px',
+        paddingBottom: '20px',
+        fontSize: '18px'
+      }}
+      >
+      {question}
+    </span> 
+    </div>
+  )
+}
+
+export default FaqCard;