index.tsx

1import { component$ } from "@builder.io/qwik";
2import { Link, type DocumentHead } from "@builder.io/qwik-city";
3import { HiArrowRightOutline } from "@qwikest/icons/heroicons";
4import styles from "./home.module.css";
5// import { HiArrowRightOutline } from "@qwikest/icons/heroicons";
6
7export default component$(() => {
8  return (
9    <main class="flex min-h-screen flex-col p-6">
10      <div class="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
11        {/* <LRDQwikLogo /> */}
12      </div>
13      <div class="mt-4 flex grow flex-col gap-4 md:flex-row">
14        <div class="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
15          <div class={styles.shape} />
16          <p class="text-xl text-gray-800 md:text-3xl md:leading-normal">
17            <strong>Welcome to LRDQwik.</strong> This is the example for the{" "}
18            <Link
19              href="https://www.learn-qwik.com/learn/"
20              target="_blank"
21              class="text-blue-500"
22            >
23              Qwik Learn Course
24            </Link>
25            , brought to you by{" "}
26            <Link
27              href="https://www.lareponsedev.com/"
28              target="_blank"
29              class="text-blue-500"
30            >
31              LaReponseDev
32            </Link>{" "}
33            .
34          </p>
35          <Link
36            href="/login"
37            class="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
38          >
39            <span>Log in</span>
40            <HiArrowRightOutline />
41          </Link>
42        </div>
43        <div class="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
44          {/* Add Hero Images Here */}
45        </div>
46      </div>
47    </main>
48  );
49});
50
51export const head: DocumentHead = {
52  title: "Welcome to Qwik",
53  meta: [
54    {
55      name: "description",
56      content: "Qwik site description",
57    },
58  ],
59};