From 9f71c9942a8c8939d538cce9fae09b21d03b252f Mon Sep 17 00:00:00 2001
From: javayhu <javayhu@gmail.com>
Date: Sat, 16 Aug 2025 01:39:11 +0800
Subject: [PATCH] chore: optimize the colors of componnets in home page

---
 .../blocks/calltoaction/calltoaction.tsx      |  2 +-
 src/components/blocks/hero/hero.tsx           |  8 ++++----
 .../blocks/integration/integration.tsx        |  2 +-
 .../blocks/integration/integration2.tsx       | 19 ++++++++-----------
 .../blocks/logo-cloud/logo-cloud.tsx          |  2 +-
 .../blocks/testimonials/testimonials.tsx      |  5 ++++-
 src/components/layout/navbar.tsx              |  4 ++--
 7 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/blocks/calltoaction/calltoaction.tsx b/src/components/blocks/calltoaction/calltoaction.tsx
index 68c488c..c108176 100644
--- a/src/components/blocks/calltoaction/calltoaction.tsx
+++ b/src/components/blocks/calltoaction/calltoaction.tsx
@@ -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">
diff --git a/src/components/blocks/hero/hero.tsx b/src/components/blocks/hero/hero.tsx
index f94ec0f..d225dc0 100644
--- a/src/components/blocks/hero/hero.tsx
+++ b/src/components/blocks/hero/hero.tsx
@@ -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}
diff --git a/src/components/blocks/integration/integration.tsx b/src/components/blocks/integration/integration.tsx
index 6511a1c..c15a130 100644
--- a/src/components/blocks/integration/integration.tsx
+++ b/src/components/blocks/integration/integration.tsx
@@ -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>
 
diff --git a/src/components/blocks/integration/integration2.tsx b/src/components/blocks/integration/integration2.tsx
index ffaf621..9970a85 100644
--- a/src/components/blocks/integration/integration2.tsx
+++ b/src/components/blocks/integration/integration2.tsx
@@ -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>
diff --git a/src/components/blocks/logo-cloud/logo-cloud.tsx b/src/components/blocks/logo-cloud/logo-cloud.tsx
index 3616c8a..f2198da 100644
--- a/src/components/blocks/logo-cloud/logo-cloud.tsx
+++ b/src/components/blocks/logo-cloud/logo-cloud.tsx
@@ -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>
 
diff --git a/src/components/blocks/testimonials/testimonials.tsx b/src/components/blocks/testimonials/testimonials.tsx
index d813631..a046389 100644
--- a/src/components/blocks/testimonials/testimonials.tsx
+++ b/src/components/blocks/testimonials/testimonials.tsx
@@ -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
diff --git a/src/components/layout/navbar.tsx b/src/components/layout/navbar.tsx
index 99b1763..fbe4f1c 100644
--- a/src/components/layout/navbar.tsx
+++ b/src/components/layout/navbar.tsx
@@ -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">