update

web/src/pages/github-campaign/_components/Tabs.tsx

@@ -0,0 +1,43 @@
+import { styled } from '@mui/material';
+import { motion } from 'framer-motion';
+import React, { createContext, type ReactNode, useContext, useEffect, useState } from 'react';
+
+export const TabsContext = createContext<{ init: boolean, current: string, setCurrent: (value: string) => void }>({ init: false, current: '', setCurrent () {} });
+
+export function Tabs ({ children, defaultValue }: { children: ReactNode, defaultValue: string }) {
+  const [current, setCurrent] = useState(defaultValue);
+  const [init, setInit] = useState(false);
+  useEffect(() => {
+    setInit(true);
+  }, []);
+
+  return (
+    <TabsContext.Provider value={{ init, current, setCurrent }}>
+      {children}
+    </TabsContext.Provider>
+  );
+}
+
+export const TabsList = styled('ul')`
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  padding: 0 24px;
+  gap: 12px;
+`;
+
+export function TabItem ({ value, children }: { value: string, children: ReactNode }) {
+  const { current, setCurrent } = useContext(TabsContext);
+
+  return (
+    <motion.li style={{ position: 'relative', padding: '8px 32px' }} initial={{ color: '#747474' }} animate={value === current ? { color: '#000000' } : { color: '#747474' }}>
+      {(value === current) && <motion.div layout layoutId="active" style={{ zIndex: 0, pointerEvents: 'none', position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', background: '#FFE895', borderRadius: 9999 }} />}
+      <button style={{ cursor: 'pointer', fontSize: '24px', fontWeight: 700, position: 'relative', color: 'currentcolor', background: 'none', appearance: 'none', border: 'none' }} type="button" onClick={() => setCurrent(value)}>
+        {children}
+      </button>
+    </motion.li>
+  );
+}

web/src/pages/github-campaign/_sections/0-heading.tsx

@@ -62,9 +62,16 @@ function PrimaryHeading ({ loading, onClickAction }: { loading: boolean, onClick
             <img alt="OSSInsight Logo" src={require('../_components/ossi-logo.png').default} height={56} />
             <img alt="TiDB Logo" src={require('../_components/tidb-logo.png').default} height={68} />
           </HeadingLogos>
-          <Button id='start-claim-trigger' disabled={loading} color="primary" variant="contained" onClick={() => {
-            onClickAction();
-          }}>
+          <Button
+            id="start-claim-trigger"
+            sx={{ width: ['100%', '100%', 'max-content'] }}
+            disabled={loading}
+            color="primary"
+            variant="contained"
+            onClick={() => {
+              onClickAction();
+            }}
+          >
             Claim Your Credits Now
           </Button>
         </HeadingRight>

web/src/pages/github-campaign/_sections/1-how-it-works.tsx

@@ -5,7 +5,7 @@ import React, { Fragment } from 'react';
 
 export function HowItWorks () {
   return (
-    <ThisSection initial="initial" whileInView="hover" viewport={{ amount: 'all', once: true }}>
+    <ThisSection initial="initial" whileInView="hover" viewport={{ amount: 0.6, once: true }}>
       <ThisSectionContent>
         <SectionTitle>
           How it Works

web/src/pages/github-campaign/_sections/2-0-free.mdx

@@ -0,0 +1,3 @@
+- **Personal Website Hosting**: Create websites or blogs using WordPress or Joomla.
+- **RAG Agent Prototyping**: Develop RAG agents with your own knowledge base.
+- **Minecraft Server**: Run a personal Minecraft server, where you can play on with your friends all day.

web/src/pages/github-campaign/_sections/2-0-you-can.mdx

@@ -0,0 +1,8 @@
+TiDB Serverless is a highly scalable, vector search built-in, and cost-effective serverless database, which is dedicated to powering modern applications with simple solutions. <a href="https://www.pingcap.com/tidb-serverless/?utm_source=ossinsight&utm_medium=referral&utm_campaign=plg_OSScontribution_credit_05" target="_blank" rel="noopener noreferrer">Read more</a>.
+
+With it, you can:
+
+- Build highly scalable applications with ease
+- Leverage advanced features like vector search
+- Enjoy seamless integration with what you use
+- Pay only for what you use, and only beyond free credits

web/src/pages/github-campaign/_sections/2-1-$5.mdx

@@ -0,0 +1,2 @@
+- **Start small businesses**: Power online stores, community forums, or customer feedback systems.
+- **Data API Backends**: Host small databases for managing small-scale workloads like API backend

web/src/pages/github-campaign/_sections/2-2-$10.mdx

@@ -0,0 +1 @@
+- **Scale startups**: Deploy SaaS applications, analytics dashboards, or e-commerce platforms with of thousands users and continuous read/write operations.

web/src/pages/github-campaign/_sections/2-3-$100.mdx

@@ -0,0 +1 @@
+- **Data-heavy applications**: Scale applications with distributed databases, handle enterprise-level systems, or power data-heavy industries like fintech or healthcare.

web/src/pages/github-campaign/_sections/2-4-$300.mdx

@@ -0,0 +1,2 @@
+- **Power large-scale enterprises**: Handle millions of users with high performance and reliability requirements.
+- **Run mission-critical systems**: Support complex applications like fintech, gaming, or healthcare solutions.

web/src/pages/github-campaign/_sections/2-introduction.tsx

@@ -1,7 +1,23 @@
 import { Button, css, styled } from '@mui/material';
 import { Section, SectionContent, SectionTitle } from '@site/src/pages/github-campaign/_components/Section';
 import { TiDBCloudButton } from '@site/src/pages/github-campaign/_components/TiDBCloudButton';
-import React from 'react';
+import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
+import React, { type ReactNode } from 'react';
+import { TabItem, Tabs, TabsContext, TabsList } from '../_components/Tabs';
+
+// @ts-expect-error
+import Content0 from './2-0-free.mdx';
+
+// @ts-expect-error
+import YouCan from './2-0-you-can.mdx';
+// @ts-expect-error
+import Content1 from './2-1-$5.mdx';
+// @ts-expect-error
+import Content2 from './2-2-$10.mdx';
+// @ts-expect-error
+import Content3 from './2-3-$100.mdx';
+// @ts-expect-error
+import Content4 from './2-4-$300.mdx';
 
 export function IntroductionsSection () {
   return (
@@ -13,88 +29,134 @@ export function IntroductionsSection () {
         <Content invert>
           {image1}
           <article>
-            <p>
-              TiDB Serverless is a highly scalable, vector search built-in, and cost-effective serverless database, which is dedicated to powering modern applications with simple solutions. <a href="https://www.pingcap.com/tidb-serverless/?utm_source=ossinsight&utm_medium=referral&utm_campaign=plg_OSScontribution_credit_05" target="_blank" rel="noopener noreferrer">Read more</a>.
-            </p>
-            <p>
-              With it, you can:
-            </p>
-            <ul>
-              <li>Build highly scalable applications with ease</li>
-              <li>Leverage advanced features like vector search</li>
-              <li>Enjoy seamless integration with what you use</li>
-              <li>Pay only for what you use, and only beyond free credits</li>
-            </ul>
-            <TiDBCloudButton mt={0} variant='contained'>Try Free</TiDBCloudButton>
+            <YouCan />
+            <TiDBCloudButton mt={0} variant="contained">Try Free</TiDBCloudButton>
           </article>
         </Content>
-        <SectionTitle sx={{ mt: 40 }}>
+        <SectionTitle sx={{ mt: [20, 20, 40] }}>
           With TiDB Serverless credits 💰 , you can:
         </SectionTitle>
-        <Content>
-          {image2}
-          <article>
-            <p>
-              <strong>Firstly, you can always get started with $0. With TiDB Serverless&#39;s generous 25GiB free quota, you can get started any project with ease.</strong>
-            </p>
-            <ul>
-              <li>
-                <h3>With $5-10 💰, people have spinned up ...</h3>
-                <p>Hackathon projects can be listed here?</p>
-              </li>
-              <li>
-                <h3>With $10 - 100 💰 💰 💰, people are building ....</h3>
-                <p>Anonymous case studies</p>
-              </li>
-              <li>
-                <h3>With $ 100-300 💰 💰 💰 💰 💰, people can create .....</h3>
-                <p>...</p>
-              </li>
-            </ul>
-            <Button
-              variant="contained"
-              onClick={() => {
-                window.scrollTo({ top: 0, behavior: 'smooth' });
-                document.getElementById('start-claim-trigger')?.click();
-              }}
-            >Claim your credits now</Button>
-          </article>
-        </Content>
+        <Tabs defaultValue="free">
+          <TabsList>
+            <LayoutGroup>
+              {tabs.map(tab => <TabItem key={tab.value} value={tab.value}>{tab.title}</TabItem>)}
+            </LayoutGroup>
+          </TabsList>
+          <Content>
+            {image2}
+            <motion.article layout>
+              <TabsContext.Consumer>
+                {({ init, current }) => (
+                  <AnimatePresence presenceAffectsLayout>
+                    {tabs.map(tab => (
+                      (!init || current === tab.value) && (
+                        <motion.div
+                          key={tab.value}
+                          initial={{ opacity: 0, position: 'absolute' }}
+                          animate={{ opacity: 1, position: 'relative' }}
+                          exit={{ opacity: 0, position: 'absolute' }}
+                        >
+                          {tab.content}
+                        </motion.div>
+                      )
+                    ))}
+                  </AnimatePresence>
+                )}
+              </TabsContext.Consumer>
+              <Button
+                variant="contained"
+                onClick={() => {
+                  window.scrollTo({ top: 0, behavior: 'smooth' });
+                  document.getElementById('start-claim-trigger')?.click();
+                }}
+              >
+                Claim your credits now
+              </Button>
+            </motion.article>
+          </Content>
+        </Tabs>
       </SectionContent>
     </Section>
   );
 }
 
+const tabs: Array<{ value: string, title: ReactNode, content: ReactNode }> = [
+  {
+    value: 'free',
+    title: 'Free',
+    content: <Content0 />,
+  },
+  {
+    value: '$5',
+    title: '$5 - $10',
+    content: <Content1 />,
+  },
+  {
+    value: '$10',
+    title: '$10 - $100',
+    content: <Content2 />,
+  },
+  {
+    value: '$100',
+    title: '$100 - $300',
+    content: <Content3 />,
+  },
+  {
+    value: '$300',
+    title: '$300 - $1000',
+    content: <Content4 />,
+  },
+];
+
 const Content = styled('div')<{ invert?: boolean }>`
-  ${({ theme }) => ({
-    [theme.breakpoints.up('md')]: css`
-      display: flex;
-      gap: 120px;
-    `,
-  })}
-  margin-top: 80px;
+  margin-top: 36px;
 
   > article {
     order: 2;
+  }
+
+  > svg {
+    display: none;
+  }
+
+  article {
     font-size: 24px;
     line-height: 41px;
 
     strong {
-      color: #FFE895;
     }
 
-    a:not(.MuiButtonBase-root ) {
+    a:not(.MuiButtonBase-root) {
       color: #FFE895;
       text-decoration: underline;
     }
-  }
 
-  > svg {
-    flex-shrink: 0;
-    display: block;
-    margin: 0 auto;
-    order: ${({ invert }) => invert ? 3 : 1};
+    .MuiButtonBase-root {
+      width: 100%;
+    }
   }
+
+  ${({ theme, invert }) => ({
+    [theme.breakpoints.up('md')]: css`
+      margin-top: 80px;
+
+      display: flex;
+      gap: 120px;
+
+      > svg {
+        flex-shrink: 0;
+        display: block;
+        margin: 0 auto;
+        order: ${invert ? 3 : 1};
+      }
+
+      > article {
+        .MuiButtonBase-root {
+          width: max-content;
+        }
+      }
+    `,
+  })}
 `;
 
 const image1 = <svg width="358" height="379" viewBox="0 0 358 379" fill="none" xmlns="http://www.w3.org/2000/svg">