feat: rename ads to showcase and remove current ongoing ads

holy-grail-frontend/src/features/Footer/Footer.css

@@ -1,4 +1,4 @@
-.footer-with-ads {
+.footer-with-showcase {
     margin-top: 128px;
 }
 

holy-grail-frontend/src/features/Footer/Footer.tsx

@@ -1,59 +1,59 @@
 import { useContext } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { AuthContext } from '@providers';
-import { FooterAds } from '@features';
+import { FooterShowcase } from '@features';
 import './Footer.css';
 
 export const Footer = () => {
   const { user } = useContext(AuthContext);
 
   return (
-    <div className='footer-with-ads'>
-      <FooterAds />
-      <footer className='footer'>
-        <div className='footer-logo-section'>
-          <img
-            className='footer-logo-image'
-            src='https://document.grail.moe/grail-chan-happy.png'
-            alt=''
-          />
-        </div>
-        <div className='footer-container'>
-          <div>
-            <div className='footer-title'>Information</div>
-            <div className='footer-content'>
-              <RouterLink to='/#home'>Home</RouterLink>
-            </div>
-            <div className='footer-content'>
-              <RouterLink to='/library'>Library</RouterLink>
-            </div>
-            <div className='footer-content'>
-              <RouterLink to='/#FAQ'>FAQ</RouterLink>
-            </div>
+    // <div className='footer-with-showcase'>
+    //   <FooterShowcase />
+    <footer className='footer'>
+      <div className='footer-logo-section'>
+        <img
+          className='footer-logo-image'
+          src='https://document.grail.moe/grail-chan-happy.png'
+          alt=''
+        />
+      </div>
+      <div className='footer-container'>
+        <div>
+          <div className='footer-title'>Information</div>
+          <div className='footer-content'>
+            <RouterLink to='/#home'>Home</RouterLink>
+          </div>
+          <div className='footer-content'>
+            <RouterLink to='/library'>Library</RouterLink>
           </div>
-          <div>
-            <div className='footer-title'>Contribute</div>
-            <div className='footer-content'>
-              <RouterLink to='/upload'>Upload</RouterLink>
-            </div>
+          <div className='footer-content'>
+            <RouterLink to='/#FAQ'>FAQ</RouterLink>
           </div>
-          <div>
-            <div className='footer-title'>Account</div>
-            <div className='footer-content' style={user ? { display: 'none' } : undefined}>
-              <RouterLink to='/login'>Log In</RouterLink>
-            </div>
-            <div className='footer-content' style={user ? { display: 'none' } : undefined}>
-              <RouterLink to='/register'>Register</RouterLink>
-            </div>
-            <div className='footer-content' style={user ? undefined : { display: 'none' }}>
-              <RouterLink to='/account'>Account Settings</RouterLink>
-            </div>
+        </div>
+        <div>
+          <div className='footer-title'>Contribute</div>
+          <div className='footer-content'>
+            <RouterLink to='/upload'>Upload</RouterLink>
           </div>
         </div>
-        <div className='footer-copyright-section'>
-          &#169; 2023 Holy Grail Team • Questions? Contact us at [email protected]
+        <div>
+          <div className='footer-title'>Account</div>
+          <div className='footer-content' style={user ? { display: 'none' } : undefined}>
+            <RouterLink to='/login'>Log In</RouterLink>
+          </div>
+          <div className='footer-content' style={user ? { display: 'none' } : undefined}>
+            <RouterLink to='/register'>Register</RouterLink>
+          </div>
+          <div className='footer-content' style={user ? undefined : { display: 'none' }}>
+            <RouterLink to='/account'>Account Settings</RouterLink>
+          </div>
         </div>
-      </footer>
-    </div>
+      </div>
+      <div className='footer-copyright-section'>
+        &#169; 2023 Holy Grail Team • Questions? Contact us at [email protected]
+      </div>
+    </footer>
+    // </div>
   );
 };

holy-grail-frontend/src/features/Library/Library.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from '@utils';
 import { WelcomeBackHeader, TextLink } from '@components';
-import { TextAds } from '@features';
+import { TextShowcase } from '@features';
 import { NotesApplication } from './NotesApplication';
 import './Library.css';
 
@@ -15,7 +15,7 @@ export const Library = () => {
         <div className='library-subtitle'>
           View materials or contribute <TextLink onClick={goToUploadPage}>here</TextLink> after you
           have logged in (subjected to approval of administrators).
-          <TextAds />
+          {/*<TextShowcase />*/}
         </div>
         <NotesApplication />
       </div>

holy-grail-frontend/src/features/Ads/FooterAds.css → holy-grail-frontend/src/features/Showcase/FooterShowcase.css

@@ -1,11 +1,11 @@
-.ads-container {
+.showcase-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 16px;
 }
 
-.ads-image {
+.showcase-image {
     position: relative;
     display: flex;
     margin: auto;

holy-grail-frontend/src/features/Ads/FooterAds.tsx → holy-grail-frontend/src/features/Showcase/FooterShowcase.tsx

@@ -5,7 +5,7 @@ import { useNavigation } from '@utils';
 import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
 import InfoIcon from '@mui/icons-material/Info';
-import './FooterAds.css';
+import './FooterShowcase.css';
 
 const ADS_IMAGE_URL = 'https://document.grail.moe/General+Paper+Ad.png';
 
@@ -52,12 +52,12 @@ const InfoButton = ({ isDesktop }: InfoButtonProps) => {
   );
 };
 
-export const FooterAds = () => {
+export const FooterShowcase = () => {
   const { isDesktop } = useContext(MediaQueryContext);
   const { goToGP } = useNavigation();
-  const adsRef = useRef(null);
+  const showcaseRef = useRef(null);
 
-  const handleAdsClick = async () => {
+  const handleShowcaseClick = async () => {
     try {
       await adClick();
     } finally {
@@ -81,22 +81,22 @@ export const FooterAds = () => {
       },
     );
 
-    if (adsRef.current) {
-      observer.observe(adsRef.current);
+    if (showcaseRef.current) {
+      observer.observe(showcaseRef.current);
     }
 
     return () => {
-      if (adsRef.current) {
-        observer.unobserve(adsRef.current);
+      if (showcaseRef.current) {
+        observer.unobserve(showcaseRef.current);
       }
     };
-  }, [adsRef]);
+  }, [showcaseRef]);
 
   return (
-    <div className='ads-container' ref={adsRef}>
-      <div className='ads-image'>
-        <a onClick={handleAdsClick} style={{ cursor: 'pointer' }}>
-          <img alt='GP Ads here!' src={ADS_IMAGE_URL} width={isDesktop ? '468' : '320'}></img>
+    <div className='showcase-container' ref={showcaseRef}>
+      <div className='showcase-image'>
+        <a onClick={handleShowcaseClick} style={{ cursor: 'pointer' }}>
+          <img alt='GP Showcase here!' src={ADS_IMAGE_URL} width={isDesktop ? '468' : '320'}></img>
         </a>
         <InfoButton isDesktop={isDesktop} />
       </div>

holy-grail-frontend/src/features/Ads/TextAds.tsx → holy-grail-frontend/src/features/Showcase/TextShowcase.tsx

@@ -3,11 +3,11 @@ import { TextLink } from '@components';
 import { useNavigation } from '@utils';
 import { adClick } from '@api/analytics';
 
-export const TextAds = () => {
+export const TextShowcase = () => {
   const { goToStudentsKahoot, goToSecondarySchoolBot, goToJCBot, goToJCChatBot, goToThisCounted } =
     useNavigation();
 
-  const handleAdsClick = async (navigate: () => void) => {
+  const handleShowcaseClick = async (navigate: () => void) => {
     try {
       await adClick();
     } finally {
@@ -18,7 +18,7 @@ export const TextAds = () => {
   const handleClick = (navigate: () => void): MouseEventHandler<HTMLAnchorElement> => {
     return (event) => {
       event.preventDefault();
-      handleAdsClick(navigate);
+      handleShowcaseClick(navigate);
     };
   };
 

holy-grail-frontend/src/features/Showcase/index.ts

@@ -0,0 +1,2 @@
+export * from './FooterShowcase';
+export * from './TextShowcase';

holy-grail-frontend/src/features/index.ts

@@ -1,4 +1,4 @@
-export * from './Ads';
+export * from './Showcase';
 export * from './Approval';
 export * from './Common';
 export * from './Developer';