frontend: update github campaign page entry

pingcap · Sep 10, 2024 · f06cf25 · f06cf25
1 parent d5949df
commit f06cf25
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/web/docusaurus.config.js b/web/docusaurus.config.js
@@ -234,9 +234,9 @@ const config = {
         respectPrefersColorScheme: false,
       },
       announcementBar: {
-        id: 'announcement-20230821',
+        id: 'announcement-20240910',
         content:
-          '<a target="_blank" href="https://next.ossinsight.io/widgets" style="font-weight:bold">✨ Spark Your GitHub Magic: Customize and Share with Your Personalized Widgets!</a>',
+          '<a target="_blank" href="https://ossinsight.io/open-source-heroes/?utm_source=ossinsight&utm_medium=referral&utm_campaign=plg_OSScontribution_credit_05" style="font-weight:bold">Claim up to $1000 in TiDB Serverless credits for your open-source contributions! -></a>',
         backgroundColor: '#4C33B1',
         textColor: '#ffffff',
         isCloseable: true,

diff --git a/web/src/pages/home/_sections/0-summary/left/FooterLine.tsx b/web/src/pages/home/_sections/0-summary/left/FooterLine.tsx
@@ -1,20 +1,36 @@
+import Link from '@docusaurus/Link';
+import { Button, styled } from '@mui/material';
 import React from 'react';
 import { aligns, Body } from '../../../_components/typography';
-import { styled } from '@mui/material';
-
-const Logo = styled('img')(({ theme }) => ({
-  verticalAlign: 'text-bottom',
-  marginLeft: theme.spacing(1),
-}));
 
 const FooterLine = () => {
   return (
     <Body sx={aligns.heading}>
-      <a href="https://www.pingcap.com/tidb-serverless/?utm_source=ossinsight&utm_medium=referral" target="_blank" rel="noreferrer">
-        <Logo src='/img/tidb-cloud-logo-o.png' height={20} alt='TiDB' />
-      </a>
+      <TidbLogo href="https://www.pingcap.com/tidb-serverless/?utm_source=ossinsight&utm_medium=referral" target="_blank" rel="noreferrer">
+        <img src="/img/tidb-logo.svg" height={40} alt="TiDB" />
+        TiDB
+      </TidbLogo>
+      <Button sx={{ color: 'black !important', verticalAlign: 'text-bottom', textTransform: 'none' }} variant="contained" component={Link} to="/open-source-heroes/?utm_source=ossinsight&utm_medium=referral&utm_campaign=plg_OSScontribution_credit_05">
+        Claim credits for open-source heroes! -&gt;
+      </Button>
     </Body>
   );
 };
 
+const TidbLogo = styled('a')`
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  vertical-align: text-bottom;
+  
+  font-weight: 900;
+  font-size: 20px;
+
+  color: white !important;
+  text-decoration: none !important;
+
+  margin-right: 16px;
+`;
+
 export default FooterLine;
diff --git a/web/src/pages/open-source-heroes/index.tsx b/web/src/pages/open-source-heroes/index.tsx
@@ -11,7 +11,9 @@ import React from 'react';
 export default function Page () {
   return (
     <CustomPage
-      description={'The comprehensive Open Source Software insight tool by analyzing massive events from GitHub, powered by TiDB, the best insight building database of data agility.'}
+      title={'Open Source Heroes Claim FREE TiDB Serverless Credits!'}
+      description={'TiDB Serverless rewards your contributions with up to $1,000 in FREE credits to build modern, scalable, AI-powered applications. Power your next big idea with a powerful serverless database. Learn more & qualify!'}
+      keywords={['opensource', 'database', 'cloud', 'developer', 'tidbserverless']}
       dark
       footer={false}
     >