chore: optimize the colors of componnets in home page

This commit is contained in:
javayhu 2025-08-16 01:39:11 +08:00
parent e99d6da45c
commit 9f71c9942a
7 changed files with 21 additions and 21 deletions

View File

@ -6,7 +6,7 @@ export default function CallToActionSection() {
const t = useTranslations('HomePage.calltoaction');
return (
<section id="call-to-action" className="px-4 py-24 bg-background">
<section id="call-to-action" className="px-4 py-24 bg-muted/50">
<div className="mx-auto max-w-5xl px-6">
<div className="text-center">
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">

View File

@ -56,7 +56,7 @@ export default function HeroSection() {
<AnimatedGroup variants={transitionVariants}>
<LocaleLink
href={linkIntroduction}
className="hover:bg-background dark:hover:border-t-border bg-muted group mx-auto flex w-fit items-center gap-4 rounded-full border p-1 pl-4 shadow-md shadow-zinc-950/5 transition-colors duration-300 dark:border-t-white/5 dark:shadow-zinc-950"
className="hover:bg-background group mx-auto flex w-fit items-center gap-4 rounded-full border p-1 pl-4 shadow-md shadow-zinc-950/5 transition-colors duration-300 dark:shadow-zinc-950"
>
<span className="text-foreground text-sm">
{t('introduction')}
@ -160,11 +160,11 @@ export default function HeroSection() {
<div className="relative -mr-56 mt-8 overflow-hidden px-2 sm:mr-0 sm:mt-12 md:mt-20">
<div
aria-hidden
className="bg-linear-to-b to-background absolute inset-0 z-10 from-transparent from-35%"
className="bg-linear-to-b to-muted/50 absolute inset-0 z-10 from-transparent from-35%"
/>
<div className="inset-shadow-2xs ring-background dark:inset-shadow-white/20 bg-background relative mx-auto max-w-6xl overflow-hidden rounded-2xl border p-4 shadow-lg shadow-zinc-950/15 ring-1">
<div className="inset-shadow-2xs ring-muted/50 dark:inset-shadow-white/20 bg-muted/50 relative mx-auto max-w-6xl overflow-hidden rounded-2xl border p-4 shadow-lg shadow-zinc-950/15 ring-1">
<Image
className="bg-background relative hidden rounded-2xl dark:block"
className="bg-muted/50 relative hidden rounded-2xl dark:block"
src="/blocks/music.png"
alt="app screen"
width={2796}

View File

@ -90,7 +90,7 @@ const IntegrationCard = ({
const t = useTranslations('HomePage.integration');
return (
<Card className="p-6 hover:bg-accent dark:hover:bg-accent">
<Card className="p-6 bg-transparent hover:bg-accent dark:hover:bg-card">
<div className="relative">
<div className="*:size-10">{children}</div>

View File

@ -17,11 +17,11 @@ export default function Integration2Section() {
return (
<section>
<div className="bg-background py-24">
<div className="bg-muted/50 py-24">
<div className="mx-auto max-w-5xl px-6">
<div className="grid items-center sm:grid-cols-2">
<div className="dark:bg-muted/50 relative mx-auto w-fit">
<div className="bg-radial to-muted dark:to-background absolute inset-0 z-10 from-transparent to-75%" />
<div className="relative mx-auto w-fit">
{/* <div className="bg-radial to-muted/50 dark:to-muted/50 absolute inset-0 z-10 from-transparent to-75%" /> */}
<div className="mx-auto mb-2 flex w-fit justify-center gap-2">
<IntegrationCard>
<Gemini />
@ -35,8 +35,8 @@ export default function Integration2Section() {
<MagicUI />
</IntegrationCard>
<IntegrationCard
borderClassName="shadow-black-950/10 shadow-xl border-black/25 dark:border-white/25"
className="dark:bg-white/10"
borderClassName="border-black/25 dark:border-white/25"
className="dark:bg-muted"
>
<Logo />
</IntegrationCard>
@ -61,7 +61,7 @@ export default function Integration2Section() {
</h2>
<p className="text-muted-foreground">{t('description')}</p>
<div className="mt-12 flex flex-wrap justify-start gap-4">
<div className="mt-12 flex flex-wrap justify-center md:justify-start gap-4">
<Button asChild size="lg">
<LocaleLink href="/">
<span>{t('primaryButton')}</span>
@ -94,16 +94,13 @@ const IntegrationCard = ({
return (
<div
className={cn(
'bg-background relative flex size-20 rounded-xl dark:bg-transparent',
'relative flex size-20 rounded-xl bg-muted dark:bg-muted/50',
className
)}
>
<div
role="presentation"
className={cn(
'absolute inset-0 rounded-xl border border-black/20 dark:border-white/25',
borderClassName
)}
className={cn('absolute inset-0 rounded-xl', borderClassName)}
/>
<div className="relative z-20 m-auto size-fit *:size-8">{children}</div>
</div>

View File

@ -4,7 +4,7 @@ export default function LogoCloudSection() {
const t = useTranslations('HomePage.logocloud');
return (
<section id="logo-cloud" className="bg-background px-4 py-16">
<section id="logo-cloud" className="bg-muted/50 px-4 py-16">
<div className="mx-auto max-w-5xl px-6">
<h2 className="text-center text-xl font-medium">{t('title')}</h2>

View File

@ -118,7 +118,10 @@ export default function TestimonialsSection() {
{testimonialChunks.map((chunk, chunkIndex) => (
<div key={chunkIndex} className="space-y-3">
{chunk.map(({ name, role, quote, image }, index) => (
<Card key={index} className="shadow-none">
<Card
key={index}
className="shadow-none bg-transparent hover:bg-accent dark:hover:bg-card"
>
<CardContent className="grid grid-cols-[auto_1fr] gap-3 pt-4">
<Avatar className="size-9 border-2 border-gray-200">
<AvatarImage

View File

@ -61,9 +61,9 @@ export function Navbar({ scroll }: NavBarProps) {
'sticky inset-x-0 top-0 z-40 py-4 transition-all duration-300',
scroll
? scrolled
? 'bg-background/80 backdrop-blur-md border-b supports-backdrop-filter:bg-background/60'
? 'bg-muted/50 backdrop-blur-md border-b supports-backdrop-filter:bg-muted/50'
: 'bg-transparent'
: 'border-b bg-background'
: 'border-b bg-muted/50'
)}
>
<Container className="px-4">