diff --git a/web/src/components/Welcome.tsx b/web/src/components/Welcome.tsx index c280d12..60ff97d 100644 --- a/web/src/components/Welcome.tsx +++ b/web/src/components/Welcome.tsx @@ -1,6 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import {useTranslation} from 'react-i18next'; +import {Link} from 'react-router-dom'; import { FaMapSigns, @@ -31,8 +32,28 @@ const Welcome: React.FC = () => {
{t('title')}
{t('description')} + +
Try with these queries
+ + + namae + + + Tint + + + React + + + Spotify + + + Rust + + +
- + {t('providers.domains')} @@ -93,7 +114,7 @@ const Welcome: React.FC = () => { {t('providers.nta')} - + ); }; @@ -101,8 +122,6 @@ export default Welcome; const Container = styled.div` padding-bottom: 40px; - padding-right: 20vw; - padding-left: 20vw; text-align: center; font-size: 1.5rem; line-height: 1.6em; @@ -132,21 +151,38 @@ const Text = styled.p` const Hero = styled.div``; +const ExampleQueries = styled.div` + margin: 50px 0 50px; +`; + const List = styled.div` - margin-top: 50px; - padding: 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; - background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%); - color: white; - border-radius: 4px; + font-size: 1rem; + + ${mobile} { + justify-content: flex-start; + } +`; + +const ColorfulList = styled.div` + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; font-size: 1rem; ${mobile} { flex-direction: column; } + + padding: 20px; + margin-top: 50px; + color: white; + background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%); `; const ListItem = styled.div` @@ -164,3 +200,22 @@ const ListItem = styled.div` margin-right: 5px; } `; + +const ListButton = styled.div` + margin: 10px; + display: flex; + align-items: center; + font-size: 1.2rem; + line-height: 1em; + + ${mobile} { + margin: 10px 10px 0 0; + } + + a { + color: black; + padding: 10px; + border: 1px solid black; + border-radius: 2px; + } +`;