nimi-app · Mi-Lan · May 2, 2022 · Apr 30, 2022 · Apr 30, 2022 · May 2, 2022
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,13 +1,11 @@
 import styled from 'styled-components';
 
-import { Button as RebassButton, BaseProps } from 'rebass';
-
 const Base = styled.button`
   position: relative;
-  padding: 10px 25px;
-  text-transform: uppercase;
-  text-align: center;
+  padding: 10px 24px;
 
+  text-align: center;
+  font-family: 'Baloo 2', sans-serif;
   color: ${({ theme }) => theme.white};
 
   outline: none;

diff --git a/src/components/EnsNameCard/index.tsx b/src/components/EnsNameCard/index.tsx
@@ -0,0 +1,17 @@
+import { CardWrapper, DomainText, ProfilePic, StyledButton, StyledExternalLink } from './styleds';
+
+interface ENSCardProps {
+  ensDomain: string;
+  imageUrl?: string;
+}
+
+export function ENSNameCard({ ensDomain, imageUrl }: ENSCardProps) {
+  return (
+    <CardWrapper>
+      {imageUrl && <ProfilePic alt={imageUrl} src={imageUrl} />}
+      <DomainText> {ensDomain}</DomainText>
+      <StyledButton>Set up a Nimi Profile</StyledButton>
+      <StyledExternalLink href={`https://${ensDomain}.limo`}>Go to {ensDomain}</StyledExternalLink>
+    </CardWrapper>
+  );
+}
diff --git a/src/components/EnsNameCard/styleds.ts b/src/components/EnsNameCard/styleds.ts
@@ -0,0 +1,42 @@
+import { Flex } from 'rebass';
+import styled from 'styled-components';
+import { ExternalLink, NimiSignatureColor } from '../../theme';
+import { ButtonPrimary } from '../Button';
+
+export const CardWrapper = styled(Flex)`
+  align-items: center;
+  background: rgba(255, 255, 255, 0.6);
+  box-shadow: 0px 5px 24px rgba(138, 143, 234, 0.12);
+  backdrop-filter: blur(20px);
+  width: 337px;
+  height: 348px;
+  flex-direction: column;
+  border-radius: 25px;
+  padding: 48px 32px;
+`;
+export const ProfilePic = styled.img`
+  background-position: center, center;
+  background-size: cover;
+
+  border-radius: 200px;
+  height: 83px;
+  width: 83px;
+  z-index: 1;
+`;
+export const DomainText = styled.div`
+  ${NimiSignatureColor};
+  margin-top: auto;
+  font-family: 'Baloo 2';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 100%;
+`;
+export const StyledButton = styled(ButtonPrimary)`
+  margin-top: auto;
+`;
+
+export const StyledExternalLink = styled(ExternalLink)`
+  ${NimiSignatureColor};
+  margin-top: 26px;
+`;
diff --git a/src/components/Footer/styled.ts b/src/components/Footer/styled.ts
@@ -4,9 +4,10 @@ import { ReactComponent as Twitter } from '../../assets/svg/twitter-logo.svg';
 
 export const FooterMain = styled.footer`
   display: flex;
-  justify-content: space-between;
+  position: absolute;
+  bottom: 0;
   width: 100%;
-  background: #fff;
+  background: transparent;
   min-height: 60px;
 `;
 
@@ -35,7 +36,7 @@ export const FooterNav = styled.div`
   align-items: center;
   align-content: center;
   justify-items: center;
-  justify-content: center;
+  justify-content: flex-end;
   width: 100%;
   gap: 12px;
 

diff --git a/src/components/Header/styleds.ts b/src/components/Header/styleds.ts
@@ -1,6 +1,6 @@
-import { transparentize } from 'polished'
-import styled from 'styled-components'
+import { transparentize } from 'polished';
+import styled from 'styled-components';
 
 export const GovernanceText = styled.span`
   color: ${({ theme }) => transparentize(0.6, theme.text5)};
-`
+`;
diff --git a/src/mock_fixtures/index.tsx b/src/mock_fixtures/index.tsx
@@ -0,0 +1,12 @@
+export const MockENSData = [
+  {
+    ensDomain: 'milanrasovic.eth',
+    imageUrl: 'https://pbs.twimg.com/profile_images/1511030457093271558/GBHgfEOS_400x400.jpg',
+  },
+  {
+    ensDomain: 'blue.eth',
+    imageUrl: 'https://pbs.twimg.com/profile_images/701077842197618688/6mRqLx_p_400x400.jpg',
+  },
+  { ensDomain: 'green.eth', imageUrl: '' },
+  { ensDomain: 'red.eth', imageUrl: '' },
+];
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
@@ -30,10 +30,12 @@ const HeaderWrapper = styled.div`
 const BodyWrapper = styled.div`
   display: flex;
   flex-direction: column;
+  justify-content: center;
   min-height: calc(100vh - 172px);
   width: 100%;
   padding-top: 60px;
   align-items: center;
+
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;

diff --git a/src/pages/Domains/index.tsx b/src/pages/Domains/index.tsx
@@ -1,9 +1,19 @@
+import { Flex } from 'rebass';
+import styled from 'styled-components';
+import { ENSNameCard } from '../../components/EnsNameCard';
+import { MockENSData } from '../../mock_fixtures';
+
+const StyledDomainsWrapper = styled(Flex)`
+  flex-wrap: wrap;
+  gap: 19px;
+`;
+
 export function Domains() {
   return (
-    <>
-      <div>
-        <h1>Profiles</h1>
-      </div>
-    </>
+    <StyledDomainsWrapper>
+      {MockENSData.map(({ ensDomain, imageUrl }) => {
+        return <ENSNameCard ensDomain={ensDomain} imageUrl={imageUrl} />;
+      })}
+    </StyledDomainsWrapper>
   );
 }
diff --git a/src/pages/Landing/Landing.tsx b/src/pages/Landing/Landing.tsx
@@ -14,7 +14,6 @@ import { Footer } from '../../components/Footer';
 
 const CTAButtonWrapper = styled(Flex)`
   align-items: center;
-
   gap: 10px;
 `;
 
@@ -30,16 +29,15 @@ export function Landing() {
             <HeroLead>Your ENS deserves better.</HeroLead>
             <HeroSub>Nimi, new me.</HeroSub>
           </HeroText>
-          <div>
-            <Link to="/domains">
-              <ButtonPrimary>
-                <CTAButtonWrapper>
-                  <CTAButtonLogo />
-                  <span>Go to Nimi</span>
-                </CTAButtonWrapper>
-              </ButtonPrimary>
-            </Link>
-          </div>
+
+          <Link to="/domains">
+            <ButtonPrimary>
+              <CTAButtonWrapper>
+                <CTAButtonLogo />
+                <span>Go to Nimi</span>
+              </CTAButtonWrapper>
+            </ButtonPrimary>
+          </Link>
         </Container>
       </Content>
       <Footer />

diff --git a/src/pages/Landing/styled.ts b/src/pages/Landing/styled.ts
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { NimiSignatureColor } from '../../theme';
 
 export const PageWrapper = styled.div`
   display: flex;
@@ -12,27 +13,29 @@ export const PageWrapper = styled.div`
 export const Header = styled.header`
   width: 100%;
   display: flex;
+  position: absolute;
+  margin-top: 60px;
+  top: 0;
   -webkit-box-pack: center;
   justify-content: center;
-  padding-top: 62px;
 `;
 
 export const Content = styled.main`
   display: flex;
   flex-direction: column;
   font-style: normal;
-  height: 800px;
-  margin-top: 160px;
+
   text-align: center;
 `;
 
 export const HeroText = styled.div`
+  ${NimiSignatureColor};
   font-size: 72px;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    font-size:42px;
+  `};
   align-items: center;
-  background: linear-gradient(154.32deg, #4368ea 0.48%, #c490dd 85.86%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  text-fill-color: transparent;
+  margin-bottom: 20px;
   justify-content: start;
   > * {
     -webkit-text-fill-color: transparent;

diff --git a/src/theme/index.tsx b/src/theme/index.tsx
@@ -138,6 +138,14 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   return <StyledComponentsThemeProvider theme={theme()}>{children}</StyledComponentsThemeProvider>;
 }
 
+export const NimiSignatureColor = css`
+  background: linear-gradient(111.35deg, #4368ea -25.85%, #c490dd 73.38%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+`;
+
 const TextWrapper = styled(Text)<{ color: keyof Colors }>`
   color: ${({ color, theme }) => (theme as any)[color]};
 `;