chore: init

package.json

@@ -10,6 +10,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
+    "react-text-loop": "^2.3.0",
     "styled-components": "^5.2.3"
   },
   "devDependencies": {

pages/_app.js

@@ -1,16 +1,24 @@
 import { createGlobalStyle, ThemeProvider } from 'styled-components'
 
 const GlobalStyle = createGlobalStyle`
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap');
+
   body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    font-family: 'Inter', sans-serif;
+  }
+
+  ::selection {
+    background-color: rgba(0,118,255,0.9);
+    color: #fff;
   }
 `
 
 const theme = {
   colors: {
-    primary: '#0070f3',
+    primary: 'rgba(0,118,255,0.9)',
   },
 }
 

pages/index.js

@@ -1,10 +1,106 @@
 import styled from 'styled-components'
+import TextLoop from "react-text-loop";
 
-const Title = styled.h1`
+const Wrapper = styled.div`
-  font-size: 50px;
+  height: 100vh;
-  color: ${({ theme }) => theme.colors.primary};
+  min-height: 800px;
-`
+  display: flex;
+`;
+
+const InnerWrapper = styled.div`
+  /* width: 100%; */
+  /* height: 100%; */
+  flex: 1;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  border: 8px solid ${({ theme }) => theme.colors.primary};
+`;
+
+const HeroTitle = styled.h1`
+  font-size: 84px;
+  font-weight: 800;
+  letter-spacing: -4px;
+  margin: 0 auto;
+  max-width: 900px;
+`;
+
+const HeroIntro = styled.p`
+  font-size: 18px;
+  line-height: 1.6;
+  font-weight: 500;
+  border-radius: 7px;
+  padding: 8px 12px;
+  margin: 0 auto 20px auto;
+  max-width: 900px;
+  color: #0070f3;
+  background: rgba(0,118,255,0.1);
+`;
+
+const HeroDescription = styled.p`
+  color: #666666;
+  font-size: 20px;
+  line-height: 1.6;
+  font-weight: 400;
+  letter-spacing: -1px;
+  max-width: 800px;
+  margin: 20px auto 0 auto;
+  text-align: center;
+`;
+
+const LoopWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  padding: 8px;
+  margin-top: 30px;
+`;
+
+const FixedTextPart = styled.span`
+  font-size: 30px;
+`;
+
+const LoopedTextPart = styled.span`
+  font-size: 30px;
+  font-weight: 700;
+`;
+
+const Link = styled.a`
+  padding: 4px;
+  text-decoration: none;
+  color: #000;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+
+  &:hover {
+    color: #0070f3;
+    border-radius: 7px;
+    background: rgba(0,118,255,0.1);
+    border-color: transparent;
+  }
+`;
+
+const URL_INTERNET_IDENTIFIER = 'https://datatracker.ietf.org/doc/html/rfc5322#section-3.4.1';
 
 export default function Home() {
-  return <Title>My page</Title>
+  return (
+    <Wrapper>
+      <InnerWrapper>
+        <HeroIntro>Introducing</HeroIntro>
+        <HeroTitle>The Lightning Address</HeroTitle>
+        <HeroDescription>An <Link href={URL_INTERNET_IDENTIFIER}>Internet Identifier</Link> that allows anyone to send you money over the Bitcoin Lightning Network. No scanning QR codes, or pasting invoices. Like an email address, but for money.</HeroDescription>
+        <LoopWrapper>
+          <FixedTextPart>satoshi@</FixedTextPart>
+          <TextLoop interval={2000}>
+            <LoopedTextPart>zbd.gg</LoopedTextPart>
+            <LoopedTextPart>lntxbot.com</LoopedTextPart>
+            <LoopedTextPart>your.domain</LoopedTextPart>
+          </TextLoop>
+        </LoopWrapper>
+      </InnerWrapper>
+    </Wrapper>
+  );
 }

yarn.lock

@@ -641,6 +641,11 @@ cssnano-simple@2.0.0:
   dependencies:
     cssnano-preset-simple "^2.0.0"
 
+cxs@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/cxs/-/cxs-6.2.0.tgz#f11ca3bdaef154b93bdadca5df70f2cb3e37ca24"
+  integrity sha512-RGatb1BUwVMBzV8DRo9Kapc55bdGfAxMcukVk+ZzE3Ts8xaTve0GVz730kBDxjhEBU2LK+RPuAcjZb00Q3O24w==
+
 data-uri-to-buffer@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
@@ -1457,6 +1462,16 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+  integrity sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
+
 picomatch@^2.0.4, picomatch@^2.2.1:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
@@ -1505,7 +1520,7 @@ process@0.11.10, process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-prop-types@15.7.2:
+prop-types@15.7.2, prop-types@^15.5.8:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -1563,6 +1578,13 @@ queue@6.0.2:
   dependencies:
     inherits "~2.0.3"
 
+raf@^3.1.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -1597,6 +1619,11 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-fast-compare@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-is@17.0.2, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
@@ -1607,11 +1634,29 @@ react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-motion@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
+  integrity sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==
+  dependencies:
+    performance-now "^0.2.0"
+    prop-types "^15.5.8"
+    raf "^3.1.0"
+
 react-refresh@0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-text-loop@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-text-loop/-/react-text-loop-2.3.0.tgz#c4035b1f3fb8216b34ed93f3160025fc7b1af3b7"
+  integrity sha512-tRLxdkhc1ojAICxERJNOWj3Ry7NIGmFQF4tR6cRVyL+5zVD+gj+8uGPvOgEBLuj2vmjTXLPvBMVVCnoAIy1+DA==
+  dependencies:
+    cxs "^6.2.0"
+    react-fast-compare "2.0.4"
+    react-motion "^0.5.2"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"