Merge pull request #428 from cs3216-a3-group-4/haoyang/better-landing…

…-page Format landing page
jippy-the-frog · Nov 12, 2024 · 8867c4c · 8867c4c
2 parents 42bd974 + a4c7d20
commit 8867c4c
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/frontend/app/(authenticated)/answers/[id]/page.tsx b/frontend/app/(authenticated)/answers/[id]/page.tsx
@@ -30,7 +30,7 @@ const AnswerPage = ({ params }: { params: { id: string } }) => {
         id="answer"
       >
         <div className="flex flex-col pb-4 mb-4 py-8 xl:py-16 max-w-6xl md:mx-8 lg:mx-16 xl:mx-auto">
-          <h1 className="px-8 md:px-0 text-2xl lg:text-3x xl:text-4xl font-semibold text-text mb-10 2xl:mb-12">
+          <h1 className="px-8 md:px-0 text-2xl lg:text-3xl xl:text-4xl font-semibold text-text mb-10 2xl:mb-12">
             {data.question}
           </h1>
           <div className="flex flex-col">

diff --git a/frontend/app/landing.tsx b/frontend/app/landing.tsx
@@ -297,7 +297,7 @@ const Landing = () => {
             </span>
           </div>
 
-          <div className="flex-1 md:basis-7/12 p-12 mt-10 bg-background border rounded-lg shadow-lg">
+          <div className="flex-1 md:basis-7/12 p-12 mt-10 md:mt-0 bg-background border rounded-lg shadow-lg">
             <p className="text-xl md:text-2xl lg:text-3xl text-text">
               Jippy is after all just an AI frog, and can make mistakes, but
               here are some things made sure to train Jippy on to avoid mistakes

diff --git a/frontend/components/landing/feature-list.tsx b/frontend/components/landing/feature-list.tsx
@@ -43,12 +43,12 @@ const FeatureList = ({ features }: FeatureListProps) => {
               )}
             </div>
             {selectedFeature === feature && (
-              <div className="mt-2 max-w-full">
-                <p className="text-sm lg:text-base text-gray-600 text-wrap">
+              <div className="max-w-full">
+                <p className="text-sm lg:text-base text-gray-600 text-wrap py-3">
                   {feature.description}
                 </p>
                 <div
-                  className="mt-4 flex flex-col w-full items-stretch cursor-default py-4 md:hidden"
+                  className="flex flex-col w-full items-stretch cursor-default py-8 md:hidden"
                   id="mobile-demo"
                   onClick={(e) => e.stopPropagation()}
                 >

diff --git a/frontend/components/landing/sample-points.tsx b/frontend/components/landing/sample-points.tsx
@@ -15,9 +15,9 @@ const SamplePoints = ({
 }) => {
   return (
     <>
-      <h1 className="px-8 md:px-0 text-2xl lg:text-3x xl:text-4xl font-semibold text-text mb-5 2xl:mb-6">
+      <h2 className="px-8 md:px-0 text-lg xl:text-xl 2xl:text-2xl font-semibold text-text mb-5 2xl:mb-6">
         {question}
-      </h1>
+      </h2>
       <Accordion className="flex flex-col gap-y-4" type="multiple">
         {points.map((point, index) => (
           <AccordionItem
@@ -27,18 +27,18 @@ const SamplePoints = ({
           >
             <AccordionTrigger
               chevronClassName="h-6 w-6 stroke-[2.5] ml-4"
-              className="text-lg lg:text-xl 2xl:text-2xl text-primary font-medium text-start hover:no-underline pt-4 pb-6"
+              className="text-primary font-medium text-start hover:no-underline pt-4 pb-6"
             >
               <div className="flex flex-col">
                 <div className="flex">
                   <Chip
-                    className="flex mb-4 w-fit max-w-full 2xl:text-xl"
+                    className="flex mb-4 w-fit max-w-full md:text-lg 2xl:text-xl"
                     label={point.positive ? "For" : "Against"}
                     size="lg"
                     variant={point.positive ? "secondary" : "accent"}
                   />
                 </div>
-                <span className="inline-block text-primary-900 hover:text-primary-900/80">
+                <span className="text-base xl:text-lg 2xl:text-xl inline-block text-primary-900 hover:text-primary-900/80">
                   {point.title}
                 </span>
               </div>