-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Updates the copy and layout of the landing page (#80)
This PR adds a bit more copy to the landing page based on #36.
- Loading branch information
Showing
2 changed files
with
118 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,127 @@ | ||
| <script> | ||
| import { env } from '$env/dynamic/public'; | ||
| const bannerImage = { | ||
| src: '/landing-banner-image.webp', | ||
| alt: 'weird.one', | ||
| width: 400 | ||
| }; | ||
| </script> | ||
|
|
||
| <svelte:head> | ||
| <title>{env.PUBLIC_INSTANCE_NAME}</title> | ||
| </svelte:head> | ||
|
|
||
| <main class="flex-col justify-center p-4 text-center"> | ||
| <h1 class="mt-8 text-4xl font-bold">{env.PUBLIC_INSTANCE_NAME}</h1> | ||
| <p class="mt-4 text-lg">Materializing the web from first principles.</p> | ||
| <main class="container mx-auto"> | ||
| <!-- <h1 class="mt-8 text-4xl font-bold">{env.PUBLIC_INSTANCE_NAME}</h1> --> | ||
| <div class="p-8"> | ||
| <div class="grid place-items-center gap-4 lg:grid-cols-[1fr_auto] lg:place-items-stretch"> | ||
| <div class="flex flex-col justify-center"> | ||
| <h1 class="text-5xl font-bold tracking-tighter">Weird</h1> | ||
| <span class="mt-2 italic sm:text-2xl"> | ||
| The internet <a | ||
| class="underline" | ||
| target="_blank" | ||
| href="https://projects.kwon.nyc/internet-is-fun/">used to be fun!</a | ||
| ></span | ||
| > | ||
| <p class="mt-4 max-w-prose md:text-lg"> | ||
| The time has come to <a | ||
| href="https://webdirections.org/blog/reweirding-the-web/" | ||
| target="_blank" | ||
| class="underline">reweird the web!</a | ||
| > | ||
| We're doing our little part by making a prosocial network based on the cornerstone of the internet: | ||
| <a | ||
| class="underline" | ||
| target="_blank" | ||
| href="https://blog.jim-nielsen.com/2022/other-peoples-websites/">Personal websites</a | ||
| >. | ||
| </p> | ||
| </div> | ||
| <img src={bannerImage.src} width={bannerImage.width} alt={bannerImage.alt} /> | ||
| </div> | ||
| </div> | ||
| <div class="p-8"> | ||
| <div class="pb-5"> | ||
| <span class="text-xs">just like milk & honey...</span> | ||
| <h2 class="py-2 text-2xl font-bold tracking-tight sm:text-3xl xl:text-4xl"> | ||
| Weird is a combination of two things that go together | ||
| </h2> | ||
| </div> | ||
| <div class="grid gap-4 lg:grid-cols-2 lg:gap-8"> | ||
| <div class="card grid place-items-stretch p-2"> | ||
| <div class="flex p-3"> | ||
| <h3 class="text-2xl font-semibold leading-none tracking-tight"> | ||
| ✨ Magic website creation | ||
| </h3> | ||
| </div> | ||
| <div class="p-3"> | ||
| <div class="grid gap-2"> | ||
| <p>The simplest possible way to create your own personal space on the web.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="card grid place-items-stretch p-2"> | ||
| <div class="flex flex-col p-3"> | ||
| <h3 class="text-2xl font-semibold leading-none tracking-tight"> | ||
| 🌿 Self-sovereign internet passport | ||
| </h3> | ||
| </div> | ||
| <div class="p-3"> | ||
| <div class="grid gap-2"> | ||
| <p>Independent 'social sign-in' for the alt-web. 🥛🍯🥰</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="p-8"> | ||
| <div class="card p-2"> | ||
| <div class="p-3"> | ||
| <h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight"> | ||
| 🤔 Why Weird? | ||
| </h3> | ||
| </div> | ||
| <div class="grid gap-2 p-3"> | ||
| <p class="text-muted-foreground"> | ||
| <span class="mb-4 block"> | ||
| <span class="mb-4 block" | ||
| >Weird wants to be "the Google-login button of the people's web", powered by people's | ||
| websites instead of totalitarian mega-platforms.</span | ||
| > | ||
| <span> | ||
| By making (or connecting) your website with Weird you will soon be able to access and | ||
| interact with the | ||
| <a | ||
| href="https://ar.al/2020/08/07/what-is-the-small-web/" | ||
| class="underline" | ||
| target="_blank" | ||
| > | ||
| small | ||
| </a>, | ||
| <a class="underline" target="_blank" href="https://openalternative.co/"> open </a> | ||
| and <a class="underline" target="_blank" href="https://indieweb.org/"> indie </a> | ||
| web just as easily as the regular web works today. Same conveniences, without the dark | ||
| patterns, spying and data theft For more on why this matters, fellow internet nerds are | ||
| welcome to read on: | ||
| </span> | ||
| </span> | ||
|
|
||
| <a class="block underline" target="_blank" href="https://blog.erlend.sh/weird-web-pages"> | ||
| weird web pages | ||
| </a> | ||
| <a class="block underline" target="_blank" href="https://blog.erlend.sh/weird-netizens"> | ||
| weird netizens | ||
| </a> | ||
| <a | ||
| class="block underline" | ||
| target="_blank" | ||
| href="https://blog.commune.sh/weird-happenings/" | ||
| > | ||
| weird happenings | ||
| </a> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </main> |
Binary file not shown.