From 6f02048ebd29b2a5b53aa291e0cdd10df93d032f Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Wed, 9 Mar 2022 09:37:38 +0100 Subject: [PATCH] feat(client/landing): add testimonials section to landing page --- .vscode/settings.json | 7 +- .../components/landing/Testimony.module.scss | 12 +++ client/components/landing/Testimony.tsx | 17 +++ client/components/shared/Logo.tsx | 2 +- client/config/languages.ts | 5 - client/data/testimonials.ts | 38 +++++++ client/pages/index.tsx | 36 ++++++- client/public/images/logos/logo.png | Bin 0 -> 8516 bytes client/public/images/{ => logos}/logo.svg | 0 .../public/images/sponsors/digitalocean.svg | 101 ++++++++++++++++++ client/public/locales/en/landing.json | 7 +- client/tsconfig.json | 1 + schema/src/metadata.ts | 4 +- server/src/resume/data/sampleData.ts | 1 - 14 files changed, 216 insertions(+), 15 deletions(-) create mode 100644 client/components/landing/Testimony.module.scss create mode 100644 client/components/landing/Testimony.tsx create mode 100644 client/data/testimonials.ts create mode 100644 client/public/images/logos/logo.png rename client/public/images/{ => logos}/logo.svg (100%) create mode 100644 client/public/images/sponsors/digitalocean.svg diff --git a/.vscode/settings.json b/.vscode/settings.json index 9be88e01..27015764 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,9 +8,8 @@ "editor.formatOnSave": true, "editor.wordWrap": "on", "eslint.workingDirectories": ["schema", "client", "server"], - "i18n-ally.keystyle": "nested", + "i18n-ally.enabledFrameworks": ["i18next"], "i18n-ally.localesPaths": ["client/public/locales"], - "i18n-ally.namespace": true, - "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}", - "i18n-ally.sortKeys": true + "i18n-ally.sourceLanguage": "en", + "i18n-ally.keystyle": "nested" } diff --git a/client/components/landing/Testimony.module.scss b/client/components/landing/Testimony.module.scss new file mode 100644 index 00000000..43b186fe --- /dev/null +++ b/client/components/landing/Testimony.module.scss @@ -0,0 +1,12 @@ +.testimony { + @apply grid gap-2; + @apply border-2 rounded p-4 dark:border-neutral-800; + + blockquote { + @apply text-xs leading-normal text-justify opacity-90; + } + + figcaption { + @apply text-xs opacity-60; + } +} diff --git a/client/components/landing/Testimony.tsx b/client/components/landing/Testimony.tsx new file mode 100644 index 00000000..46ca2b36 --- /dev/null +++ b/client/components/landing/Testimony.tsx @@ -0,0 +1,17 @@ +import { Testimony } from '@/data/testimonials'; + +import styles from './Testimony.module.scss'; + +type Props = Testimony; + +const Testimony: React.FC = ({ name, message }) => { + return ( +
+
{message}
+ +
— {name}
+
+ ); +}; + +export default Testimony; diff --git a/client/components/shared/Logo.tsx b/client/components/shared/Logo.tsx index 779b9b17..d1523662 100644 --- a/client/components/shared/Logo.tsx +++ b/client/components/shared/Logo.tsx @@ -5,7 +5,7 @@ type Props = { }; const Logo: React.FC = ({ size = 64 }) => { - return Reactive Resume; + return Reactive Resume; }; export default Logo; diff --git a/client/config/languages.ts b/client/config/languages.ts index 8bc92ec0..258651ba 100644 --- a/client/config/languages.ts +++ b/client/config/languages.ts @@ -9,11 +9,6 @@ export const languages: Language[] = [ code: 'en', name: 'English', }, - { - code: 'ta', - name: 'Tamil', - localName: 'தமிழ்', - }, ]; export const languageMap: Record = languages.reduce( diff --git a/client/data/testimonials.ts b/client/data/testimonials.ts new file mode 100644 index 00000000..372e7403 --- /dev/null +++ b/client/data/testimonials.ts @@ -0,0 +1,38 @@ +export type Testimony = { + name: string; + message: string; +}; + +const testimonials: Testimony[] = [ + { + name: 'Yogeshwar B.', + message: `Hi Amruth! First off, many thanks for making RxResume! It was love at first sight for me when I saw it was a FOSS resume-builder with such a polished UI. It's been of great help for me as I've been applying to MS programs in international universities. The generated resume is slick as hell, and I spent a fraction of the time building it that I would have spent, had I chosen the "Microsoft Word/Google Docs" route. And the best thing was I spent absolutely no money on it!`, + }, + { + name: 'Chandani B.', + message: `Hi Amruth, Thank you for creating reactive resume and keeping it open source. I am about to use it in updating my profile and therefore wanted to express my gratitude. +As a new enthusiast with no previous background in coding, I thought it would be amazing to connect with you to learn more. Thanks`, + }, + { + name: 'Aadith R.', + message: `Hey, I just found out about Reactive Resume through a co-worker and it's damn good. Minimalist, Contains all the necessary things and is also editable.`, + }, + { + name: 'Krzysztof W.', + message: `I have just used Your CV builder to make something that jus might get me a job. Very nice website and so easy to use, perfect outcome. if i get the job i'll "buy you coffee" for sure i will recommend it to friends`, + }, + { + name: 'Bharat M.', + message: `Hi Amruth, I Just came across your open-source app, Reactive Resume while trying to search for some good resume builders online. I can't express how useful it is! I wish I found it earlier than yesterday! :D I appreciate your work. From now on, I'm gonna recommend the app to whoever I feel could make good use of it! Thank you very much for your work! I will remember this and would like to buy you coffee as soon as I can. What's better than donating for such a good cause! Thanks again. Have a great day!`, + }, + { + name: 'Shlok C.', + message: `Hey Amruth, I recently stumbled upon reactive resume and have started playing around with it. Kudos to you for building such an awesome open-source resume building tool..... Best wishes!`, + }, + { + name: 'Joao R.', + message: `Hi Amruth, Let me congratulate you on the awesome RxResume. After long and extensive searches on the internet for a good and clean CV generator, RxResume is truly a gem. I've been using it to create all my CVs.`, + }, +]; + +export default testimonials; diff --git a/client/pages/index.tsx b/client/pages/index.tsx index 11e5d789..04f3c23f 100644 --- a/client/pages/index.tsx +++ b/client/pages/index.tsx @@ -1,4 +1,5 @@ import { Link as LinkIcon } from '@mui/icons-material'; +import { Masonry } from '@mui/lab'; import { Button } from '@mui/material'; import type { GetStaticProps, NextPage } from 'next'; import Image from 'next/image'; @@ -6,10 +7,12 @@ import Link from 'next/link'; import { Trans, useTranslation } from 'next-i18next'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import Testimony from '@/components/landing/Testimony'; import Footer from '@/components/shared/Footer'; import Logo from '@/components/shared/Logo'; import NoSSR from '@/components/shared/NoSSR'; import { screenshots } from '@/config/screenshots'; +import testimonials from '@/data/testimonials'; import { logout } from '@/store/auth/authSlice'; import { useAppDispatch, useAppSelector } from '@/store/hooks'; import { setModalState } from '@/store/modal/modalSlice'; @@ -87,8 +90,8 @@ const Home: NextPage = () => {
  • {t('landing.features.list.free')}
    • -
  • {t('landing.features.list.tracking')}
  • {t('landing.features.list.ads')}
    • +
  • {t('landing.features.list.tracking')}
  • {t('landing.features.list.languages')}
  • {t('landing.features.list.import')}
  • {t('landing.features.list.export')}
    • @@ -115,6 +118,31 @@ const Home: NextPage = () => { +
    +
    {t('landing.testimonials.heading')}
    + +

    + + Good or bad, I would love to hear your opinion on Reactive Resume and how the experience has been for you. +
    + Here are some of the messages sent in by users across the world. +     +

    + +

    + + You can reach out to me through my email or through the contact + form on my website. + +

    + + + {testimonials.map(({ name, message }, index) => ( + + ))} + +
    +
    {t('landing.links.heading')}
    @@ -133,6 +161,12 @@ const Home: NextPage = () => {
    +
    + + Powered By DigitalOcean + +
    +