fix(mobile): check for responsiveness, add scrollarea support

This commit is contained in:
Amruth Pillai
2023-11-14 11:43:28 +01:00
parent 6303071410
commit 888b4db0bb
40 changed files with 491 additions and 397 deletions

View File

@ -226,32 +226,31 @@ const Question5 = () => (
</AccordionItem>
);
export const FAQSection = () => {
return (
<section id="faq" className="container relative py-24 sm:py-32">
<div className="grid gap-12 lg:grid-cols-3">
<div className="col-span-1 space-y-6">
<h2 className="text-3xl font-bold">Frequently Asked Questions</h2>
export const FAQSection = () => (
<section id="faq" className="container relative py-24 sm:py-32">
<div className="grid gap-12 lg:grid-cols-3">
<div className="space-y-6">
<h2 className="text-4xl font-bold">Frequently Asked Questions</h2>
<p className="text-base leading-loose">
Here are some questions I often get asked about Reactive Resume.
</p>
<p className="text-base leading-loose">
Here are some questions I often get asked about Reactive Resume.
</p>
<p className="text-sm leading-loose">
Unfortunately, this section is available only in English, as I do not want to burden
translators with having to translate these large paragraphs of text.
</p>
</div>
<div className="col-span-2">
<Accordion collapsible type="single">
<Question1 />
<Question2 />
<Question3 />
<Question4 />
<Question5 />
</Accordion>
</div>
<p className="text-sm leading-loose">
Unfortunately, this section is available only in English, as I do not want to burden
translators with having to translate these large paragraphs of text.
</p>
</div>
</section>
);
};
<div className="col-span-2">
<Accordion collapsible type="single">
<Question1 />
<Question2 />
<Question3 />
<Question4 />
<Question5 />
</Accordion>
</div>
</div>
</section>
);

View File

@ -1,4 +1,4 @@
import { t } from "@lingui/macro";
import { t, Trans } from "@lingui/macro";
import { motion } from "framer-motion";
const resumes = [
@ -13,9 +13,17 @@ export const SampleResumesSection = () => (
<div className="container flex flex-col gap-12 lg:min-h-[600px] lg:flex-row lg:items-start">
<div className="space-y-4 lg:mt-16 lg:basis-96">
<h2 className="text-4xl font-bold">{t`Sample Resumes`}</h2>
<p className="text-base leading-relaxed">
{t`Have a look at some of the resume created to showcase the templates available on Reactive Resume. They also serve some great examples to help guide the creation of your own resume.`}
</p>
<Trans>
<p className="leading-relaxed">
Have a look at some of the resume created to showcase the templates available on
Reactive Resume.
</p>
<p className="leading-relaxed">
They could also serve as examples to help guide the creation of your next resume.
</p>
</Trans>
</div>
<div className="w-full overflow-hidden lg:absolute lg:right-0 lg:max-w-[55%]">