feat: interactive book

Author: wkylin

src/components/stateless/InteractiveBook/index.module.less

@@ -366,14 +366,12 @@
   border-radius: 0 4px 4px 0;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   border: 1px solid #e5e5e5;
-  transform: translateZ(-1px);
-  z-index: -1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
-  opacity: 0.4;
+  opacity: 0.6;
 }
 
 .endText {
@@ -406,7 +404,6 @@
   position: absolute;
   bottom: 20px;
   left: 50%;
-  transform: translateX(-50%);
   display: flex;
   align-items: center;
   gap: 24px;

src/components/stateless/InteractiveBook/index.tsx

@@ -229,7 +229,12 @@ export default function InteractiveBook({
           })}
 
           {/* Back Cover (Static) */}
-          <div className={styles.backCover} style={{ transform: 'translateZ(-1px)', zIndex: -1 }}>
+          <div
+            className={styles.backCover}
+            style={{
+              zIndex: currentPageIndex === pages.length - 1 ? 50 : -1,
+            }}
+          >
             <div className={styles.backCover}>
               <p className={styles.endText}>The End</p>
               <motion.button
@@ -249,9 +254,9 @@ export default function InteractiveBook({
       <AnimatePresence>
         {isOpen && (
           <motion.div
-            initial={{ opacity: 0, y: 20, transform: 'translateX(-50%)' }}
-            animate={{ opacity: 1, y: 0, transform: 'translateX(-50%)' }}
-            exit={{ opacity: 0, y: 20, transform: 'translateX(-50%)' }}
+            initial={{ opacity: 0, y: 20, x: '-50%' }}
+            animate={{ opacity: 1, y: 0, x: '-50%' }}
+            exit={{ opacity: 0, y: 20, x: '-50%' }}
             transition={{ duration: 0.4, ease: 'easeOut' }}
             className={cn(styles.navigation)}
           >

src/pages/home/index.jsx

@@ -564,6 +564,9 @@ const Home = () => {
   ]
   return (
     <FixTabPanel ref={scrollRef}>
+      <section className={styles.avatar} style={{ margin: '10px 0', fontSize: 24 }}>
+        <ColorfulText text={`React version: ${version}`} />
+      </section>
       <InteractiveBook
         coverImage="https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&q=80&w=800"
         bookTitle="The Design of Everyday Things"
@@ -572,9 +575,6 @@ const Home = () => {
         width={350}
         height={500}
       />
-      <section className={styles.avatar} style={{ margin: '10px 0', fontSize: 24 }}>
-        <ColorfulText text={`React version: ${version}`} />
-      </section>
       <section style={{ width: '320px', margin: '30px 0' }}>
         <Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
         <Flex align="center">