mirror of
https://github.com/cheveguerra/bot-whatsapp.git
synced 2026-04-18 11:39:15 +00:00
docs: 📝 update docs
This commit is contained in:
Leifer Mendez
18
packages/docs/src/components/atoms/Logo.tsx
Normal file
18
packages/docs/src/components/atoms/Logo.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
|
||||
// @ts-ignore
|
||||
import logoSrc from '~/assets/images/logo.png?width=64&height=64&png'
|
||||
|
||||
export default component$(() => (
|
||||
<span class="self-center ml-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white flex items-center">
|
||||
<img
|
||||
src={logoSrc}
|
||||
class="inline-block mr-1"
|
||||
width={32}
|
||||
height={32}
|
||||
alt="Qwind Logo"
|
||||
loading="lazy"
|
||||
/>
|
||||
Qwind
|
||||
</span>
|
||||
))
|
||||
3
packages/docs/src/components/core/DarkThemeLauncher.tsx
Normal file
3
packages/docs/src/components/core/DarkThemeLauncher.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
export const DarkThemeLauncher = () => (
|
||||
<script>{`if(localStorage.theme==="dark"){document.documentElement.classList.add("dark");}else if(typeof localStorage.theme==="undefined"){if(window.matchMedia("(prefers-color-scheme: dark)").matches){document.documentElement.classList.add("dark");}}`}</script>
|
||||
)
|
||||
35
packages/docs/src/components/core/RouterHead.tsx
Normal file
35
packages/docs/src/components/core/RouterHead.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
import { useDocumentHead, useLocation } from '@builder.io/qwik-city'
|
||||
|
||||
/**
|
||||
* The RouterHead component is placed inside of the document `<head>` element.
|
||||
*/
|
||||
export const RouterHead = component$(() => {
|
||||
const head = useDocumentHead()
|
||||
const loc = useLocation()
|
||||
|
||||
return (
|
||||
<>
|
||||
<title>{head.title}</title>
|
||||
|
||||
<link rel="canonical" href={loc.href} />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0"
|
||||
/>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
|
||||
{head.meta.map((m) => (
|
||||
<meta {...m} />
|
||||
))}
|
||||
|
||||
{head.links.map((l) => (
|
||||
<link {...l} />
|
||||
))}
|
||||
|
||||
{head.styles.map((s) => (
|
||||
<style {...s.props} dangerouslySetInnerHTML={s.style} />
|
||||
))}
|
||||
</>
|
||||
)
|
||||
})
|
||||
38
packages/docs/src/components/core/ToggleMenu.tsx
Normal file
38
packages/docs/src/components/core/ToggleMenu.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { component$, useStore } from '@builder.io/qwik'
|
||||
|
||||
import { IconMenu } from '~/components/icons/IconMenu'
|
||||
|
||||
interface ItemProps {
|
||||
iconClass?: string
|
||||
}
|
||||
|
||||
export default component$((props: ItemProps) => {
|
||||
const { iconClass } = props
|
||||
|
||||
const store = useStore({
|
||||
isExpanded: false,
|
||||
})
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
class={`ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center transition ${
|
||||
store.isExpanded ? 'expanded' : ''
|
||||
}`}
|
||||
aria-label="Toggle Menu"
|
||||
data-aw-toggle-menu={true}
|
||||
onClick$={() => {
|
||||
store.isExpanded = store.isExpanded ? false : true
|
||||
|
||||
// TODO:
|
||||
document.body.classList.toggle('overflow-hidden')
|
||||
document.getElementById('header')?.classList.toggle('h-screen')
|
||||
document
|
||||
.querySelector('#header nav')
|
||||
?.classList.toggle('hidden')
|
||||
}}
|
||||
>
|
||||
<IconMenu class={iconClass} />
|
||||
</button>
|
||||
)
|
||||
})
|
||||
52
packages/docs/src/components/core/ToggleTheme.tsx
Normal file
52
packages/docs/src/components/core/ToggleTheme.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { component$, useStore, useClientEffect$ } from '@builder.io/qwik'
|
||||
|
||||
import { IconSun } from '~/components/icons/IconSun'
|
||||
import { IconMoon } from '../icons/IconMoon'
|
||||
|
||||
interface ItemProps {
|
||||
iconClass?: string
|
||||
}
|
||||
|
||||
export default component$((props: ItemProps) => {
|
||||
const { iconClass } = props
|
||||
const store = useStore({
|
||||
theme:
|
||||
(typeof window !== 'undefined' && window?.localStorage?.theme) ||
|
||||
undefined,
|
||||
})
|
||||
|
||||
useClientEffect$(() => {
|
||||
store.theme =
|
||||
window.localStorage.theme === 'dark' ||
|
||||
(!('theme' in window.localStorage) &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
? 'dark'
|
||||
: 'light'
|
||||
})
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
|
||||
aria-label="Toggle between Dark and Light mode"
|
||||
onClick$={() => {
|
||||
switch (store.theme) {
|
||||
case 'dark':
|
||||
document.documentElement.classList.remove('dark')
|
||||
store.theme = window.localStorage.theme = 'light'
|
||||
break
|
||||
default:
|
||||
document.documentElement.classList.add('dark')
|
||||
store.theme = window.localStorage.theme = 'dark'
|
||||
break
|
||||
}
|
||||
}}
|
||||
>
|
||||
{store.theme == 'dark' ? (
|
||||
<IconMoon class={iconClass} />
|
||||
) : (
|
||||
<IconSun class={iconClass} />
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})
|
||||
27
packages/docs/src/components/icons/IconArrowDownRight.tsx
Normal file
27
packages/docs/src/components/icons/IconArrowDownRight.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
interface ItemProps {
|
||||
class?: string
|
||||
}
|
||||
|
||||
export const IconArrowDownRight = (props: ItemProps) => {
|
||||
const { class: className } = props
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={`icon icon-tabler icon-tabler-arrow-down-right ${
|
||||
className || 'w-5 h-5'
|
||||
}`}
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<line x1="7" y1="7" x2="17" y2="17"></line>
|
||||
<polyline points="17 8 17 17 8 17"></polyline>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
17
packages/docs/src/components/icons/IconFacebook.tsx
Normal file
17
packages/docs/src/components/icons/IconFacebook.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
export const IconFacebook = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tabler icon-tabler-brand-facebook w-5 h-5"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path>
|
||||
</svg>
|
||||
)
|
||||
17
packages/docs/src/components/icons/IconGithub.tsx
Normal file
17
packages/docs/src/components/icons/IconGithub.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
export const IconGithub = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tabler icon-tabler-brand-github w-5 h-5"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path>
|
||||
</svg>
|
||||
)
|
||||
19
packages/docs/src/components/icons/IconInstagram.tsx
Normal file
19
packages/docs/src/components/icons/IconInstagram.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
export const IconInstagram = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tabler icon-tabler-brand-instagram w-5 h-5"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<rect x="4" y="4" width="16" height="16" rx="4"></rect>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
|
||||
</svg>
|
||||
)
|
||||
30
packages/docs/src/components/icons/IconMenu.tsx
Normal file
30
packages/docs/src/components/icons/IconMenu.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
interface ItemProps {
|
||||
class?: string
|
||||
}
|
||||
|
||||
export const IconMenu = (props: ItemProps) => {
|
||||
const { class: className } = props
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
class={`icon icon-tabler icon-tabler-menu ${
|
||||
className || 'w-5 h-5'
|
||||
}`}
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
class="icon-tabler"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M4 8h16"></path>
|
||||
<path d="M4 16h16"></path>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
26
packages/docs/src/components/icons/IconMoon.tsx
Normal file
26
packages/docs/src/components/icons/IconMoon.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
interface ItemProps {
|
||||
class?: string
|
||||
}
|
||||
|
||||
export const IconMoon = (props: ItemProps) => {
|
||||
const { class: className } = props
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={`icon icon-tabler icon-tabler-moon ${
|
||||
className || 'w-5 h-5'
|
||||
}`}
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
17
packages/docs/src/components/icons/IconStar.tsx
Normal file
17
packages/docs/src/components/icons/IconStar.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
export const IconStar = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tabler icon-tabler-star w-5 h-5"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
|
||||
</svg>
|
||||
)
|
||||
25
packages/docs/src/components/icons/IconSun.tsx
Normal file
25
packages/docs/src/components/icons/IconSun.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
interface ItemProps {
|
||||
class?: string
|
||||
}
|
||||
|
||||
export const IconSun = (props: ItemProps) => {
|
||||
const { class: className } = props
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={`icon icon-tabler icon-tabler-sun ${className || 'w-5 h-5'}`}
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<circle cx="12" cy="12" r="4"></circle>
|
||||
<path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
17
packages/docs/src/components/icons/IconTwitter.tsx
Normal file
17
packages/docs/src/components/icons/IconTwitter.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
export const IconTwitter = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tabler icon-tabler-brand-twitter w-5 h-5"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"></path>
|
||||
</svg>
|
||||
)
|
||||
37
packages/docs/src/components/widgets/CallToAction.tsx
Normal file
37
packages/docs/src/components/widgets/CallToAction.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
|
||||
export default component$(() => {
|
||||
return (
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
})
|
||||
84
packages/docs/src/components/widgets/FAQs.tsx
Normal file
84
packages/docs/src/components/widgets/FAQs.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
import { IconArrowDownRight } from '../icons/IconArrowDownRight'
|
||||
|
||||
export default component$(() => {
|
||||
const items = [
|
||||
[
|
||||
{
|
||||
question: 'What do I need to start?',
|
||||
answer: `Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds.
|
||||
|
||||
Many say exploration is part of our destiny, but it’s actually our duty to future generations.`,
|
||||
},
|
||||
{
|
||||
question: 'How to install the Qwik + Tailwind CSS template?',
|
||||
answer: `Well, the way they make shows is, they make one show. That show's called a pilot.
|
||||
|
||||
Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.`,
|
||||
},
|
||||
{
|
||||
question:
|
||||
"What's something that you completely don't understand?",
|
||||
answer: `A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear.`,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
question: "What's an example of when you changed your mind?",
|
||||
answer: `Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on wheels.`,
|
||||
},
|
||||
{
|
||||
question:
|
||||
'What is something that you would really like to try again?',
|
||||
answer: `A business big enough that it could be listed on the NASDAQ goes belly up. Disappears!
|
||||
|
||||
It ceases to exist without me. No, you clearly don't know who you're talking to, so let me clue you in.`,
|
||||
},
|
||||
{
|
||||
question:
|
||||
'If you could only ask one question to each person you meet, what would that question be?',
|
||||
answer: `This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well, that's certainly good to know. About four years. I got tired of hearing how young I looked.`,
|
||||
},
|
||||
],
|
||||
]
|
||||
|
||||
return (
|
||||
<section class="border-t border-gray-200 dark:border-slate-800">
|
||||
<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
|
||||
<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
|
||||
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
||||
<p class="text-base text-primary-600 dark:text-purple-200 font-semibold tracking-wide uppercase">
|
||||
FAQs
|
||||
</p>
|
||||
<h2 class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-screen-xl sm:mx-auto">
|
||||
<div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-x-16 md:grid-cols-2">
|
||||
{items.map((subitems) => (
|
||||
<div class="space-y-8">
|
||||
{subitems.map(({ question, answer }) => (
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<IconArrowDownRight class="w-7 h-7 text-secondary-500 inline-block" />
|
||||
{question}
|
||||
</p>
|
||||
{answer
|
||||
.split('\n\n')
|
||||
.map((paragraph) => (
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||
{paragraph}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
})
|
||||
91
packages/docs/src/components/widgets/Features.tsx
Normal file
91
packages/docs/src/components/widgets/Features.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
import { IconStar } from '~/components/icons/IconStar'
|
||||
|
||||
export default component$(() => {
|
||||
const items = [
|
||||
[
|
||||
{
|
||||
title: 'Qwik + Tailwind CSS Integration',
|
||||
description:
|
||||
'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
|
||||
icon: 'tabler:brand-tailwind',
|
||||
},
|
||||
{
|
||||
title: 'Ready-to-use Components',
|
||||
description:
|
||||
'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...',
|
||||
icon: 'tabler:components',
|
||||
},
|
||||
{
|
||||
title: 'Best Practices',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:list-check',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
title: 'Excellent Page Speed',
|
||||
description:
|
||||
'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
|
||||
icon: 'tabler:rocket',
|
||||
},
|
||||
{
|
||||
title: 'Search Engine Optimization (SEO)',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:arrows-right-left',
|
||||
},
|
||||
{
|
||||
title: 'Open to new ideas and contributions',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:bulb',
|
||||
},
|
||||
],
|
||||
]
|
||||
|
||||
return (
|
||||
<section class="scroll-mt-16" id="features">
|
||||
<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
|
||||
<div class="mb-10 md:mx-auto sm:text-center md:mb-12 max-w-3xl">
|
||||
<p class="text-base text-primary-600 dark:text-purple-200 font-semibold tracking-wide uppercase">
|
||||
Features
|
||||
</p>
|
||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||
What you get with{' '}
|
||||
<span class="whitespace-nowrap">Qwind</span>
|
||||
</h2>
|
||||
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit
|
||||
voluptatem accusantium doloremque rem aperiam, eaque
|
||||
ipsa quae.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
|
||||
{items.map((subitems) => (
|
||||
<div class="space-y-8 sm:px-8">
|
||||
{subitems.map(({ title, description }) => (
|
||||
<div class="flex flex-row max-w-md">
|
||||
<div class="mb-4 mr-4">
|
||||
<div class="text-white flex items-center justify-center w-12 h-12 rounded-full bg-secondary-500 dark:bg-secondary-700">
|
||||
<IconStar />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">
|
||||
{title}
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-slate-400">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
})
|
||||
143
packages/docs/src/components/widgets/Footer.tsx
Normal file
143
packages/docs/src/components/widgets/Footer.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
import { Link } from '@builder.io/qwik-city'
|
||||
|
||||
import { IconTwitter } from '~/components/icons/IconTwitter'
|
||||
import { IconInstagram } from '~/components/icons/IconInstagram'
|
||||
import { IconFacebook } from '~/components/icons/IconFacebook'
|
||||
import { IconGithub } from '~/components/icons/IconGithub'
|
||||
|
||||
export default component$(() => {
|
||||
const links = [
|
||||
{
|
||||
title: 'Product',
|
||||
items: [
|
||||
{ title: 'Features', href: '#' },
|
||||
{ title: 'Security', href: '#' },
|
||||
{ title: 'Team', href: '#' },
|
||||
{ title: 'Enterprise', href: '#' },
|
||||
{ title: 'Customer stories', href: '#' },
|
||||
{ title: 'Pricing', href: '#' },
|
||||
{ title: 'Resources', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Platform',
|
||||
items: [
|
||||
{ title: 'Developer API', href: '#' },
|
||||
{ title: 'Partners', href: '#' },
|
||||
{ title: 'Atom', href: '#' },
|
||||
{ title: 'Electron', href: '#' },
|
||||
{ title: 'Qwind Desktop', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Support',
|
||||
items: [
|
||||
{ title: 'Docs', href: '#' },
|
||||
{ title: 'Community Forum', href: '#' },
|
||||
{ title: 'Professional Services', href: '#' },
|
||||
{ title: 'Skills', href: '#' },
|
||||
{ title: 'Status', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
items: [
|
||||
{ title: 'About', href: '#' },
|
||||
{ title: 'Blog', href: '#' },
|
||||
{ title: 'Careers', href: '#' },
|
||||
{ title: 'Press', href: '#' },
|
||||
{ title: 'Inclusion', href: '#' },
|
||||
{ title: 'Social Impact', href: '#' },
|
||||
{ title: 'Shop', href: '#' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const social = [
|
||||
{ label: 'Twitter', icon: IconTwitter, href: '#' },
|
||||
{ label: 'Instagram', icon: IconInstagram, href: '#' },
|
||||
{ label: 'Facebook', icon: IconFacebook, href: '#' },
|
||||
{
|
||||
label: 'Github',
|
||||
icon: IconGithub,
|
||||
href: 'https://github.com/onwidget/qwind',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<footer class="border-t border-gray-200 dark:border-slate-800">
|
||||
<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">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Morbi sagittis, quam nec venenatis lobortis,
|
||||
mi risus tempus nulla
|
||||
</div>
|
||||
</div>
|
||||
{links.map(({ title, items }) => (
|
||||
<div class="col-span-6 md:col-span-3 lg:col-span-2">
|
||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
|
||||
{title}
|
||||
</div>
|
||||
{items &&
|
||||
Array.isArray(items) &&
|
||||
items.length > 0 && (
|
||||
<ul class="text-sm">
|
||||
{items.map(({ title, href }) => (
|
||||
<li class="mb-2">
|
||||
<Link
|
||||
class="text-gray-600 hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href={href}
|
||||
>
|
||||
{title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div class="md:flex md:items-center md:justify-between py-6 md:py-8">
|
||||
<ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0">
|
||||
{social.map(({ label, href, icon: Icon }) => (
|
||||
<li>
|
||||
<Link
|
||||
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
|
||||
aria-label={label}
|
||||
title={label}
|
||||
href={href}
|
||||
>
|
||||
{Icon && <Icon />}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
|
||||
<span class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 float-left rounded-sm bg-[url(https://onwidget.com/favicon/favicon-32x32.png)]"></span>
|
||||
Made by{' '}
|
||||
<a
|
||||
class="text-secondary-700 hover:underline dark:text-gray-200"
|
||||
href="https://onwidget.com/"
|
||||
>
|
||||
{' '}
|
||||
onWidget
|
||||
</a>{' '}
|
||||
· All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
})
|
||||
115
packages/docs/src/components/widgets/Header.tsx
Normal file
115
packages/docs/src/components/widgets/Header.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import { component$, useStore } from '@builder.io/qwik'
|
||||
import Logo from '~/components/atoms/Logo'
|
||||
import { IconGithub } from '~/components/icons/IconGithub'
|
||||
import ToggleTheme from '~/components/core/ToggleTheme'
|
||||
import ToggleMenu from '~/components/core/ToggleMenu'
|
||||
|
||||
export default component$(() => {
|
||||
const store = useStore({
|
||||
isScrolling: false,
|
||||
})
|
||||
|
||||
return (
|
||||
<header
|
||||
class={`sticky top-0 z-40 flex-none mx-auto w-full transition-all ${
|
||||
store.isScrolling
|
||||
? ' md:bg-white/90 md:backdrop-blur-sm dark:md:bg-slate-900/90 bg-white dark:bg-slate-900'
|
||||
: ''
|
||||
}`}
|
||||
id="header"
|
||||
window:onScroll$={() => {
|
||||
if (!store.isScrolling && window.scrollY >= 10) {
|
||||
store.isScrolling = true
|
||||
} else if (store.isScrolling && window.scrollY < 10) {
|
||||
store.isScrolling = false
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4">
|
||||
<div class="flex justify-between">
|
||||
<a class="flex items-center" href={'/'}>
|
||||
<Logo />
|
||||
</a>
|
||||
<div class="flex items-center md:hidden">
|
||||
<ToggleTheme iconClass="w-6 h-6" />
|
||||
<ToggleMenu iconClass="w-6 h-6" />
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-[calc(100vh-100px)] md:h-auto overflow-y-auto md:overflow-visible"
|
||||
aria-label="Main navigation"
|
||||
>
|
||||
<ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
|
||||
<li class="dropdown">
|
||||
<button class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out">
|
||||
Pages
|
||||
</button>
|
||||
<ul class="dropdown-menu rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white md:min-w-[200px] dark:md:bg-slate-800 drop-shadow-xl">
|
||||
<li>
|
||||
<a
|
||||
class="font-medium rounded-t md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
|
||||
href="#"
|
||||
>
|
||||
Features
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="font-medium md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
|
||||
href="#"
|
||||
>
|
||||
Profile
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="font-medium rounded-b md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
|
||||
href="#"
|
||||
>
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href={'/docs'}
|
||||
>
|
||||
Documentación
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href={'/blog'}
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li class="md:hidden">
|
||||
<a
|
||||
class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="https://github.com/onwidget/qwind"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="md:self-center flex items-center mb-4 md:mb-0 ml-2">
|
||||
<div class="hidden items-center md:flex">
|
||||
<ToggleTheme />
|
||||
<a
|
||||
href="https://github.com/onwidget/qwind"
|
||||
class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
|
||||
aria-label="Qwind Github"
|
||||
>
|
||||
<IconGithub />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
})
|
||||
87
packages/docs/src/components/widgets/Hero.tsx
Normal file
87
packages/docs/src/components/widgets/Hero.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
|
||||
// @ts-ignore
|
||||
import srcsetAvif from '~/assets/images/hero.jpg?w=400;900&avif&srcset'
|
||||
// @ts-ignore
|
||||
import srcsetWebp from '~/assets/images/hero.jpg?w=400;900&webp&srcset'
|
||||
// @ts-ignore
|
||||
import { src as placeholder } from '~/assets/images/hero.jpg?width=400&metadata'
|
||||
|
||||
export default component$(() => {
|
||||
return (
|
||||
<section
|
||||
class={`bg-gradient-to-b md:bg-gradient-to-r from-white via-purple-50 to-sky-100 dark:bg-none mt-[-72px]`}
|
||||
>
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 md:flex md:h-screen 2xl:h-auto pt-[72px]">
|
||||
<div class="py-12 md:py-12 lg:py-16 block md:flex text-center md:text-left">
|
||||
<div class="pb-12 md:pb-0 md:py-0 max-w-5xl mx-auto md:pr-16 flex items-center basis-[56%]">
|
||||
<div>
|
||||
<h1 class="text-5xl md:text-[3.48rem] font-bold leading-tighter tracking-tighter mb-4 font-heading px-4 md:px-0">
|
||||
Free template for <br class="hidden lg:block" />{' '}
|
||||
<span class="hidden lg:inline">
|
||||
create a website using{' '}
|
||||
</span>{' '}
|
||||
<span class="text-[#039de1]">Qwik</span> +{' '}
|
||||
<span class="sm:whitespace-nowrap text-[#039de1]">
|
||||
Tailwind CSS
|
||||
</span>
|
||||
</h1>
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
|
||||
<span class="font-semibold underline decoration-wavy decoration-1 decoration-secondary-600 underline-offset-2">
|
||||
Qwind
|
||||
</span>{' '}
|
||||
is a production ready template to start your
|
||||
new website using <em>Qwik</em> +{' '}
|
||||
<em>Tailwind CSS</em>. It has been designed
|
||||
following Best Practices, SEO,
|
||||
Accessibility,{' '}
|
||||
<span class="inline md:hidden">...</span>
|
||||
<span class="hidden md:inline">
|
||||
Dark Mode, Great Page Speed, image
|
||||
optimization, sitemap generation and
|
||||
more.
|
||||
</span>
|
||||
</p>
|
||||
<div class="max-w-xs sm:max-w-md flex flex-nowrap flex-col sm:flex-row gap-4 m-auto md:m-0 justify-center md:justify-start">
|
||||
<div class="flex w-full sm:w-auto">
|
||||
<a
|
||||
class="btn btn-primary sm:mb-0 w-full"
|
||||
href="https://github.com/onwidget/qwind"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Get template
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex w-full sm:w-auto">
|
||||
<button class="btn w-full bg-gray-50 dark:bg-transparent">
|
||||
Learn more
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block md:flex items-center flex-1">
|
||||
<div class="relative m-auto max-w-4xl">
|
||||
<picture>
|
||||
<source srcSet={srcsetAvif} type="image/avif" />
|
||||
<source srcSet={srcsetWebp} type="image/webp" />
|
||||
<img
|
||||
src={placeholder}
|
||||
width={1000}
|
||||
height={1250}
|
||||
class="mx-auto w-full rounded-md md:h-full drop-shadow-2xl bg-gray-400 dark:bg-slate-700"
|
||||
alt="Qwind Hero Image (Cool dog)"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
/>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
})
|
||||
24
packages/docs/src/components/widgets/NavBar.tsx
Normal file
24
packages/docs/src/components/widgets/NavBar.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
|
||||
/**
|
||||
* options = [] array con la lista de opciones de la documentacion
|
||||
*/
|
||||
export default component$(
|
||||
({
|
||||
options = [],
|
||||
}: {
|
||||
options: { link: string; name: string; class?: string }[]
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
{options.map((opt) => (
|
||||
<li class={opt.class}>
|
||||
<a href={opt.link}>{opt.name}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
42
packages/docs/src/components/widgets/Stats.tsx
Normal file
42
packages/docs/src/components/widgets/Stats.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
|
||||
export default component$(() => {
|
||||
return (
|
||||
<div class="px-4 py-8 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl">
|
||||
<div class="grid grid-cols-2 row-gap-8 md:grid-cols-4">
|
||||
<div class="text-center md:border-r dark:md:border-slate-500 mb-10 md:mb-0">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-[#039de1] font-heading">
|
||||
132K
|
||||
</div>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
Downloads
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center md:border-r dark:md:border-slate-500 mb-10 md:mb-0">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-[#039de1] font-heading">
|
||||
24.8K
|
||||
</div>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
Stars
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center md:border-r dark:md:border-slate-500 font-heading">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-[#039de1]">
|
||||
10.3K
|
||||
</div>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
Forks
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-[#039de1] font-heading">
|
||||
48.4K
|
||||
</div>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
Users
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
Reference in New Issue
Block a user