Add decoration

Author: cgwbmp

apps/web/public/src/img/index/decor-bg.webp

@@ -0,0 +1,44 @@
+import React from "react";
+
+export const Decor = () => {
+  return (
+    <div>
+      <div className="pb-twd-20 xl:pb-twd-10"></div>
+      <div className="relative pointer-events-none h-0 z-0">
+        <div className="relative top-0 left-0 h-[900px] md:h-[800px] xl:h-[900px] -translate-y-1/2 overflow-hidden">
+          <img
+            className="absolute top-0 left-0 w-full h-1/2 object-cover"
+            src="/src/img/index/decor-bg.webp"
+            alt=""
+            loading="lazy"
+          />
+          <img
+            className="absolute bottom-0 left-0 w-full h-1/2 rotate-180 object-cover"
+            src="/src/img/index/decor-bg.webp"
+            alt=""
+            loading="lazy"
+          />
+          <div className="absolute top-[50%] left-[50%] w-0 h-0">
+            <img
+              className="object-cover max-w-none absolute bottom-0 right-[-180px] md:right-[-225px] xl:right-[-210px] w-[1158px] h-[145px] xl:h-[165px] mix-blend-plus-lighter"
+              src="/src/img/index/decor-part-top.png"
+              alt=""
+              width="1158"
+              height="165"
+              loading="lazy"
+            />
+            <img
+              className="object-cover max-w-none absolute top-0 left-[-220px] w-[1195px] h-[143px] mix-blend-plus-lighter"
+              src="/src/img/index/decor-part-bottom.png"
+              alt=""
+              width="1195"
+              height="143"
+              loading="lazy"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="pb-twd-10 xl:pb-twd-0"></div>
+    </div>
+  );
+};

apps/web/public/src/img/index/decor-part-1.svg

@@ -9,28 +9,35 @@ import Image from "next/image";
 import { Logo, Logos } from "@/component-library/logos";
 
 export type ProjectsProps = {
+  className?: string;
   title?: React.ReactNode;
   projects?: (CompanyStatsCardProps & { colSpan?: number })[];
   bgSrc?: string;
   logos?: Logo[];
 };
 
 export const Projects: React.FC<ProjectsProps> = ({
+  className,
   title,
   projects,
   bgSrc,
   logos,
 }) => {
   let colCounter = 0;
   return (
-    <section className="relative overflow-hidden bg-nd-inverse text-nd-high-em-text text-left m-twd-0">
+    <section
+      className={cn(
+        "relative overflow-hidden text-nd-high-em-text text-left m-twd-0",
+        className,
+      )}
+    >
       <Container className="py-[64px] md:py-[108px] xl:py-[160px] flex flex-col justify-between relative">
         <div className="flex flex-col xl:flex-row gap-[52px] justify-between items-start">
           <div className="xl:max-w-[70%] grow-0">
             {title && <h2 className="nd-heading-l">{title}</h2>}
           </div>
         </div>
-        <div className="mt-twd-10 xl:mt-twd-16 rounded-2xl border-nd-border-light border-[1px] overflow-hidden relative">
+        <div className="mt-twd-10 xl:mt-twd-16 rounded-2xl border-nd-border-light border-[1px] bg-nd-inverse overflow-hidden relative">
           <Image
             className="opacity-30"
             src={bgSrc}

apps/web/public/src/img/index/decor-part-bottom.png

@@ -29,6 +29,7 @@ import { YouTubePlaylistItem } from "@/lib/youtube/types";
 import { getAllPlaylistItems } from "@/lib/youtube/getYoutubePlaylist";
 import { Community } from "@/components/index/community";
 import { WhatsUp } from "@/components/index/whats-up";
+import { Decor } from "@/components/index/decor";
 
 const TransactionsStat = dynamic(
   () =>
@@ -190,6 +191,7 @@ export default function Home({
       <Divider />
 
       <Projects
+        className="z-1"
         title={t.rich("index.projects.title", {
           light: (chunks) => (
             <>
@@ -208,6 +210,8 @@ export default function Home({
         logos={PROJECTS_LOGOS}
       />
 
+      <Decor />
+
       <CardCariuselSection
         title={t.rich("index.news.title", {
           light: (chunks) => (