forked from CyberOS/website-wip
Merge branch 'master' of server.omame.tech:windowsboy111/website-wip
commit
adfe748d38
GPG Key ID:
A45B6F70F9633961
|
|
@ -1,28 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="256" height="256" viewBox="0 0 67.733332 67.733335" version="1.1" id="svg8" inkscape:version="1.0.2 (e86c870879, 2021-01-15)" sodipodi:docname="hamburger.svg">
|
||||
<defs id="defs2" />
|
||||
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="1.3068441" inkscape:cx="95.50416" inkscape:cy="132.903" inkscape:document-units="mm" inkscape:current-layer="layer1" inkscape:document-rotation="0" showgrid="false" units="px" inkscape:snap-bbox="false" inkscape:snap-midpoints="true" inkscape:window-width="1366" inkscape:window-height="675" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1">
|
||||
<sodipodi:guide position="0,33.866669" orientation="0,127.99999" id="guide71" />
|
||||
<sodipodi:guide position="33.866665,33.866669" orientation="-127.99999,0" id="guide73" />
|
||||
</sodipodi:namedview>
|
||||
<metadata id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1">
|
||||
<rect style="fill:#000000;stroke:none;stroke-width:0.0698019" id="rect18" width="52.916668" height="6.6145835" x="7.4083309" y="13.229167" />
|
||||
<rect style="fill:#000000;stroke:none;stroke-width:0.0698019" id="rect18-3" width="52.916668" height="6.6145835" x="7.4083314" y="30.559372" />
|
||||
<rect style="fill:#000000;stroke:none;stroke-width:0.0698019" id="rect18-6" width="52.916668" height="6.6145835" x="7.4083333" y="47.095833" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 271 B |
|
|
@ -30,9 +30,27 @@ const Footer = (): JSX.Element => {
|
|||
console.log()
|
||||
|
||||
return (
|
||||
<div css={tw`w-full bg-light-bg-tertiary dark:bg-dark-bg-tertiary py-4`}>
|
||||
<div
|
||||
css={tw`w-full md:flex block justify-around items-center bg-light-bg-tertiary dark:bg-dark-bg-tertiary py-4 text-center`}
|
||||
>
|
||||
<div></div>
|
||||
|
||||
<div css={tw`focus:outline-none mx-10 text-center`}>
|
||||
{t('footerCopyright')}
|
||||
<br />
|
||||
<span css={tw`italic`}>
|
||||
{t('footer')}
|
||||
<a
|
||||
css={tw`text-light-text-link no-underline hover:underline`}
|
||||
href="https://git.omame.tech/CyberOS-Community/website-wip"
|
||||
>
|
||||
sending a pull request
|
||||
</a>
|
||||
.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
css={tw`flex absolute right-10 bg-light-bg-tertiary dark:bg-dark-bg-tertiary `}
|
||||
css={tw`relative flex mr-4 text-center items-center bg-light-bg-tertiary dark:bg-dark-bg-tertiary `}
|
||||
>
|
||||
<Menu as="div">
|
||||
<Menu.Button css={tw`focus:outline-none mr-2`}>
|
||||
|
|
@ -57,26 +75,12 @@ const Footer = (): JSX.Element => {
|
|||
</Transition>
|
||||
</Menu>
|
||||
<button
|
||||
css={tw`focus:outline-none bg-light-bg-tertiary dark:bg-dark-bg-tertiary `}
|
||||
css={tw`focus:outline-none bg-light-bg-tertiary dark:bg-dark-bg-tertiary`}
|
||||
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||||
>
|
||||
{theme === 'dark' ? <HiSun size={32} /> : <IoMdMoon size={32} />}
|
||||
</button>
|
||||
</div>
|
||||
<div css={tw`focus:outline-none mx-10 text-center`}>
|
||||
{t('footerCopyright')}
|
||||
<br />
|
||||
<span css={tw`italic`}>
|
||||
{t('footer')}
|
||||
<a
|
||||
css={tw`text-light-text-link no-underline hover:underline`}
|
||||
href="https://git.omame.tech/CyberOS-Community/website-wip"
|
||||
>
|
||||
sending a pull request
|
||||
</a>
|
||||
.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,58 +1,102 @@
|
|||
import React, { Fragment } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import tw from 'twin.macro'
|
||||
import Logo from '@/assets/images/cyber-logo.svg'
|
||||
import Hamburger from '@/assets/images/hamburger.svg'
|
||||
import { Menu, Transition } from '@headlessui/react'
|
||||
import { css, cx } from '@emotion/css'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const NavbarLink = styled.a`
|
||||
${tw`m-2 inline-block no-underline hover:underline`}
|
||||
`
|
||||
|
||||
const NurgerMenuLink = styled.a`
|
||||
${tw`block w-full my-2 text-center no-underline hover:underline text-light-text-link`}
|
||||
`
|
||||
|
||||
const Navbar = (): JSX.Element => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const links = [
|
||||
{
|
||||
title: t('home'),
|
||||
url: '#/',
|
||||
},
|
||||
{
|
||||
title: t('about'),
|
||||
url: '#/about',
|
||||
},
|
||||
{
|
||||
title: t('download'),
|
||||
url: '#/download',
|
||||
},
|
||||
{
|
||||
title: 'Gitea',
|
||||
url: 'https://git.omame.tech/CyberOS-Community',
|
||||
},
|
||||
{
|
||||
title: t('docs'),
|
||||
url: 'https://getcyberos.org/docs/',
|
||||
},
|
||||
{
|
||||
title: t('donate'),
|
||||
url: 'https://www.paypal.com/donate/?hosted_button_id=G3LABE6PPHACN',
|
||||
},
|
||||
]
|
||||
|
||||
const navbarItems = links.map((link) => {
|
||||
return (
|
||||
<a
|
||||
css={tw`m-2 inline-block no-underline hover:underline`}
|
||||
key="{link.url}"
|
||||
href={link.url}
|
||||
>
|
||||
{link.title}
|
||||
</a>
|
||||
)
|
||||
})
|
||||
|
||||
const burgerItems = links.map((link) => {
|
||||
return (
|
||||
<Menu.Item key={link.url}>
|
||||
<a
|
||||
css={tw`block w-full mt-2 mb-4 text-left ml-12 no-underline hover:underline text-light-text-link`}
|
||||
href={link.url}
|
||||
>
|
||||
{link.title}
|
||||
</a>
|
||||
</Menu.Item>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
css={tw`hidden sm:flex sticky w-full top-0 bg-light-bg-tertiary dark:bg-dark-bg-tertiary justify-around items-center h-20`}
|
||||
css={tw`hidden md:flex sticky shadow-navbar w-full top-0 bg-light-bg-tertiary dark:bg-dark-bg-tertiary justify-around items-center h-20`}
|
||||
>
|
||||
<a href="#/" css={tw`flex text-3xl items-center `}>
|
||||
<img css={tw`w-14 h-14 mx-4`} alt="CyberOS" src={Logo} />
|
||||
CyberOS
|
||||
</a>
|
||||
<div css={tw`text-light-text-link`}>
|
||||
<NavbarLink href="#/about">{t('about')}</NavbarLink>
|
||||
<NavbarLink href="#/download">{t('download')}</NavbarLink>
|
||||
<NavbarLink href="https://git.omame.tech/CyberOS">
|
||||
Gitea
|
||||
</NavbarLink>
|
||||
<NavbarLink href="https://getcyberos.org/docs/">
|
||||
{t('docs')}
|
||||
</NavbarLink>
|
||||
<NavbarLink href="https://www.paypal.com/donate/?hosted_button_id=G3LABE6PPHACN">
|
||||
{t('donate')}
|
||||
</NavbarLink>
|
||||
</div>
|
||||
<div css={tw`text-light-text-link`}>{navbarItems}</div>
|
||||
</div>
|
||||
<div
|
||||
css={tw`sm:hidden sticky w-full top-0 bg-light-bg-tertiary dark:bg-dark-bg-tertiary flex justify-around items-center h-20`}
|
||||
css={tw`md:hidden sticky shadow-navbar w-full top-0 bg-light-bg-tertiary dark:bg-dark-bg-tertiary flex justify-around items-center h-20`}
|
||||
>
|
||||
<a href="#/" css={tw`flex text-3xl items-center `}>
|
||||
<img css={tw`w-14 h-14 mx-4`} alt="CyberOS" src={Logo} />
|
||||
CyberOS
|
||||
</a>
|
||||
<Menu>
|
||||
<Menu.Button css={tw`focus:outline-none`}>
|
||||
<a href="#/" css={tw`flex text-3xl items-center `}>
|
||||
<img css={tw`w-10 h-10 mx-4`} alt="menu" src={Hamburger} />
|
||||
</a>
|
||||
<Menu.Button css={tw`focus:outline-none `}>
|
||||
<button css={tw`flex border rounded-md border-gray-200`}>
|
||||
<svg
|
||||
css={tw`w-6 h-6 my-1.5 mx-3`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1"
|
||||
d="M2 6h20M2 12h20M2 18h20"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
{...{
|
||||
|
|
@ -66,29 +110,9 @@ const Navbar = (): JSX.Element => {
|
|||
}}
|
||||
>
|
||||
<Menu.Items
|
||||
css={tw`absolute top-20 w-full bg-light-bg-tertiary dark:bg-dark-bg-tertiary`}
|
||||
css={tw`absolute shadow-navbar top-20 w-full bg-light-bg-tertiary dark:bg-dark-bg-tertiary`}
|
||||
>
|
||||
<Menu.Item>
|
||||
<NurgerMenuLink href="#/about">About</NurgerMenuLink>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<NurgerMenuLink href="#/download">Download</NurgerMenuLink>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<NurgerMenuLink href="#/https://github.com/cyberos">
|
||||
GitHub
|
||||
</NurgerMenuLink>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<NurgerMenuLink href="https://getcyberos.org/docs/">
|
||||
Docs
|
||||
</NurgerMenuLink>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<NurgerMenuLink href="https://www.paypal.com/donate/?hosted_button_id=G3LABE6PPHACN">
|
||||
Donate
|
||||
</NurgerMenuLink>
|
||||
</Menu.Item>
|
||||
{burgerItems}
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,38 @@
|
|||
{
|
||||
"home": "Domů",
|
||||
"about": "O nás",
|
||||
"about-CyberOSTeam": "Tým CyberOS",
|
||||
"about-LeadDeveloper": "Vedoucí vývojáři",
|
||||
"main-title": "CyberOS je linuxová distribuce postavená na Qt Quick a Arch Linuxu.",
|
||||
"about-p2": "Naše sociální média najdete zde:",
|
||||
"about-socialMedia": "Sociální média",
|
||||
"aboutCyberOS": "O CyberOS",
|
||||
"docs": "Dokumentace",
|
||||
"donate": "Darovat",
|
||||
"download": "Stáhnout",
|
||||
"footerCopyright": "Copyleft 🄯 Copyright © Tým CyberOS 2020–2021",
|
||||
"introQuote": "Linuxová distribuce postavená na Qt Quick a Arch Linux.",
|
||||
"footer": "Pššt, tento web je ve vývoji. Můžete nám pomoct [zasláním pull požadavku]."
|
||||
"docs": "Dokumentace",
|
||||
"donate": "Podpořit",
|
||||
|
||||
"footer": "Na této stránce se stále pracuje, můžete pomoci [zasláním pull requestu].",
|
||||
"footerCopyright": "Copyleft 🄯 Copyright © CyberOS Team 2020–2021",
|
||||
|
||||
"main-title": "CyberOS je Linuxová distribuce postavená s Qt Quick a Arch Linuxem.",
|
||||
|
||||
"about-CyberOSTeam": "CyberOS Tým",
|
||||
"about-LeadDeveloper": "Hlavní vývojář",
|
||||
"about-socialMedia": "Sociální sítě",
|
||||
"about-p2": "Můžete nás najít na našich sociálních sítích:",
|
||||
"aboutCyberOS": "About CyberOS",
|
||||
|
||||
"introQuote": "CyberOS je Linuxová distribuce postavená s Qt Quick a Arch Linuxem.",
|
||||
|
||||
"infobox-1-header": "Zažijte linux jako nikdy dřív",
|
||||
"infobox-1-description": "CyberOS přichází s předinstalovaným setem aplikací aby uživatelé měli tu nejlepší zkušenost.",
|
||||
"infobox-2-header": "Bezpečnější.",
|
||||
"infobox-2-description": "Díky otevřeným zdrojovým kódum každý může zkontrolovat zranitelnosti a dokonce upravit program.",
|
||||
"infobox-3-header": "Snadná instalace aplikací.",
|
||||
"infobox-3-description": "CyberOS využívá pacman správce balíčků, jednoduchou správu aplikací a softwaru.",
|
||||
"infobox-4-header": "Designujte UI rychleji než kdykoliv jindy.",
|
||||
"infobox-4-description": "Díky MeuiKit a qml můžete vytvořit UI rychle bez kompromisů.",
|
||||
|
||||
"downloadCyberOS": "Stáhnout CyberOS",
|
||||
"downloadLatest": "Nejnovější ISO můžete stáhnout zde.",
|
||||
"mirrors": "Zrcadla",
|
||||
"pickMirror": "Pokud preferujete jinou zemi, můžete využít zrcadla.",
|
||||
"canada": "Kanada",
|
||||
"germany": "Německo",
|
||||
"japan": "Japonsko",
|
||||
"russia": "Rusko"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,38 @@
|
|||
{
|
||||
"home": "Home",
|
||||
"about": "About",
|
||||
"about-CyberOSTeam": "CyberOS Team",
|
||||
"about-LeadDeveloper": "Lead Developers",
|
||||
"main-title": "CyberOS is a Linux distribution built with Qt Quick and Arch Linux.",
|
||||
"about-p2": "You can find our social media here:",
|
||||
"about-socialMedia": "Social Media",
|
||||
"aboutCyberOS": "About CyberOS",
|
||||
"download": "Download",
|
||||
"docs": "Documentation",
|
||||
"donate": "Donate",
|
||||
"download": "Download",
|
||||
"footerCopyright": "Copyleft 🄯 Copyright © CyberOS Team 2020–2021",
|
||||
"introQuote": "A Linux distribution built with Qt Quick and Arch Linux.",
|
||||
|
||||
"footer": "Psst, this website is a work-in-progress. You can help by [sending a pull request].",
|
||||
"footerCopyright": "Copyleft 🄯 Copyright © CyberOS Team 2020–2021",
|
||||
|
||||
"main-title": "CyberOS is a Linux distribution built with Qt Quick and Arch Linux.",
|
||||
|
||||
"about-CyberOSTeam": "CyberOS Team",
|
||||
"about-LeadDeveloper": "Lead Developers",
|
||||
"about-socialMedia": "Social Media",
|
||||
"about-p2": "You can find our social media here:",
|
||||
"aboutCyberOS": "About CyberOS",
|
||||
|
||||
"introQuote": "A Linux distribution built with Qt Quick and Arch Linux.",
|
||||
|
||||
"infobox-1-header": "Experience Linux like never before.",
|
||||
"infobox-1-description": "CyberOS comes with a suite of applications to ensure that users have a consistent experience in their daily use.",
|
||||
"infobox-2-header": "More secure.",
|
||||
"infobox-2-description": "With open-source code anyone can view and check for backdoors, or even contribute to the project themself.",
|
||||
"infobox-3-header": "Install apps easily.",
|
||||
"infobox-3-description": "CyberOS uses the pacman package manager, meaning that its easy to install, remove, and update all software on the OS.",
|
||||
"infobox-4-header": "Design UI faster than ever.",
|
||||
"infobox-4-description": "Using our MeuiKit and qml you can get UI design done faster than ever without compromises.",
|
||||
|
||||
"downloadCyberOS": "Download CyberOS",
|
||||
"downloadLatest": "You can download the latest ISO here.",
|
||||
"mirrors": "Mirrors",
|
||||
"pickMirror": "If you prefer, you can pick a mirror to download from.",
|
||||
"canada": "Canada",
|
||||
"germany": "Germany",
|
||||
"japan": "Japan",
|
||||
"russia": "Russia",
|
||||
"downloadLatest": "You can download the latest ISO here.",
|
||||
"mirrors": "Mirrors",
|
||||
"pickMirror": "If you prefer, you can pick a mirror to download from."
|
||||
"russia": "Russia"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react'
|
||||
import tw from 'twin.macro'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const Member = (props: { name: string; account: string }): JSX.Element => {
|
||||
return (
|
||||
|
|
@ -17,16 +18,16 @@ const Member = (props: { name: string; account: string }): JSX.Element => {
|
|||
}
|
||||
|
||||
const About = (): JSX.Element => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div css={tw`max-w-4xl flex justify-center p-8`}>
|
||||
<div>
|
||||
<h1 css={tw`text-3xl my-4 `}>About CyberOS</h1>
|
||||
<h1 css={tw`text-3xl my-4 `}>{t('aboutCyberOS')}</h1>
|
||||
<p>{t('main-title')}</p>
|
||||
<h2 css={tw`text-2xl my-6`}>{t('about-socialMedia')} </h2>
|
||||
<p>
|
||||
CyberOS is a Linux distribution built with Qt Quick and Arch Linux.
|
||||
</p>
|
||||
<h2 css={tw`text-2xl my-6`}>Social media</h2>
|
||||
<p>
|
||||
You can find our social media here:{' '}
|
||||
{t('about-p2')}{' '}
|
||||
<a
|
||||
href="https://twitter.com/CyberOS_Linux"
|
||||
css={tw`text-light-text-link underline`}
|
||||
|
|
@ -42,11 +43,10 @@ const About = (): JSX.Element => {
|
|||
</a>
|
||||
.
|
||||
</p>
|
||||
<h2 css={tw`text-2xl my-6`}>Lead Developers</h2>
|
||||
<Member name="Reven Martin" account="revenmartin" />
|
||||
<h2 css={tw`text-2xl my-6`}>{t('about-LeadDeveloper')}</h2>
|
||||
<Member name="omame" account="omaemae" />
|
||||
|
||||
<h2 css={tw`text-2xl my-6`}>CyberOS team</h2>
|
||||
<h2 css={tw`text-2xl my-6`}>{t('about-CyberOSTeam')}</h2>
|
||||
<Member name="Alvaro Samudio" account="alvarosamudio" />
|
||||
<Member name="Flex Zhong" account="ChungZH" />
|
||||
<Member name="Simon Peter" account="probonopd" />
|
||||
|
|
|
|||
|
|
@ -34,18 +34,18 @@ const Download = (): JSX.Element => {
|
|||
css={tw`text-light-text-link underline`}
|
||||
href="https://mirror.getcyberos.org/iso/latest/"
|
||||
>
|
||||
You can download the latest ISO here.
|
||||
{t('downloadLatest')}
|
||||
</a>
|
||||
<h1 css={tw`text-3xl my-8`}>Mirrors</h1>
|
||||
<p>If you prefer, you can pick a mirror to download from.</p>
|
||||
<p>{t('pickMirror')}</p>
|
||||
|
||||
<Mirror country="Canada" links={['cyber.123780.xyz']} />
|
||||
<Mirror country={t('canada')} links={['cyber.123780.xyz']} />
|
||||
<Mirror
|
||||
country="Germany"
|
||||
country={t('germany')}
|
||||
links={['cyber.lukgth.de', 'mirror.getcyberos.org']}
|
||||
/>
|
||||
<Mirror country="Japan" links={['cyber-jp.123780.xyz']} />
|
||||
<Mirror country="Russia" links={['cyber.kittyle.org']} />
|
||||
<Mirror country={t('japan')} links={['cyber-jp.123780.xyz']} />
|
||||
<Mirror country={t('russia')} links={['cyber.kittyle.org']} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -8,28 +8,16 @@ const Index = (): JSX.Element => {
|
|||
const { t } = useTranslation()
|
||||
return (
|
||||
<div>
|
||||
<p css={tw`text-4xl my-4 text-center px-8`}>{t('main-title')}</p>
|
||||
<h1 css={tw`text-3xl my-4 text-center px-8`}>{t('main-title')}</h1>
|
||||
<div css={tw`w-full flex justify-center px-8 mb-8`}>
|
||||
<img css={tw`rounded-lg max-w-3xl w-full`} src={Preview} />
|
||||
</div>
|
||||
|
||||
<div css={tw`w-full`}>
|
||||
<InfoBox
|
||||
header="Experience Linux like never before."
|
||||
description="Placeholder."
|
||||
iconPath=""
|
||||
/>
|
||||
<InfoBox
|
||||
reverse
|
||||
header="More secure."
|
||||
description="With open source code anyone can view and check for backdoors, or even contribute to the project themself."
|
||||
iconPath=""
|
||||
/>
|
||||
<InfoBox
|
||||
header="Design UI faster than ever"
|
||||
description="Using our MeuiKit and qml you can get UI design done faster than ever without compromises"
|
||||
iconPath=""
|
||||
/>
|
||||
<InfoBox name="infobox-1" iconPath="" />
|
||||
<InfoBox reverse name="infobox-2" iconPath="" />
|
||||
<InfoBox name="infobox-3" iconPath="" />
|
||||
<InfoBox reverse name="infobox-4" iconPath="" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,29 +1,33 @@
|
|||
import React from 'react'
|
||||
import tw from 'twin.macro'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export type InfoBoxProps = {
|
||||
header: string,
|
||||
description: string,
|
||||
iconPath: string,
|
||||
name: string
|
||||
iconPath: string
|
||||
reverse?: boolean
|
||||
}
|
||||
|
||||
const InfoBox = (props: InfoBoxProps): JSX.Element => {
|
||||
const { t } = useTranslation()
|
||||
const img = <img src={props.iconPath} css={tw`w-24 md:w-48 h-24 md:h-48`} />
|
||||
return (
|
||||
<div css={[tw`w-full flex justify-evenly items-center p-8`, !props.reverse ? tw`bg-light-bg-secondary dark:bg-dark-bg-secondary` : {}]}>
|
||||
{props.reverse ? <>
|
||||
<div css={tw`w-full max-w-xl`}>
|
||||
<p css={tw`text-light-text-disabled dark:text-dark-text-disabled text-xl md:text-2xl`}>{props.header}</p>
|
||||
<p>{props.description}</p>
|
||||
</div>
|
||||
<img src={props.iconPath} css={tw`w-24 md:w-48 h-24 md:h-48`}/>
|
||||
</> : <>
|
||||
<img src={props.iconPath} css={tw`w-24 md:w-48 h-24 md:h-48`}/>
|
||||
<div css={tw`text-right w-full max-w-xl`}>
|
||||
<p css={tw`text-light-text-disabled dark:text-dark-text-disabled text-xl md:text-2xl`}>{props.header}</p>
|
||||
<p>{props.description}</p>
|
||||
</div>
|
||||
</>}
|
||||
<div
|
||||
css={[
|
||||
tw`w-full flex justify-evenly p-8`,
|
||||
!props.reverse && tw`bg-light-bg-secondary dark:bg-dark-bg-secondary`,
|
||||
]}
|
||||
>
|
||||
{props.reverse && img}
|
||||
<div css={[tw`w-full max-w-xl`, props.reverse && tw`text-right`]}>
|
||||
<p
|
||||
css={tw`text-light-text-disabled dark:text-dark-text-disabled text-xl md:text-2xl`}
|
||||
>
|
||||
{t(props.name + '-header')}
|
||||
</p>
|
||||
<p> {t(props.name + '-description')}</p>
|
||||
</div>
|
||||
{!props.reverse && img}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ module.exports = {
|
|||
bg: {
|
||||
primary: '#ffffff',
|
||||
secondary: '#ededed',
|
||||
tertiary: '#d9d9d9',
|
||||
tertiary: '#ffffff', // previous value #d9d9d9
|
||||
},
|
||||
text: {
|
||||
default: '#171a20',
|
||||
|
|
@ -35,6 +35,9 @@ module.exports = {
|
|||
blue: '#2273e6',
|
||||
},
|
||||
},
|
||||
boxShadow: {
|
||||
navbar: '0px 3px 8px rgba(0, 0, 0, 0.04)',
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue