Refactor landing page components: Update styles for mobile view in Ab…

…out section
birongliu · Sep 17, 2024 · 6f64a05 · 6f64a05
1 parent 96c839e
commit 6f64a05
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/frontend/src/app/ui/landing/About.tsx b/frontend/src/app/ui/landing/About.tsx
@@ -26,7 +26,7 @@ export default function About() {
   return (
     <section
       id="About"
-     className="flex items-center px-12 md:px-24 py-28 my-48 justify-center dark:bg-transparent  dark:bg-slate-800 bg-lightBeige">
+     className="flex items-center px-12 md:px-24 py-28 my-28 justify-center dark:bg-slate-800 bg-lightBeige">
       <div className="max-w-7xl w-full flex flex-col items-center ">
       <h1 className="text-4xl md:text-5xl font-bold font-poppins dark:text-white  text-primary leading-tight">
       What is Petpals?

diff --git a/frontend/src/app/ui/landing/Explore.tsx b/frontend/src/app/ui/landing/Explore.tsx
@@ -22,7 +22,7 @@ const images = [
 
 export default function Explore() {
   return (
-    <section id="Explore" className="flex items-center px-12 md:px-24 py-20 justify-center">
+    <section id="Explore" className="flex items-center py-20 px-12 md:px-24  justify-center">
       <div className="max-w-7xl w-full grid gap-8 items-center lg:grid-cols-2 grid-cols-1">
         <div className="space-y-6">
           <h1 className="text-4xl dark:text-white  md:text-5xl font-bold font-poppins text-primary leading-tight">

diff --git a/frontend/src/app/ui/landing/Hero.tsx b/frontend/src/app/ui/landing/Hero.tsx
@@ -7,7 +7,7 @@ import Button from "../shared/Button";
 
 export default function Hero() {
   return (
-    <section className="my-24 flex items-center px-10 md:px-24 justify-center">
+    <section className="my-28 flex items-center px-10 md:px-24 justify-center">
       <div className="max-w-7xl w-full grid lg:grid-cols-2 gap-24 items-center">
         <div className="space-y-6 relative">
         <Vector className="z-10" />
@@ -25,8 +25,8 @@ export default function Hero() {
             pets. Let&apos;s build meaningful relationships while giving animals
             the homes they deserve.
           </p>
-          <Button className="flex items-center space-x-2 text-pretty font-semibold text-white">
-            <span> Get Started</span>
+          <Button className="flex items-center space-x-2 text-pretty font-semibold dark:bg-white dark:text-black text-white">
+            Get Started
           </Button>
         </div>
         <div className="lg:block hidden">

diff --git a/frontend/src/app/ui/navigation/Header.tsx b/frontend/src/app/ui/navigation/Header.tsx
@@ -57,7 +57,7 @@ export default function Header() {
       </ul>
       <div className="flex justify-center items-center gap-1 px-5 lg:px-0">
         <SignedOut>
-          <Button className="text-white rounded-xl py-2 px-5">
+          <Button className="text-white rounded-lg font-poppins font-semibold text-darkMaroon dark:bg-white">
             <SignInButton />
           </Button>
         </SignedOut>