docs: updated docs

This commit is contained in:
Leifer Mendez
2022-12-24 14:10:27 +01:00
parent b336586de3
commit ba02496222
12 changed files with 274 additions and 178 deletions

View File

@@ -5,31 +5,25 @@ export default component$(() => {
<section class="relative">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="py-12 md:py-20">
<div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
<h2 class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
<span class="text-[#039de1]">Qwik</span> +{' '}
<br class="block sm:hidden" />
<span class="text-[#039de1] sm:whitespace-nowrap">
Tailwind CSS
</span>
</h2>
<p class="text-xl text-gray-600 dark:text-slate-400">
Be very surprised by these huge fake numbers you are
seeing on this page. <br class="hidden md:inline" />
Don't waste more time!
</p>
<video
style={'height:600px'}
width="100%"
height="400"
autoPlay
muted
loop
playsInline
>
<source
src="https://leifer-landing-page.s3.us-east-2.amazonaws.com/xbmcc-kx99h.webm"
type='video/mp4; codecs="hvc1"'
/>
<div class="mt-6">
<a
class="btn btn-primary mb-4 sm:mb-0 w-full sm:w-auto"
href="https://github.com/onwidget/qwind"
target="_blank"
rel="noopener"
>
Get template
</a>
</div>
</div>
<source
src="https://leifer-landing-page.s3.us-east-2.amazonaws.com/xbmcc-kx99h.webm"
type="video/webm"
/>
</video>
</div>
</div>
</section>

View File

@@ -54,14 +54,6 @@ export default component$(() => {
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">
<div class="col-span-12 lg:col-span-4 pr-8">
<div class="mb-2">
<Link
class="inline-block font-bold text-xl"
href={'/'}
>
Qwind
</Link>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
Nos sentimos muy afortunados de poder contribuir a
este proyecto y esperamos poder seguir trabajando

View File

@@ -64,24 +64,6 @@ export default component$(() => {
</div>
<div class="block md:flex items-center flex-1">
<div class="relative m-auto max-w-4xl">
{/* <video
width="600"
height="100%"
autoPlay
muted
playsInline
>
<source
src="https://s19.aconvert.com/convert/p3r68-cdx67/5if2i-k2pvs.webm"
type='video/mp4; codecs="hvc1"'
/>
<source
src="https://s19.aconvert.com/convert/p3r68-cdx67/5if2i-k2pvs.webm"
type="video/webm"
/>
</video> */}
<picture>
<source srcSet={srcsetAvif} type="image/avif" />
<source srcSet={srcsetWebp} type="image/webp" />

View File

@@ -16,8 +16,8 @@ export default component$(
}) => {
return (
<div>
{options.map((item) => (
<UlCompoent title={item.title} list={item.list} />
{options.map((item, i) => (
<UlCompoent key={i} title={item.title} list={item.list} />
))}
</div>
)

View File

@@ -0,0 +1,74 @@
import { component$ } from '@builder.io/qwik'
export const ButtonLink = component$(
(props: { name: string; link: string; direction: 'left' | 'right' }) => {
const ArrowRight = () => (
<svg
viewBox="0 0 3 6"
class="ml-3 w-auto h-1.5 text-slate-400 overflow-visible group-hover:text-slate-600 dark:group-hover:text-slate-300"
>
<path
d="M0 0L3 3L0 6"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
)
const ArrowLeft = () => (
<svg
viewBox="0 0 3 6"
class="mr-3 w-auto h-1.5 text-slate-400 overflow-visible group-hover:text-slate-600 dark:group-hover:text-slate-300"
>
<path
d="M3 0L0 3L3 6"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
)
return (
<a
class="group flex items-center hover:text-slate-900 dark:hover:text-white"
href={props.link}
>
{props.direction === 'left' ? (
<>
<ArrowLeft />
{props.name}
</>
) : (
<>
{props.name}
<ArrowRight />
</>
)}
</a>
)
}
)
export default component$(
(props: { pages: ({ name: string; link: string } | null)[] }) => {
const { pages } = props
return (
<div class="text-sm leading-6 mt-12">
<div class="mb-10 text-slate-700 font-semibold flex justify-between items-center dark:text-slate-200">
{pages[0] ? (
<ButtonLink direction="left" {...pages[0]} />
) : null}
{pages[1] ? (
<ButtonLink direction="right" {...pages[1]} />
) : null}
</div>
</div>
)
}
)