feat: imporvement pass over sections
This commit is contained in:
@@ -8,9 +8,7 @@ const global = await directus.request(readSingleton('site_global'));
|
||||
---
|
||||
|
||||
<section class="mx-auto mb-20 max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
|
||||
<div
|
||||
class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0 lg:gap-x-24"
|
||||
>
|
||||
<div class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0 lg:gap-x-24">
|
||||
<div class="max-w-5xl sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap gap-6 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 justify-center">
|
||||
<FeaturesCard
|
||||
|
||||
@@ -1,22 +1,20 @@
|
||||
---
|
||||
import GiteaButton from '@components/buttons/GiteaButton.astro';
|
||||
|
||||
const { title, subTitle, url } = Astro.props;
|
||||
const btnTitle = 'Continue to Gitea';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
subTitle?: string;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
const { title, subTitle, url } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="lg:px- relative mx-auto mb-20 max-w-340 px-4 pt-30 pb-30 sm:px-6">
|
||||
<div
|
||||
class="smooth-reveal absolute top-[55%] left-0 scale-90 md:top-[20%] xl:top-[25%] xl:left-[10%]"
|
||||
>
|
||||
<!-- Animated shapes -->
|
||||
<div class="smooth-reveal absolute top-[55%] left-0 scale-90 md:top-[20%] xl:top-[25%] xl:left-[10%]">
|
||||
<svg
|
||||
class="animate-hover animate-hover-1"
|
||||
class="gitea-animate-hover gitea-animate-hover-1"
|
||||
width="64"
|
||||
height="64"
|
||||
fill="none"
|
||||
@@ -46,7 +44,7 @@ interface Props {
|
||||
</div>
|
||||
<div class="smooth-reveal absolute top-0 left-[85%] scale-75">
|
||||
<svg
|
||||
class="animate-hover animate-hover-2"
|
||||
class="gitea-animate-hover gitea-animate-hover-2"
|
||||
width="64"
|
||||
height="64"
|
||||
fill="none"
|
||||
@@ -80,11 +78,9 @@ interface Props {
|
||||
d="M10.5 19H9M15 19h-1.5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="smooth-reveal absolute bottom-[5%] left-[60%] scale-[.6] xl:bottom-[15%] xl:left-[35%]"
|
||||
>
|
||||
<div class="smooth-reveal absolute bottom-[5%] left-[60%] scale-[.6] xl:bottom-[15%] xl:left-[35%]">
|
||||
<svg
|
||||
class="animate-hover animate-hover-3"
|
||||
class="gitea-animate-hover gitea-animate-hover-3"
|
||||
width="64"
|
||||
height="64"
|
||||
fill="none"
|
||||
@@ -106,59 +102,54 @@ interface Props {
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Hero Section Heading -->
|
||||
<!-- Heading -->
|
||||
<div class="smooth-reveal-2 mx-auto mt-5 max-w-xl text-center">
|
||||
<h2
|
||||
class="block text-4xl leading-tight font-bold tracking-tight text-balance text-neutral-800 md:text-5xl lg:text-5xl dark:text-neutral-200"
|
||||
>
|
||||
<h1 class="card-text-header block">
|
||||
{title}
|
||||
</h2>
|
||||
</h1>
|
||||
</div>
|
||||
<!-- Hero Section Sub-heading -->
|
||||
<!-- Sub-heading -->
|
||||
<div class="smooth-reveal-2 mx-auto mt-5 max-w-3xl text-center">
|
||||
{
|
||||
subTitle && (
|
||||
<p class="text-lg text-pretty text-neutral-600 dark:text-neutral-400">{subTitle}</p>
|
||||
)
|
||||
}
|
||||
{subTitle && (
|
||||
<p class="card-text-header-description">
|
||||
{subTitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<!-- Github Button -->
|
||||
{
|
||||
url && (
|
||||
<div class="smooth-reveal-2 mt-8 flex justify-center gap-3">
|
||||
<GiteaButton url={url} title={btnTitle} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<!-- Gitea Button -->
|
||||
{url && (
|
||||
<div class="smooth-reveal-2 flex justify-center mt-8 gap-3">
|
||||
<GiteaButton url={url}/>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
@keyframes animate-hover {
|
||||
@keyframes gitea-animate-hover {
|
||||
from {
|
||||
transform: translateY(15px);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-hover {
|
||||
animation: animate-hover ease-in-out;
|
||||
.gitea-animate-hover {
|
||||
animation: gitea-animate-hover ease-in-out;
|
||||
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
.animate-hover-1 {
|
||||
.gitea-animate-hover-1 {
|
||||
animation-duration: 5s;
|
||||
}
|
||||
|
||||
.animate-hover-2 {
|
||||
.gitea-animate-hover-2 {
|
||||
animation-duration: 5.5s;
|
||||
}
|
||||
|
||||
.animate-hover-3 {
|
||||
.gitea-animate-hover-3 {
|
||||
animation-duration: 6s;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -15,21 +15,17 @@ const { title, subTitle, btnExists, btnTitle, btnURL } = Astro.props;
|
||||
<section class="mx-auto mt-10 px-4 sm:px-6 lg:px-8 lg:pt-10 2xl:max-w-full">
|
||||
<div class="flex-wrap md:flex md:items-center md:justify-between">
|
||||
<div class="w-full md:w-auto">
|
||||
<h1
|
||||
class="smooth-reveal block text-4xl font-bold tracking-tight text-balance text-neutral-800 md:text-5xl lg:text-6xl dark:text-neutral-200"
|
||||
>
|
||||
<h1 class="smooth-reveal card-text-header block lg:text-6xl">
|
||||
{title}
|
||||
</h1>
|
||||
<p class="smooth-reveal mt-4 text-lg text-pretty text-neutral-600 dark:text-neutral-400">
|
||||
<p class="smooth-reveal card-text-header-description mt-4">
|
||||
{subTitle}
|
||||
</p>
|
||||
{
|
||||
btnExists ? (
|
||||
<div class="smooth-reveal mt-4 md:mt-8">
|
||||
<GoLinkPrimary title={btnTitle} url={btnURL} />
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
{btnExists ? (
|
||||
<div class="smooth-reveal mt-4 md:mt-8">
|
||||
<GoLinkPrimary title={btnTitle} url={btnURL}/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,9 +3,6 @@ import GoLinkPrimary from '@components/buttons/GoLinkPrimary.astro';
|
||||
import GoLinkSecondary from '@components/buttons/GoLinkSecondary.astro';
|
||||
import Image from '@components/ui/images/Image.astro';
|
||||
|
||||
const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, src, alt } =
|
||||
Astro.props;
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
subTitle?: string;
|
||||
@@ -18,49 +15,42 @@ interface Props {
|
||||
rounded?: boolean;
|
||||
}
|
||||
|
||||
const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, src, alt } = Astro.props;
|
||||
|
||||
const roundedClasses = Astro.props.rounded ? "rounded-xl" : null;
|
||||
---
|
||||
|
||||
<section
|
||||
class="mx-auto grid max-w-340 gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full"
|
||||
>
|
||||
<section class="mx-auto grid max-w-340 gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full">
|
||||
<div>
|
||||
<h1
|
||||
class="smooth-reveal block text-3xl font-bold tracking-tight text-balance text-neutral-800 sm:text-4xl lg:text-7xl lg:leading-tight dark:text-neutral-200"
|
||||
>
|
||||
<h1 class="smooth-reveal card-text-header block lg:text-7xl">
|
||||
<Fragment set:html={title} />
|
||||
</h1>
|
||||
{
|
||||
subTitle && (
|
||||
<p class="smooth-reveal mt-6 text-lg leading-relaxed text-pretty text-neutral-700 lg:w-4/5 dark:text-neutral-300">
|
||||
{subTitle}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
<div class="smooth-reveal mt-7 grid w-full gap-3 sm:inline-flex">
|
||||
{subTitle && (
|
||||
<p class="smooth-reveal card-text-header-description lg:w-4/5 mt-6">
|
||||
{subTitle}
|
||||
</p>
|
||||
)}
|
||||
<div class="smooth-reveal grid sm:inline-flex mt-7 w-full gap-3">
|
||||
{primaryBtn && <GoLinkPrimary title={primaryBtn} url={primaryBtnURL} />}
|
||||
{secondaryBtn && <GoLinkSecondary title={secondaryBtn} url={secondaryBtnURL} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="smooth-reveal-fade hidden w-full md:block">
|
||||
<div class="top-12 flex w-full justify-center overflow-hidden md:ml-4">
|
||||
{
|
||||
src && alt && (
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
class={`h-full w-[420px] scale-100 object-cover object-center ${roundedClasses}`}
|
||||
draggable="false"
|
||||
loading="eager"
|
||||
format="webp"
|
||||
quality="low"
|
||||
widths={[840]}
|
||||
disableBlur={true}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<div class="smooth-reveal-fade md:block w-full hidden">
|
||||
<div class="flex justify-center w-full top-12 md:ml-4 overflow-hidden">
|
||||
{src && alt && (
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
class={`h-full w-105 scale-100 object-cover object-center ${roundedClasses}`}
|
||||
draggable="false"
|
||||
loading="eager"
|
||||
format="webp"
|
||||
quality="low"
|
||||
widths={[840]}
|
||||
disableBlur={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -8,7 +8,7 @@ const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, ti
|
||||
|
||||
<section class="mx-auto mb-20 max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
|
||||
<div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
|
||||
<h1 class="card-text-header smooth-reveal block font-bold md:leading-tight">
|
||||
<h1 class="smooth-reveal card-text-header block">
|
||||
Weather in my Area
|
||||
</h1>
|
||||
<div class="smooth-reveal mx-auto mt-5 max-w-3xl text-center">
|
||||
|
||||
Reference in New Issue
Block a user