Switch to version 15: modified src/components/sections/about/AboutFeaturesSplit.tsx

This commit is contained in:
2026-05-08 10:51:53 +00:00
parent 9df5080bdc
commit 3bc80ddd37

View File

@@ -1,3 +1,4 @@
import AnimatedBackground from "@/components/custom/AnimatedBackground";
import type { LucideIcon } from "lucide-react"; import type { LucideIcon } from "lucide-react";
import Button from "@/components/ui/Button"; import Button from "@/components/ui/Button";
import TextAnimation from "@/components/ui/TextAnimation"; import TextAnimation from "@/components/ui/TextAnimation";
@@ -24,7 +25,8 @@ const AboutFeaturesSplit = ({
videoSrc, videoSrc,
}: AboutFeaturesSplitProps) => { }: AboutFeaturesSplitProps) => {
return ( 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 gap-8 mx-auto w-content-width">
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span> <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
@@ -54,7 +56,7 @@ const AboutFeaturesSplit = ({
</div> </div>
<div className="flex flex-col md:flex-row md:items-stretch gap-5"> <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) => { {items.map((item, index) => {
const ItemIcon = resolveIcon(item.icon); const ItemIcon = resolveIcon(item.icon);
return ( return (
@@ -74,7 +76,7 @@ const AboutFeaturesSplit = ({
})} })}
</div> </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"> <div className="relative size-full">
<ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="absolute inset-0 object-cover rounded" /> <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="absolute inset-0 object-cover rounded" />
</div> </div>