|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
@ -1,15 +0,0 @@ |
||||
import React from 'react' |
||||
import tw from 'twin.macro' |
||||
|
||||
const Index = (): JSX.Element => { |
||||
return ( |
||||
<div css={tw`max-w-5xl mx-auto`}> |
||||
<p css={tw`text-4xl my-4 text-center`}> |
||||
A Linux distribution built with Qt Quick and Arch Linux. |
||||
</p> |
||||
<img css={tw`rounded-lg`} src="./images/preview_light.png"></img> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default Index |
||||
@ -0,0 +1,24 @@ |
||||
import React from 'react' |
||||
import tw from 'twin.macro' |
||||
import Preview from '@/assets/images/preview.png' |
||||
import InfoBox from './InfoBox' |
||||
|
||||
const Index = (): JSX.Element => { |
||||
return ( |
||||
<div> |
||||
<p css={tw`text-4xl my-4 text-center px-8`}> |
||||
A Linux distribution built with Qt Quick and Arch Linux. |
||||
</p> |
||||
<div css={tw`w-full flex justify-center px-8 mb-8`}> |
||||
<img css={tw`rounded-lg max-w-5xl w-full`} src={Preview}/> |
||||
</div> |
||||
|
||||
<div css={tw`w-full`}> |
||||
<InfoBox header="An experience you have never seen before." description="insert text here" iconPath=""/> |
||||
<InfoBox reverse header="Insert title here" description="more text" iconPath=""/> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default Index |
||||
@ -0,0 +1,31 @@ |
||||
import React from 'react' |
||||
import tw from 'twin.macro' |
||||
|
||||
export type InfoBoxProps = { |
||||
header: string, |
||||
description: string, |
||||
iconPath: string, |
||||
reverse?: boolean |
||||
} |
||||
|
||||
const InfoBox = (props: InfoBoxProps): JSX.Element => { |
||||
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> |
||||
) |
||||
} |
||||
|
||||
export default InfoBox |
||||