365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

major update in looks and feel

Browse Source
This commit is contained in:
becarta
2025-03-06 00:03:16 +01:00
parent 3b98eae137
commit d66123c029
40 changed files with 1123 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/widgets/Hero2.astro
View File

@@ -1,6 +1,7 @@
---
import Image from '~/components/common/Image.astro';
import Button from '~/components/ui/Button.astro';
import Background from '~/components/ui/Background.astro';
import type { Hero as Props } from '~/types';
@@ -14,6 +15,7 @@ const {
image = await Astro.slots.render('image'),
id,
isDark = false,
bg = await Astro.slots.render('bg'),
} = Astro.props;
---
@@ -21,7 +23,7 @@ const {
<section class="relative md:-mt-[76px] not-prose" {...id ? { id } : {}}>
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<slot name="bg">
{bg ? <Fragment set:html={bg} /> : null}
{bg ? <Fragment set:html={bg} /> : <Background isDark={isDark} showIcons={false} disableParallax={true} />}
</slot>
</div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6">
@@ -39,7 +41,7 @@ const {
{
title && (
<h1
class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200 intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter"
class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200 intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter content-backdrop p-2 inline-block rounded-md"
set:html={title}
/>
)
@@ -48,7 +50,7 @@ const {
{
subtitle && (
<p
class="text-xl text-muted mb-6 dark:text-slate-300 intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter"
class="text-xl text-muted mb-6 dark:text-slate-300 intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter content-backdrop p-2 rounded-md"
set:html={subtitle}
/>
)
@@ -56,7 +58,7 @@ const {
{
actions && (
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 lg:justify-start lg:m-0 lg:max-w-7xl intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter">
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 lg:justify-start lg:m-0 lg:max-w-7xl intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter content-backdrop p-2 rounded-md">
{Array.isArray(actions) ? (
actions.map((action) => (
<div class="flex w-full sm:w-auto">
@@ -75,7 +77,7 @@ const {
<div class="basis-1/2">
{
image && (
<div class="relative m-auto max-w-5xl intersect-once intercept-no-queue motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter">
<div class="relative m-auto max-w-5xl z-10 intersect-once intercept-no-queue motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter">
{typeof image === 'string' ? (
<Fragment set:html={image} />
) : (