-
Notifications
You must be signed in to change notification settings - Fork 104
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: update footer & landing page
- Loading branch information
Showing
12 changed files
with
924 additions
and
273 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
Large diffs are not rendered by default.
Oops, something went wrong.
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 |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| --- | ||
| import { Button } from "@/components/ui/button"; | ||
| import { features } from "@/config/landing"; | ||
| import { Icon } from "astro-icon/components"; | ||
| import HeaderSection from "./header-section.astro"; | ||
| --- | ||
|
|
||
| <section> | ||
| <div class="pb-6 pt-28"> | ||
| <div class="container max-w-6xl"> | ||
| <HeaderSection | ||
| label="Features" | ||
| title="Discover all features." | ||
| subtitle="Harum quae dolore inventore repudiandae? orrupti aut temporibus ariatur." | ||
| /> | ||
|
|
||
| <div class="mt-12 grid gap-3 sm:grid-cols-2 lg:grid-cols-3"> | ||
| { | ||
| features.map((feature) => ( | ||
| <div class="group relative overflow-hidden rounded-2xl border bg-background p-5 md:p-8"> | ||
| <div | ||
| aria-hidden="true" | ||
| class="absolute inset-0 aspect-video -translate-y-1/2 rounded-full border bg-gradient-to-b from-purple-500/80 to-white opacity-25 blur-2xl duration-300 group-hover:-translate-y-1/4 dark:from-white dark:to-white dark:opacity-5 dark:group-hover:opacity-10" | ||
| /> | ||
| <div class="relative"> | ||
| <div class="relative flex size-12 rounded-2xl border border-border shadow-sm *:relative *:m-auto *:size-6 "> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="1em" | ||
| height="1em" | ||
| viewBox="0 0 15 15" | ||
| > | ||
| <path | ||
| fill="currentColor" | ||
| d="m4.5 4.5l.405-.293A.5.5 0 0 0 4 4.5zm3 9.5A6.5 6.5 0 0 1 1 7.5H0A7.5 7.5 0 0 0 7.5 15zM14 7.5A6.5 6.5 0 0 1 7.5 14v1A7.5 7.5 0 0 0 15 7.5zM7.5 1A6.5 6.5 0 0 1 14 7.5h1A7.5 7.5 0 0 0 7.5 0zm0-1A7.5 7.5 0 0 0 0 7.5h1A6.5 6.5 0 0 1 7.5 1zM5 12V4.5H4V12zm-.905-7.207l6.5 9l.81-.586l-6.5-9zM10 4v6h1V4z" | ||
| /> | ||
| </svg> | ||
| </div> | ||
|
|
||
| <p class="mt-6 pb-6 text-muted-foreground"> | ||
| {feature.description} | ||
| </p> | ||
|
|
||
| <div class="-mb-5 flex gap-3 border-t border-muted py-4 md:-mb-7"> | ||
| <Button | ||
| variant="secondary" | ||
| size="sm" | ||
| rounded="xl" | ||
| className="px-4" | ||
| > | ||
| <a href="/" class="flex items-center gap-2"> | ||
| <span>Visit the site</span> | ||
| <Icon name="lucide:arrow-up-right" class="size-4" /> | ||
| </a> | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )) | ||
| } | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> |
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 |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| --- | ||
| interface Props { | ||
| label?: string; | ||
| title: string; | ||
| subtitle?: string; | ||
| } | ||
| const { label, title, subtitle } = Astro.props; | ||
| --- | ||
|
|
||
| <div class="flex flex-col items-center text-center"> | ||
| { | ||
| label ? ( | ||
| <div class="text-gradient_indigo-purple mb-4 font-semibold">{label}</div> | ||
| ) : null | ||
| } | ||
| <h2 class="font-heading text-3xl md:text-4xl lg:text-[40px]"> | ||
| {title} | ||
| </h2> | ||
| { | ||
| subtitle ? ( | ||
| <p class="mt-6 text-balance text-lg text-muted-foreground">{subtitle}</p> | ||
| ) : null | ||
| } | ||
| </div> |
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 |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| --- | ||
| import { cn } from "@/lib/utils"; | ||
| import { buttonVariants } from "@/components/ui/button"; | ||
| import { Icon } from "astro-icon/components"; | ||
| import { siteConfig } from "@/config/site"; | ||
| --- | ||
|
|
||
| <section class="space-y-6 py-12 sm:py-20 lg:py-20"> | ||
| <div class="container flex max-w-5xl flex-col items-center gap-5 text-center"> | ||
| <a | ||
| href="https://twitter.com/miickasmt" | ||
| class={cn( | ||
| buttonVariants({ variant: "outline", size: "sm", rounded: "full" }), | ||
| "px-4" | ||
| )} | ||
| target="_blank" | ||
| > | ||
| <span class="mr-3">🎉</span> Introducing on{" "} | ||
| <Icon name="twitter" class="ml-2 size-3.5" /> | ||
| </a> | ||
|
|
||
| <h1 | ||
| class="text-balance font-heading text-4xl sm:text-5xl md:text-6xl lg:text-[66px]" | ||
| > | ||
| Kick off with a bang with{" "} | ||
| <span class="text-gradient_indigo-purple font-extrabold"> | ||
| SaaS Starter | ||
| </span> | ||
| </h1> | ||
|
|
||
| <p | ||
| class="max-w-2xl text-balance leading-normal text-muted-foreground sm:text-xl sm:leading-8" | ||
| > | ||
| Build your next project using Next.js 14, Prisma, Planetscale, Auth.js v5, | ||
| Resend, React Email, Shadcn/ui, Stripe. | ||
| </p> | ||
|
|
||
| <div class="flex justify-center space-x-2 md:space-x-4"> | ||
| <a | ||
| href="/pricing" | ||
| class={cn(buttonVariants({ size: "lg", rounded: "full" }), "gap-2")} | ||
| > | ||
| <span>Go Pricing</span> | ||
| <Icon name="lucide:arrow-right" class="size-4" /> | ||
| </a> | ||
| <a | ||
| href={siteConfig.links.github} | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| class={cn( | ||
| buttonVariants({ | ||
| variant: "outline", | ||
| size: "lg", | ||
| rounded: "full", | ||
| }), | ||
| "px-5" | ||
| )} | ||
| > | ||
| <Icon name="github" class="mr-2 size-4" /> | ||
| <p> | ||
| <span class="hidden sm:inline-block">Star on</span> GitHub{" "} | ||
| <!-- <span class="font-semibold">{nFormatter(stars)}</span> --> | ||
| </p> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </section> |
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 |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| --- | ||
| import { cn } from "@/lib/utils"; | ||
| import type { InfoLdg } from "@/types"; | ||
| import { Icon } from "astro-icon/components"; | ||
| import { Image } from "astro:assets"; | ||
| interface Props { | ||
| reverse?: boolean; | ||
| data: InfoLdg; | ||
| } | ||
| const { reverse, data } = Astro.props; | ||
| --- | ||
|
|
||
| <div class="py-16 sm:py-20"> | ||
| <div | ||
| class="mx-auto grid max-w-7xl gap-10 px-4 sm:gap-16 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8" | ||
| > | ||
| <div class={cn(reverse ? "lg:order-2" : "lg:order-1")}> | ||
| <h2 | ||
| class="font-heading text-3xl text-foreground md:text-4xl lg:text-[40px]" | ||
| > | ||
| {data.title} | ||
| </h2> | ||
| <p class="mt-6 text-lg text-muted-foreground"> | ||
| {data.description} | ||
| </p> | ||
| <dl class="mt-6 space-y-4 leading-7"> | ||
| { | ||
| data.list.map((item) => { | ||
| return ( | ||
| <div class="relative pl-8"> | ||
| <dt class="font-semibold"> | ||
| <Icon | ||
| name={item.icon} | ||
| class="absolute left-0 top-1 size-5 stroke-purple-700" | ||
| /> | ||
| <span>{item.title}</span> | ||
| </dt> | ||
| <dd class="text-sm text-muted-foreground"> | ||
| {item.description} | ||
| </dd> | ||
| </div> | ||
| ); | ||
| }) | ||
| } | ||
| </dl> | ||
| </div> | ||
| <div | ||
| class={cn( | ||
| "rounded-xl overflow-hidden border lg:-m-4", | ||
| reverse ? "order-1" : "order-2" | ||
| )} | ||
| > | ||
| <div class="relative aspect-video"> | ||
| <Image | ||
| class="size-full object-cover object-center" | ||
| src={data.image} | ||
| alt={data.title} | ||
| width={1000} | ||
| height={500} | ||
| loading="eager" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
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 |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| --- | ||
| import { Image } from "astro:assets"; | ||
| --- | ||
|
|
||
| <div class="pb-6 sm:pb-16"> | ||
| <div class="container max-w-7xl"> | ||
| <div | ||
| class="rounded-xl md:bg-muted/30 md:p-3 md:ring-1 md:ring-inset md:ring-border" | ||
| > | ||
| <div | ||
| class="relative aspect-video overflow-hidden rounded-xl md:rounded-lg md:border" | ||
| > | ||
| <Image | ||
| class="size-full object-cover object-center" | ||
| src="/images/examples/static-blog.jpg" | ||
| alt="preview landing" | ||
| width={2000} | ||
| height={1000} | ||
| loading="eager" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
Oops, something went wrong.