feat: sticky card

src/components/stateless/StickyCard/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const StickyCard = ({ cards, children }) => {
+  return (
+    <>
+      <section className="flex flex-col gap-4 pb-20">
+        {cards.map((card, index) => (
+          <div
+            key={card?.id}
+            style={{ top: `calc(50px + ${index * 30}px)` }}
+            className="bg-[#0a192f] w-[50vw] flex justify-center rounded-2xl overflow-hidden
+              z-0 after:z-10 after:content-[''] after:absolute after:inset-0 after:outline after:-outline-offset-2
+              after:rounded-3xl after:outline-white/20 px-8 pt-4 after:pointer-events-none sticky m-auto"
+          >
+            <div className="sticky top-9 h-[40vh]"></div>
+          </div>
+        ))}
+      </section>
+    </>
+  )
+}
+
+export default StickyCard

src/pages/demo/index.jsx

@@ -5,6 +5,8 @@ import AnimationTabs from '@stateless/AnimationTabs'
 import LogoSlider from '@stateless/LogoSlider'
 import FloatingIcon, { SocialIcon } from '@stateless/FloatingIcon'
 import Footer from '@stateless/Footer'
+
+import StickyCard from '@stateless/StickyCard'
 import SpringPng from '@assets/images/spring.png'
 import HePng from '@assets/images/he.png'
 import SongPng from '@assets/images/song.png'
@@ -127,6 +129,8 @@ const ProDemo = () => {
         <AnimationTabs tabs={tabs} />
       </div>
       <Table columns={columns} dataSource={[]} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />
+
+      <StickyCard cards={[...Array(4)]} />
       <Footer />
     </FixTabPanel>
   )