Feat/landing page footer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.8.1+10",
+  "version": "0.8.1+11",
   "private": false,
   "scripts": {
     "dev": "next dev",

src/components/landing_page/landing_footer.tsx

@@ -0,0 +1,80 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import { ISUNFA_ROUTE } from '@/constants/url';
+import { copyright } from '@/constants/config';
+import { GrLocation } from 'react-icons/gr';
+import { BiPhoneCall, BiLogoFacebookSquare } from 'react-icons/bi';
+import { LuAlarmClock } from 'react-icons/lu';
+import { IoLogoGithub } from 'react-icons/io';
+import { TiSocialYoutubeCircular } from 'react-icons/ti';
+import { useTranslation } from 'next-i18next';
+
+const CONTACT_PHONE_NUMBER = '+886-2-2700-1979';
+const GITHUB_LINK = 'https://github.com/CAFECA-IO';
+const FACEBOOK_LINK = 'https://www.facebook.com/profile.php?id=61555435381112';
+const YOUTUBE_LINK = 'https://www.youtube.com/@isunfa';
+
+function LandingFooter() {
+  const { t } = useTranslation(['common']);
+
+  return (
+    <footer className="space-y-24px bg-navy-blue-700 px-20px py-48px text-text-neutral-invert tablet:px-80px">
+      <section className="flex items-center gap-26px">
+        <Image src="/logo/isunfa_logo.svg" alt="iSunFA Logo" width={147} height={30}></Image>
+        <p className="text-lg font-semibold">/ Intelligent Accounting</p>
+      </section>
+
+      <section className="flex flex-col justify-between gap-20px laptop:flex-row">
+        <div className="flex flex-col gap-40px tablet:flex-row">
+          <div className="space-y-20px text-lg font-medium">
+            <h5>{t('common:LANDING_FOOTER.QUICK_LINKS')}</h5>
+            <div className="flex flex-col gap-8px">
+              <Link href={ISUNFA_ROUTE.LANDING_PAGE}>‣ {t('common:LANDING_FOOTER.HOME')}</Link>
+              <Link href={ISUNFA_ROUTE.USER_TERMS}>‣ {t('common:LANDING_FOOTER.USER_TERMS')}</Link>
+              <Link href={ISUNFA_ROUTE.PRIVACY_POLICY}>
+                ‣ {t('common:LANDING_FOOTER.PRIVACY_POLICY')}
+              </Link>
+            </div>
+          </div>
+
+          <div className="space-y-20px">
+            <h5 className="text-lg font-medium">{t('common:LANDING_FOOTER.CONTACT_US')}</h5>
+            <ul className="flex flex-col gap-16px font-poppins text-sm">
+              <li className="flex items-center gap-8px">
+                <GrLocation size={20} />
+                <p>{t('common:LANDING_FOOTER.CONTACT_ADDRESS')}</p>
+              </li>
+              <li className="flex items-center gap-8px">
+                <BiPhoneCall size={20} />
+                <p>{CONTACT_PHONE_NUMBER}</p>
+              </li>
+              <li className="flex items-center gap-8px">
+                <LuAlarmClock size={20} />
+                <p>
+                  {t('common:LANDING_FOOTER.SERVICE_HOURS')} : <br />
+                  {t('common:LANDING_FOOTER.MON_TO_FRI_9AM_6PM')}
+                </p>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-20px laptop:justify-start">
+          <Link href={FACEBOOK_LINK} target="_blank">
+            <BiLogoFacebookSquare size={40} />
+          </Link>
+          <Link href={GITHUB_LINK} target="_blank">
+            <IoLogoGithub size={40} />
+          </Link>
+          <Link href={YOUTUBE_LINK} target="_blank">
+            <TiSocialYoutubeCircular size={40} />
+          </Link>
+        </div>
+      </section>
+
+      <section className="text-end font-poppins">{copyright}</section>
+    </footer>
+  );
+}
+
+export default LandingFooter;

src/components/landing_page_body/landing_page_body.tsx → src/components/landing_page/landing_page_body.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import LandingFooter from '@/components/landing_footer/landing_footer';
 import HowWeWork from '@/components/how_we_work/how_we_work';
 import CTASection from '@/components/cta_section/cta_section';
 import NumberAnimationSection from '@/components/number_animation_section/number_animation_section';
@@ -123,11 +122,6 @@ function LandingPageBody() {
 
       {/* Info: (20240318 - Shirley) ----- Contact form section ----- */}
       <ContactFormSection />
-
-      {/* Info: (20230711 - Shirley) Footer */}
-      <div className="">
-        <LandingFooter />
-      </div>
     </div>
   );
 }

src/components/landing_page/policy_body.tsx

@@ -0,0 +1,68 @@
+import { useTranslation } from 'react-i18next';
+import Link from 'next/link';
+import { ISUNFA_ROUTE } from '@/constants/url';
+import { IoHomeOutline } from 'react-icons/io5';
+import { IoIosArrowForward } from 'react-icons/io';
+
+const Breadcrumb = () => {
+  const { t } = useTranslation(['common']);
+
+  return (
+    <div className="flex items-center">
+      <Link
+        href={ISUNFA_ROUTE.LANDING_PAGE}
+        className="flex items-center gap-8px px-12px py-10px hover:text-input-text-highlight"
+      >
+        <IoHomeOutline size={20} />
+        <p>{t('common:LANDING_FOOTER.HOME')}</p>
+        <IoIosArrowForward size={20} />
+      </Link>
+
+      <h5 className="text-input-text-highlight">{t('common:LANDING_FOOTER.PRIVACY_POLICY')}</h5>
+    </div>
+  );
+};
+
+const PrivacyPolicyPageBody = () => {
+  const { t } = useTranslation(['common', 'terms']);
+
+  return (
+    <div>
+      <Breadcrumb />
+
+      <main className="mb-240px mt-120px flex flex-col gap-20px px-160px text-lg font-semibold">
+        <h1 className="mb-20px text-44px font-bold text-text-brand-primary-lv3">
+          {t('common:LANDING_FOOTER.PRIVACY_POLICY')}
+        </h1>
+
+        <p>{t('terms:PRIVACY_POLICY.TEXT_01')}</p>
+        <p>
+          {t('terms:PRIVACY_POLICY.TEXT_02')}
+          <ul className="list-inside list-disc indent-6">
+            <li>{t('terms:PRIVACY_POLICY.TEXT_02_01')}</li>
+            <li>{t('terms:PRIVACY_POLICY.TEXT_02_02')}</li>
+            <li>{t('terms:PRIVACY_POLICY.TEXT_02_03')}</li>
+          </ul>
+        </p>
+        <p>{t('terms:PRIVACY_POLICY.TEXT_03')}</p>
+        <p>{t('terms:PRIVACY_POLICY.TEXT_04')}</p>
+        <p>
+          {t('terms:PRIVACY_POLICY.TEXT_05')}
+          <ul className="list-inside list-disc indent-6">
+            <li>{t('terms:PRIVACY_POLICY.TEXT_05_01')}</li>
+            <li>{t('terms:PRIVACY_POLICY.TEXT_05_02')}</li>
+          </ul>
+        </p>
+        <p>{t('terms:PRIVACY_POLICY.TEXT_06')}</p>
+        <p>{t('terms:PRIVACY_POLICY.TEXT_07')}</p>
+        <p>{t('terms:PRIVACY_POLICY.TEXT_08')}</p>
+        <p>{t('terms:PRIVACY_POLICY.TEXT_09')}</p>
+        <p>{t('terms:PRIVACY_POLICY.TEXT_10')}</p>
+        <p>{t('terms:PRIVACY_POLICY.TEXT_11')}</p>
+        <p>{t('terms:PRIVACY_POLICY.TEXT_12')}</p>
+      </main>
+    </div>
+  );
+};
+
+export default PrivacyPolicyPageBody;

src/components/landing_page/terms_body.tsx

@@ -0,0 +1,64 @@
+import { useTranslation } from 'react-i18next';
+import Link from 'next/link';
+import { ISUNFA_ROUTE } from '@/constants/url';
+import { IoHomeOutline } from 'react-icons/io5';
+import { IoIosArrowForward } from 'react-icons/io';
+
+const Breadcrumb = () => {
+  const { t } = useTranslation(['common']);
+
+  return (
+    <div className="flex items-center">
+      <Link
+        href={ISUNFA_ROUTE.LANDING_PAGE}
+        className="flex items-center gap-8px px-12px py-10px hover:text-input-text-highlight"
+      >
+        <IoHomeOutline size={20} />
+        <p>{t('common:LANDING_FOOTER.HOME')}</p>
+        <IoIosArrowForward size={20} />
+      </Link>
+
+      <h5 className="text-input-text-highlight">{t('common:LANDING_FOOTER.USER_TERMS')}</h5>
+    </div>
+  );
+};
+
+const UserTermsPageBody = () => {
+  const { t } = useTranslation(['common', 'terms']);
+
+  return (
+    <div>
+      <Breadcrumb />
+
+      <main className="mb-240px mt-120px flex flex-col gap-20px px-160px text-lg font-semibold">
+        <h1 className="mb-20px text-44px font-bold text-text-brand-primary-lv3">
+          {t('common:LANDING_FOOTER.USER_TERMS')}
+        </h1>
+
+        <p>{t('terms:USER_TERMS.TEXT_01')}</p>
+        <p>{t('terms:USER_TERMS.TEXT_02')}</p>
+        <p>{t('terms:USER_TERMS.TEXT_03')}</p>
+        <p>{t('terms:USER_TERMS.TEXT_04')}</p>
+        <p>{t('terms:USER_TERMS.TEXT_05')}</p>
+        <p>{t('terms:USER_TERMS.TEXT_06')}</p>
+        <p>{t('terms:USER_TERMS.TEXT_07')}</p>
+        <p>{t('terms:USER_TERMS.TEXT_08')}</p>
+        <p>{t('terms:USER_TERMS.TEXT_09')}</p>
+        <p>{t('terms:USER_TERMS.TEXT_10')}</p>
+        <p>{t('terms:USER_TERMS.TEXT_11')}</p>
+        <p>{t('terms:USER_TERMS.TEXT_12')}</p>
+        <p>{t('terms:USER_TERMS.TEXT_13')}</p>
+        <p>{t('terms:USER_TERMS.TEXT_14')}</p>
+        <p>
+          {t('terms:USER_TERMS.TEXT_15')}
+          <ul className="list-inside list-disc indent-6">
+            <li>{t('terms:USER_TERMS.TEXT_15_01')}</li>
+            <li>{t('terms:USER_TERMS.TEXT_15_02')}</li>
+          </ul>
+        </p>
+      </main>
+    </div>
+  );
+};
+
+export default UserTermsPageBody;

src/constants/url.ts

@@ -12,6 +12,8 @@ export const ISUNFA_ROUTE = {
   FEATURES: '/#features',
   REPORTS: '/reports',
   CONTACT_US: '/#contact-us',
+  USER_TERMS: '/terms',
+  PRIVACY_POLICY: '/policy',
   LOGIN: '/users/login',
   DASHBOARD: '/users/dashboard',
   KYC: '/users/kyc',

src/locales/cn/common.json

@@ -115,6 +115,16 @@
     "DOWNLOAD_TITLE": "下载应用程式",
     "DOWNLOAD_SUBTITLE": "让最实用的工具与您随行"
   },
+  "LANDING_FOOTER": {
+    "QUICK_LINKS": "快速连结",
+    "CONTACT_US": "联络我们",
+    "SERVICE_HOURS": "服务时间",
+    "MON_TO_FRI_9AM_6PM": "周一至周五，上午 09:00 - 下午 06:00",
+    "HOME": "首页",
+    "USER_TERMS": "使用者条款",
+    "PRIVACY_POLICY": "隐私权政策",
+    "CONTACT_ADDRESS": "(110416)台湾台北市信义区信义路五段150巷2号13楼之6"
+  },
   "COMING_SOON_PAGE": {
     "TITLE": "Coming Soon",
     "SUBTITLE": "我们的秘密计划即将揭晓！敬请期待！"