diff --git a/components/hero.js b/components/hero.js index 7e7aee9..6b07266 100644 --- a/components/hero.js +++ b/components/hero.js @@ -130,6 +130,7 @@ const CTAPrimary = styled.a` height: 2.81rem; cursor: pointer; padding: 0 3.5rem; + text-align: center; margin: 0 0 10px 0; border-radius: 7px; line-height: 2.8rem; diff --git a/components/paths.js b/components/paths.js index a3ac9a7..03c0ff5 100644 --- a/components/paths.js +++ b/components/paths.js @@ -151,7 +151,7 @@ const IMPLEMENTATIONS = [ description: 'Create an account with one of the supported providers to get started immediately. Like your preferred email service, the provider handles all of the nuts-and-bolts behinds the scenes and is the easiest way to get started with your Lightning Address.', image: '/images/data4.svg', linkText: 'Get Started', - link: 'https://google.com', + link: '#providers', isSecondary: false }, { diff --git a/components/providers.js b/components/providers.js index 6de54fb..fd0fbca 100644 --- a/components/providers.js +++ b/components/providers.js @@ -23,7 +23,7 @@ const ProvidersInner = styled.div` flex-direction: column; justify-content: center; - ${media.tablet` + ${media.largeTablet` max-width: 1000px; flex-direction: row; `} @@ -32,7 +32,7 @@ const ProvidersInner = styled.div` const ProvidersLeft = styled.div` padding-bottom: 60px; - ${media.tablet` + ${media.largeTablet` flex: 1; padding-bottom: 0; padding-right: 10px; @@ -40,13 +40,13 @@ const ProvidersLeft = styled.div` `; const ProvidersRight = styled.div` - ${media.tablet` + ${media.largeTablet` flex: 1; `} `; const ProvidersRightInner = styled.div` - ${media.tablet` + ${media.largeTablet` padding-left: 100px; `} `; @@ -61,9 +61,12 @@ const ProvidersTitle = styled.div` text-align: center; letter-spacing: -1px; + ${media.largeTablet` + text-align: left; + `} + ${media.tablet` padding: 0; - text-align: left; `} `; @@ -78,10 +81,13 @@ const ProvidersDescription = styled.div` letter-spacing: -0.5px; margin: 20px auto 40px auto; + ${media.largeTablet` + text-align: left; + `} + ${media.tablet` padding: 0; font-size: 20px; - text-align: left; line-height: 1.6; letter-spacing: -1px; margin: 20px auto 0 auto; @@ -132,7 +138,7 @@ const ProvidersEmailButtonText = styled.div` `; const ProviderCard = styled.div` - margin: 20px; + margin: 20px auto 20px auto; display: flex; padding: 16px; min-height: 100px; @@ -153,7 +159,7 @@ const ProviderCard = styled.div` `} `; -const ProviderSignUpButton = styled.div` +const ProviderSignUpButton = styled.a` color: #fff; width: 140px; height: 2.81rem; @@ -163,6 +169,7 @@ const ProviderSignUpButton = styled.div` border-radius: 7px; margin: 15px 0 0 0; line-height: 2.8rem; + text-decoration: none; background-color: #0070f3; box-shadow: 0 4px 14px 0 rgb(0 118 255 / 39%); @@ -192,19 +199,19 @@ export const Providers = () => ( - Download App + Download App - Open Telegram + Open Telegram - Create Account + Create Account - Sign Up + Sign Up diff --git a/public/images/data2.svg b/public/images/data2.svg index 6ae7045..b54b6d7 100644 --- a/public/images/data2.svg +++ b/public/images/data2.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/data3.svg b/public/images/data3.svg index c8cd3d8..6f731e8 100644 --- a/public/images/data3.svg +++ b/public/images/data3.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/data4.svg b/public/images/data4.svg index f9a446a..47b29da 100644 --- a/public/images/data4.svg +++ b/public/images/data4.svg @@ -1 +1 @@ -_ \ No newline at end of file +_ \ No newline at end of file