feat: add animated background to about section

Merge version_14_1778228418077 into main

src/components/custom/AnimatedBackground.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const AnimatedBackground = () => {
+  return (
+    <div className="absolute inset-0 z-0 overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-br from-background-light via-background to-background-dark" />
+      <div className="absolute inset-0 animate-pulse-slow">
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full filter blur-3xl opacity-50" />
+        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-secondary/10 rounded-full filter blur-3xl opacity-50" />
+      </div>
+    </div>
+  );
+};
+
+export default AnimatedBackground;

src/components/custom/TestimonialCard.tsx

@@ -35,7 +35,7 @@ const TestimonialCard = () => {
   }, []);
 
   return (
-    <div className="absolute bottom-10 right-10 z-20">
+    <div className="z-20">
       <div className={`testimonial-card ${visible ? 'fade-in' : 'fade-out'}`}>
         <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 max-w-sm shadow-lg">
           <p className="text-gray-800 italic">"{testimonials[index].quote}"</p>

src/components/sections/about/AboutFeaturesSplit.tsx

@@ -1,3 +1,4 @@
+import AnimatedBackground from "@/components/custom/AnimatedBackground";
 import type { LucideIcon } from "lucide-react";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
@@ -24,7 +25,8 @@ const AboutFeaturesSplit = ({
   videoSrc,
 }: AboutFeaturesSplitProps) => {
   return (
-    <section aria-label="About section" className="py-20">
+    <section aria-label="About section" className="py-20 relative">
+      <AnimatedBackground />
       <div className="flex flex-col gap-8 mx-auto w-content-width">
         <div className="flex flex-col items-center gap-2">
           <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
@@ -54,7 +56,7 @@ const AboutFeaturesSplit = ({
         </div>
 
         <div className="flex flex-col md:flex-row md:items-stretch gap-5">
-          <div className="flex flex-col justify-center gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 w-full md:w-4/10 2xl:w-3/10 card rounded">
+          <div className="flex flex-col justify-center gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 w-full md:w-4/10 2xl:w-3/10 card rounded bg-transparent backdrop-blur-lg border border-white/20">
             {items.map((item, index) => {
               const ItemIcon = resolveIcon(item.icon);
               return (
@@ -74,7 +76,7 @@ const AboutFeaturesSplit = ({
             })}
           </div>
 
-          <div className="p-3 xl:p-4 2xl:p-5 w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden">
+          <div className="p-3 xl:p-4 2xl:p-5 w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden bg-transparent">
             <div className="relative size-full">
               <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="absolute inset-0 object-cover rounded" />
             </div>

src/components/sections/contact/ContactCta.tsx

@@ -16,7 +16,11 @@ const ContactCta = ({
   return (
     <section aria-label="Contact section" className="py-20">
       <div className="w-content-width mx-auto">
-        <ScrollReveal variant="slide-up" className="flex items-center justify-center py-20 px-5 md:px-10 card rounded">
+        <ScrollReveal variant="slide-up" className="relative overflow-hidden flex items-center justify-center py-20 px-5 md:px-10 card rounded">
+          <div
+            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] -z-10 bg-[radial-gradient(closest-side,theme(colors.background/0.5),transparent)]"
+            aria-hidden="true"
+          />
           <div className="w-full md:w-3/4 flex flex-col items-center gap-3">
             <span className="card rounded px-3 py-1 text-sm">{tag}</span>
 

src/components/sections/hero/HeroOverlay.tsx

@@ -43,38 +43,52 @@ const HeroOverlay = ({
         aria-hidden="true"
       />
 
-      <div className="relative z-10 w-content-width mx-auto pb-40 md:pb-50">
-        <div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10">
-          <span className="w-fit px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
+      <div className="relative z-10 w-content-width mx-auto pb-20 md:pb-20">
+        <div className="flex flex-col md:flex-row justify-between items-end gap-3 w-full">
+          <div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10">
+            <span className="w-fit px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
 
-          <TextAnimation
-            text={title}
-            variant="fade"
-            gradientText={true}
-            tag="h1"
-            className="text-7xl 2xl:text-8xl font-medium text-primary-cta-text text-balance"
-          />
+            <TextAnimation
+              text={title}
+              variant="fade"
+              gradientText={true}
+              tag="h1"
+              className="text-7xl 2xl:text-8xl font-medium text-primary-cta-text text-balance"
+            />
 
-          <TextAnimation
-            text={description}
-            variant="fade"
-            gradientText={false}
-            tag="p"
-            className="text-lg md:text-xl text-primary-cta-text leading-tight text-balance"
-          />
+            <TextAnimation
+              text={description}
+              variant="fade"
+              gradientText={false}
+              tag="p"
+              className="text-lg md:text-xl text-primary-cta-text leading-tight text-balance"
+            />
 
-          <div className="flex flex-wrap gap-3 mt-3">
-            <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
-            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
-          </div>
-
-          {avatars && avatars.length > 0 && (
-            <div className="mt-4">
-              <AvatarGroup avatars={avatars} size="lg" label={avatarsLabel} labelClassName="text-primary-cta-text" />
+            <div className="flex flex-wrap gap-3 mt-3">
+              <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />
+              <Button
+                text={secondaryButton.text}
+                href={secondaryButton.href}
+                variant="secondary"
+                animationDelay={0.1}
+              />
             </div>
-          )}
+
+            {avatars && avatars.length > 0 && (
+              <div className="mt-4">
+                <AvatarGroup
+                  avatars={avatars}
+                  size="lg"
+                  label={avatarsLabel}
+                  labelClassName="text-primary-cta-text"
+                />
+              </div>
+            )}
+          </div>
+          <div className="w-full md:w-auto">
+            <TestimonialCard />
+          </div>
         </div>
-        <TestimonialCard />
       </div>
     </section>
   );

src/index.css

@@ -16,7 +16,7 @@
   --background-accent: #6bbfb8;
 
   /* @layout/border-radius/rounded */
-  --radius: 1rem;
+  --radius: 1.5rem;
 
   /* @layout/content-width/medium */
   --width-content-width: clamp(40rem, 72.5vw, 100rem);

src/styles/animations.css

@@ -212,3 +212,18 @@
   77% { opacity: 0.05; }
   88% { opacity: 0; }
 }
+
+@keyframes pulse-slow {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.7;
+  }
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 8s infinite ease-in-out;
+}