exiled-apes · vosaul · Nov 11, 2021 · Nov 26, 2021 · Dec 3, 2021 · Dec 6, 2021
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "babel-loader": "^8.2.3",
     "react": "^17.0.2",
     "react-countdown": "^2.3.2",
     "react-dom": "^17.0.2",

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Mint your NFT! Welcome to the Family!"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,22 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>La Famiglia Mint</title>
+
+    <!-- Facebook Meta Tags -->
+    <meta property="og:url" content="https://mint.lafamiglia.io/">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="La Famiglia Mint">
+    <meta property="og:description" content="Mint your NFT! Welcome to the Family!">
+    <meta property="og:image" content="https://mint.lafamiglia.io/logo192.png">
+
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="twitter:domain" content="mint.lafamiglia.io">
+    <meta property="twitter:url" content="https://mint.lafamiglia.io/">
+    <meta name="twitter:title" content="La Famiglia Mint">
+    <meta name="twitter:description" content="Mint your NFT! Welcome to the Family!">
+    <meta name="twitter:image" content="https://mint.lafamiglia.io/logo192.png">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/src/Home.tsx b/src/Home.tsx
@@ -19,13 +19,112 @@ import {
   shortenAddress,
 } from "./candy-machine";
 
-const ConnectButton = styled(WalletDialogButton)``;
-
-const CounterText = styled.span``; // add your styles here
-
-const MintContainer = styled.div``; // add your styles here
-
-const MintButton = styled(Button)``; // add your styles here
+import tableImage from './assets/images/table.jpg';
+
+const Main = styled.main`
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 85vh;
+  background-color: #000;
+  position: relative;
+`;
+
+const ConnectButton = styled(WalletDialogButton)`
+  z-index: 200;
+  display: block;
+  width: fit-content;
+  background: #870101 !important;
+  font-size: 36px !important;
+  line-height: 1.2;
+  padding: 10px 20px !important;
+  font-family: "Corleone" !important;
+  font-weight: 300 !important;
+`;
+
+const CounterText = styled.span``;
+
+const MintContainer = styled.div`
+  z-index: 200;
+  width: fit-content;
+  margin: 20px auto;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 30px;
+  @media (min-width: 600px){
+  bottom: 380px;}
+  @media (min-width: 920px){
+  bottom: 460px;}
+  @media (min-width: 1440px){
+  bottom: 510px;}
+`;
+
+const MintButton = styled(Button)`
+  display: block;
+  z-index: 200;
+  width: fit-content;
+  background: #870101 !important;
+  font-size: 36px !important;
+  line-height: 1.2;
+  padding: 10px 20px !important;
+  font-family: "Corleone" !important;
+  font-weight: 300 !important;
+  span {
+    color: #fff;
+    font-size: 36px !important;
+    line-height: 1.2;
+    padding: 10px 20px !important;
+    font-family: "Corleone" !important;
+    font-weight: 300 !important;
+    letter-spacing: 4px;
+    text-transform: none;
+}
+`;
+
+const Title = styled.h1`
+  text-align: center;
+  margin: 20px auto;
+  color: #870101;
+  font-size: 3rem;
+  font-family: "Corleone";
+  font-weight: 300;
+  letter-spacing: 4px;
+  @media (min-width: 768px){
+  font-size: 6rem;}
+`;
+
+const Image = styled.img`
+  display: block;
+  margin: 20px auto;
+  max-width: 100%
+`;
+const InfoBoard = styled.div`
+  width: fit-content;
+  height: fit-content;
+  position: absolute;
+  bottom: -55px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 20px 30px;
+  z-index: 100;
+  @media (min-width: 768px){
+  top: 520px;}
+  @media (min-width: 920px){
+    top: 610px;
+  }
+  @media (min-width: 1440px){
+    top: 630px;
+  }
+  p {
+    margin: 0;
+    font-family: "Corleone";
+    font-size: 1rem;
+    font-width: 100;
+    letter-spacing: 3px;
+    line-height: 1.5;
+    text-align: center;
+  }
+`;
 
 export interface HomeProps {
   candyMachineId: anchor.web3.PublicKey;
@@ -166,18 +265,26 @@ const Home = (props: HomeProps) => {
   ]);
 
   return (
-    <main>
-      {wallet && (
-        <p>Wallet {shortenAddress(wallet.publicKey.toBase58() || "")}</p>
-      )}
+    <Main>
+      <InfoBoard>
+
+        {wallet && (
+          <p>Wallet {shortenAddress(wallet.publicKey.toBase58() || "")}</p>
+        )}
+
+        {wallet && <p>Your Wallet Balance: {(balance || 0).toLocaleString()} SOL</p>}
+
+        {/* {wallet && <p>Total Left: {itemsAvailable}</p>} */}
+
+        {wallet && <p>Minted: {itemsRedeemed} / {itemsAvailable}</p>}
 
-      {wallet && <p>Balance: {(balance || 0).toLocaleString()} SOL</p>}
+        {/* {wallet && <p>Left to Mint: {itemsRemaining}</p>} */}
 
-      {wallet && <p>Total Available: {itemsAvailable}</p>}
+      </InfoBoard>
 
-      {wallet && <p>Redeemed: {itemsRedeemed}</p>}
+      <Title>La Famiglia<br /> Minting Ceremony</Title>
 
-      {wallet && <p>Remaining: {itemsRemaining}</p>}
+      <Image src={tableImage} alt="mafia accessories" />
 
       <MintContainer>
         {!wallet ? (
@@ -189,12 +296,12 @@ const Home = (props: HomeProps) => {
             variant="contained"
           >
             {isSoldOut ? (
-              "SOLD OUT"
+              "Sold Out"
             ) : isActive ? (
               isMinting ? (
                 <CircularProgress />
               ) : (
-                "MINT"
+                "Mint"
               )
             ) : (
               <Countdown
@@ -220,7 +327,7 @@ const Home = (props: HomeProps) => {
           {alertState.message}
         </Alert>
       </Snackbar>
-    </main>
+    </Main>
   );
 };
 

diff --git a/src/assets/fonts/Corleone.ttf b/src/assets/fonts/Corleone.ttf
diff --git a/src/assets/fonts/CorleoneDue.ttf b/src/assets/fonts/CorleoneDue.ttf
diff --git a/src/assets/fonts/Gilroy-ExtraBold.ttf b/src/assets/fonts/Gilroy-ExtraBold.ttf
diff --git a/src/assets/fonts/Gilroy-Light.ttf b/src/assets/fonts/Gilroy-Light.ttf
diff --git a/src/assets/fonts/Gilroy.ttf b/src/assets/fonts/Gilroy.ttf
diff --git a/src/assets/fonts/corleone.regular.ttf b/src/assets/fonts/corleone.regular.ttf
diff --git a/src/assets/fonts/layer1.svg b/src/assets/fonts/layer1.svg
diff --git a/src/assets/images/boss.png b/src/assets/images/boss.png
diff --git a/src/assets/images/table-back.jpg b/src/assets/images/table-back.jpg
diff --git a/src/assets/images/table-short.jpg b/src/assets/images/table-short.jpg
diff --git a/src/assets/images/table.jpg b/src/assets/images/table.jpg
diff --git a/src/index.css b/src/index.css
@@ -5,11 +5,35 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #303030;
+  background-color: #000;
   color: #FFFFFF;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+/* $brand_color: #870101; */
+
+@font-face {
+    font-family: "CorleoneDue";
+    src: local('CorleoneDue'), url(./assets/fonts/CorleoneDue.ttf) format("truetype");
+}
+
+@font-face {
+    font-family: "Corleone";
+    src: url(./assets/fonts/Corleone.ttf) format("truetype");
+}
+
+@font-face {
+    font-family: "Gilroy";
+    src: url(./assets/fonts/Gilroy-Light.ttf) format("truetype");
+    font-weight: 300;
+    font-style: normal;
+}
+@font-face {
+    font-family: "Gilroy";
+    src: url(./assets/fonts/Gilroy-ExtraBold.ttf) format("truetype");
+    font-weight: 900;
+    font-style: normal;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -3295,6 +3295,16 @@ [email protected]:
     pify "^4.0.1"
     schema-utils "^2.6.5"
 
+babel-loader@^8.2.3:
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.3.tgz#8986b40f1a64cacfcb4b8429320085ef68b1342d"
+  integrity sha512-n4Zeta8NC3QAsuyiizu0GkmRcQ6clkV9WFUnUf1iXP//IeSKbWjofW3UHyZVwlOB4y039YQKefawyTn64Zwbuw==
+  dependencies:
+    find-cache-dir "^3.3.1"
+    loader-utils "^1.4.0"
+    make-dir "^3.1.0"
+    schema-utils "^2.6.5"
+
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
@@ -8108,7 +8118,7 @@ make-dir@^2.0.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0, make-dir@^3.0.2:
+make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==