refactor: move landing page texts to constants

pages/about.tsx

@@ -26,13 +26,13 @@ const About: NextPageWithLayout = () => {
       <section className='space-y-12'>
         <div>
           <h1 className='about-h1'>Why Build This?</h1>
-          <p>{aboutPage.reason}</p>
+          <p>{aboutPage.body1}</p>
         </div>
 
         <div>
           <h1 className='about-h1'>Future Updates</h1>
           <ul>
-            {aboutPage.futures.map((update) => (
+            {aboutPage.body2.map((update) => (
               <li key={update}>▸ {update}</li>
             ))}
           </ul>
@@ -58,7 +58,7 @@ const About: NextPageWithLayout = () => {
 };
 
 About.getLayout = (page: ReactElement) => (
-  <Layout className='py-14' xl allowAll>
+  <Layout className='py-14' wide allowAll>
     {page}
   </Layout>
 );

pages/contact.tsx

@@ -60,7 +60,7 @@ const Contact: NextPageWithLayout = () => {
 };
 
 Contact.getLayout = (page: ReactElement) => (
-  <Layout className='py-14' xl allowAll>
+  <Layout className='py-14' wide allowAll>
     {page}
   </Layout>
 );

pages/index.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { FaSignInAlt } from 'react-icons/fa';
@@ -7,6 +8,7 @@ import { Layout } from '@/components';
 import avatar from '@/assets/avatar.svg';
 import { Button } from '@/components/Button';
 import { useAuth } from '@/context/AuthContext';
+import { landingPage } from '@/utils/constants';
 import { NextPageWithLayout } from '@/types/page';
 
 const Index: NextPageWithLayout = () => {
@@ -38,10 +40,7 @@ const Index: NextPageWithLayout = () => {
               </h1>
 
               <p className='mt-2 text-md sm:text-lg lg:w-[540px] xl:w-[650px] xl:text-xl'>
-                Every now and then, someone would pop in the group chat and say:
-                &quot;What assignments do we have? When is it due?&quot; With
-                this web app, you can track tasks collaboratively with your
-                peers!
+                {landingPage.body1}
               </p>
             </div>
 
@@ -72,32 +71,18 @@ const Index: NextPageWithLayout = () => {
       <section className='mx-auto max-w-screen-xl pb-40 md:space-y-40 space-y-24'>
         <Info
           title='Built by a student for students.'
-          body='trackAsOne is a responsive web-based app that enables students to track homework & activities together with their friends or classmates. Forgot about a homework? Your friends got your back!'
+          body={landingPage.body2}
         />
 
-        <Info
-          title='Why use this task tracker?'
-          body="Tasks given by teachers are usually on different platforms. Few
-            examples are Messenger and MS Teams. The problem is that they are
-            usually cluttered with conversations making it hard to scroll back
-            and you have to check multiple platforms just to make sure you won't
-            miss an assignment."
-        />
+        <Info title='Why use this task tracker?' body={landingPage.body3} />
       </section>
     </>
   );
 };
 
 Index.getLayout = (page: ReactElement) => {
   return (
-    <Layout
-      xl
-      allowAll
-      className='pt-20'
-      description='trackAsOne is a collaborative cross-platform app that enables
-  students to track homework & activities together with their
-  friends or classmates.'
-    >
+    <Layout wide allowAll className='pt-20'>
       {page}
     </Layout>
   );

src/components/Layout.tsx

@@ -7,14 +7,14 @@ import { Navbar, Footer, LoaderHandler, Error } from '@/components';
 interface LayoutProps extends NextSeoProps {
   className?: string;
   loaders?: boolean[];
-  xl?: boolean;
+  wide?: boolean;
   allowAll?: boolean;
 }
 
 const Layout: React.FC<LayoutProps> = ({
   className,
   loaders,
-  xl,
+  wide,
   allowAll,
   children,
   ...rest
@@ -34,7 +34,7 @@ const Layout: React.FC<LayoutProps> = ({
           <Navbar />
           <main
             className={`text-primary w-[90%] mx-auto min-h-screen ${
-              xl ? 'max-w-screen-xl' : 'max-w-screen-md'
+              wide ? 'max-w-screen-xl' : 'max-w-screen-md'
             }  ${className}`}
           >
             {display()}

src/utils/constants.ts

@@ -4,10 +4,10 @@ export const defaultPic =
   'https://firebasestorage.googleapis.com/v0/b/trackas1.appspot.com/o/default%2Fdefault.png?alt=media&token=5d2945ad-abc4-42d9-ab39-20408e5169bc';
 
 export const aboutPage = {
-  reason:
+  body1:
     'I never really had a to-do list for checking homework. I usually check for activities on MS Teams, ELMS, and I would scroll up on our messenger group chat that is cluttered with unrelated convos until I find the instruction our teacher gave us. Some students ask on the group chat about what assignments your class has. Eventually, it will get covered with convos and another one of your classmates will ask again. This is so inefficient and kind of annoying. That is why I built this web app. My goal was to build a to-do list that you can share with your friends and classmates so you only need to check one platform for your assignments.',
 
-  futures: [
+  body2: [
     'Notifications API',
     'Footer Links',
     'Edit Profile',
@@ -17,6 +17,17 @@ export const aboutPage = {
   ],
 };
 
+export const landingPage = {
+  body1:
+    'Every now and then, someone would pop in the group chat and say: "What assignments do we have? When is it due?" With this web app, you can track tasks collaboratively with your peers!',
+
+  body2:
+    'trackAsOne is a responsive web-based app that enables students to track homework & activities together with their friends or classmates. Forgot about a homework? Your friends got your back!',
+
+  body3:
+    'Tasks given by teachers are usually on different platforms. Few examples are Messenger and MS Teams. The problem is that they are usually cluttered with conversations making it hard to scroll back and you have to check multiple platforms just to make sure you won't miss an assignment.',
+};
+
 export const socials = [
   { Icon: FaGithub, link: 'https://github.com/joshxfi' },
   { Icon: FaLinkedin, link: 'https://ph.linkedin.com/in/joshdanielb' },