Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(hero): redesign #528

Merged
merged 15 commits into from
Oct 2, 2022
Prev Previous commit
Next Next commit
refactor: hero left align
Coyenn committed Sep 28, 2022
commit d01f085d105eb9132697c216af50992c494129ba
207 changes: 96 additions & 111 deletions www/src/components/landingPage/banner.astro
Original file line number Diff line number Diff line change
@@ -1,123 +1,108 @@
---
import Button from "./button.astro";
import PageSection from "./pageSection.astro";
---

<section>
<div class="overflow-x-hidden">
<div class="relative w-full h-full overflow-hidden py-8 md:py-16 z-0">
<div
class="absolute top-20 left-[10%] lg:left-[33%] w-36 h-36 sm:w-48 sm:h-48 lg:w-72 lg:h-72 bg-t3-purple-200 opacity-10 mix-blend-overlay rounded-full filter blur-xl animate-blob -z-10 select-none touch-none overflow-hidden"
>
</div>
<div
class="absolute top-16 right-[10%] lg:right-[33%] w-36 h-36 sm:w-48 sm:h-48 lg:w-72 lg:h-72 bg-t3-purple-200 opacity-10 mix-blend-overlay rounded-full filter blur-xl animate-blob animation-delay-2000 -z-10 select-none touch-none overflow-hidden"
>
</div>
<div
class="absolute bottom-32 sm:bottom-8 right-[33%] sm:right-[38%] lg:right-[42%] lg:bottom-10 w-36 h-36 sm:w-48 sm:h-48 lg:w-72 lg:h-72 bg-t3-purple-200 opacity-10 mix-blend-overlay rounded-full filter blur-xl animate-blob animation-delay-4000 -z-10 select-none touch-none overflow-hidden"
>
</div>
<div class="mx-auto max-w-8xl lg:px-8">
<div class="flex flex-col items-center justify-center text-center">
<div
class="mx-auto max-w-md px-4 sm:max-w-2xl md:max-w-3xl sm:px-6 sm:text-center lg:px-0 lg:flex lg:items-center"
>
<div class="lg:py-12 flex flex-col items-start justify-between">
<h1
class="mt-4 text-5xl tracking-tight font-bold text-white sm:mt-5 sm:text-6xl sm:tracking-tight lg:mt-6 xl:text-7xl xl:tracking-tight"
>
The best way to setup an
<span class="text-purple-400"> opinionated,</span>
<span class="text-purple-600"> full-stack,</span>
<span class="text-t3-purple-400"> typesafe</span>
Next.js project
</h1>
<PageSection size="32">
<div class="max-w-[800px] xl:max-w-7xl mx-auto">
<div class="max-w-8xl lg:px-8">
<div class="flex flex-col items-center xl:items-start">
<div class="max-w-md px-4 sm:max-w-2xl xl:max-w-3xl sm:px-6 lg:px-0">
<div class="lg:py-12 flex flex-col items-start justify-between">
<h1
class="text-5xl text-center xl:text-start tracking-tight font-bold text-white sm:text-6xl sm:tracking-tight xl:text-7xl xl:tracking-tight"
>
The best way to setup an
<span class="text-purple-400"> opinionated,</span>
<span class="text-purple-600"> full-stack,</span>
<span class="text-t3-purple-400"> typesafe</span>
Next.js project
</h1>

<div class="flex flex-col mt-8 w-full items-center xl:items-start">
<div
class="flex flex-col items-center justify-center mt-8 w-full"
class="flex justify-center xl:justify-start w-full gap-4 max-w-xs"
>
<div
class="flex items-center justify-center w-full gap-4 max-w-xs"
<Button
href="/en/introduction"
openInNewTab={false}
rounded="md"
className="group"
rounded="full"
>
<Button
href="/en/introduction"
openInNewTab={false}
rounded="md"
className="group"
rounded="full"
>
Documentation
<svg
class="mt-0.5 h-3 ml-2 -mr-1 stroke-current stroke stroke-2"
fill="none"
viewBox="0 0 10 10"
aria-hidden="true"
>
<path
class="opacity-0 transition group-hover:opacity-100"
d="M0 5h7"></path>
<path
class="transition group-hover:translate-x-[3px]"
d="M1 1l4 4-4 4"></path>
</svg>
</Button>
<Button
href="https://github.com/t3-oss/create-t3-app"
openInNewTab={true}
variant="secondary"
rounded="full"
Documentation
<svg
class="mt-0.5 h-3 ml-2 -mr-1 stroke-current stroke stroke-2"
fill="none"
viewBox="0 0 10 10"
aria-hidden="true"
>
Github
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="h-3 ml-2 fill-white"
>
<path
d="M256 64C256 46.33 270.3 32 288 32H415.1C415.1 32 415.1 32 415.1 32C420.3 32 424.5 32.86 428.2 34.43C431.1 35.98 435.5 38.27 438.6 41.3C438.6 41.35 438.6 41.4 438.7 41.44C444.9 47.66 447.1 55.78 448 63.9C448 63.94 448 63.97 448 64V192C448 209.7 433.7 224 416 224C398.3 224 384 209.7 384 192V141.3L214.6 310.6C202.1 323.1 181.9 323.1 169.4 310.6C156.9 298.1 156.9 277.9 169.4 265.4L338.7 96H288C270.3 96 256 81.67 256 64V64zM0 128C0 92.65 28.65 64 64 64H160C177.7 64 192 78.33 192 96C192 113.7 177.7 128 160 128H64V416H352V320C352 302.3 366.3 288 384 288C401.7 288 416 302.3 416 320V416C416 451.3 387.3 480 352 480H64C28.65 480 0 451.3 0 416V128z"
></path>
</svg>
</Button>
</div>
<div class="mt-8 block h-full relative mx-auto">
<button
class="px-2 py-2 text-lg sm:px-5 sm:py-4 sm:text-xl rounded-md cursor-pointer bg-white/10 hover:bg-white/20 transition-all duration-300 relative flex flex-row items-center gap-2 border border-t3-purple-200/20 hover:border-t3-purple-300/50"
title="Copy the command to get started"
id="command"
<path
class="opacity-0 transition group-hover:opacity-100"
d="M0 5h7"></path>
<path
class="transition group-hover:translate-x-[3px]"
d="M1 1l4 4-4 4"></path>
</svg>
</Button>
<Button
href="https://github.com/t3-oss/create-t3-app"
openInNewTab={true}
variant="secondary"
rounded="full"
>
Github
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="h-3 ml-2 fill-white"
>
<code id="command-text">npx create-t3-app@latest</code>
<svg
id="copy-icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><rect x="9" y="9" width="13" height="13" rx="2" ry="2"
></rect><path
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
></path>
</svg>
<svg
id="check-icon"
class="hidden"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><polyline points="20 6 9 17 4 12"></polyline>
</svg>
</button>
</div>
<path
d="M256 64C256 46.33 270.3 32 288 32H415.1C415.1 32 415.1 32 415.1 32C420.3 32 424.5 32.86 428.2 34.43C431.1 35.98 435.5 38.27 438.6 41.3C438.6 41.35 438.6 41.4 438.7 41.44C444.9 47.66 447.1 55.78 448 63.9C448 63.94 448 63.97 448 64V192C448 209.7 433.7 224 416 224C398.3 224 384 209.7 384 192V141.3L214.6 310.6C202.1 323.1 181.9 323.1 169.4 310.6C156.9 298.1 156.9 277.9 169.4 265.4L338.7 96H288C270.3 96 256 81.67 256 64V64zM0 128C0 92.65 28.65 64 64 64H160C177.7 64 192 78.33 192 96C192 113.7 177.7 128 160 128H64V416H352V320C352 302.3 366.3 288 384 288C401.7 288 416 302.3 416 320V416C416 451.3 387.3 480 352 480H64C28.65 480 0 451.3 0 416V128z"
></path>
</svg>
</Button>
</div>
<div
class="flex justify-center xl:justify-start mt-4 xl:mt-8 h-full relative"
>
<button
class="px-2 py-2 text-lg sm:px-5 sm:py-4 sm:text-xl rounded-md cursor-pointer bg-white/10 hover:bg-white/20 transition-all duration-300 relative flex flex-row items-center gap-2 border border-t3-purple-200/20 hover:border-t3-purple-300/50"
title="Copy the command to get started"
id="command"
>
<code id="command-text">npx create-t3-app@latest</code>
c-ehrlich marked this conversation as resolved.
Show resolved Hide resolved
<svg
id="copy-icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><rect x="9" y="9" width="13" height="13" rx="2" ry="2"
></rect><path
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
></path>
</svg>
<svg
id="check-icon"
class="hidden"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><polyline points="20 6 9 17 4 12"></polyline>
</svg>
</button>
</div>
</div>
</div>
@@ -150,7 +135,7 @@ import Button from "./button.astro";
}
});
</script>
</section>
</PageSection>

<style>
#check-icon {
2 changes: 1 addition & 1 deletion www/src/components/landingPage/button.astro
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ const variantClass =
href={href}
target={openInNewTab ? "_blank" : "_self"}
rel="noopener noreferrer"
class={`${roundedClass} ${variantClass} ${className} inline-flex items-center px-5 py-3 font-semibold cursor-pointer hover:no-underline transition-colors`}
class={`${roundedClass} ${variantClass} ${className} inline-flex items-center px-3 md:px-5 py-2 md:py-3 text-sm md:text-base font-semibold cursor-pointer hover:no-underline transition-colors`}
>
<slot />
</a>
4 changes: 2 additions & 2 deletions www/src/components/landingPage/pageSection.astro
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ export interface Props {
size: "6" | "12" | "16" | "24" | "32";
className?: string;
bottomPadding?: boolean;
id: string;
id?: string;
}
const sizes = {
@@ -24,7 +24,7 @@ const sizesOnlyTop = {
32: "pt-12 md:pt-20 lg:pt-32",
};
const { size, className, bottomPadding = true, id } = Astro.props;
const { size, className, bottomPadding = true, id = "" } = Astro.props;
---

<section