Merge pull request #328 from Vandivier/275-testimonial-widget-pt-2

fix: advanced checklist CTA style
Vandivier · Sep 29, 2024 · 4c20647 · 4c20647
2 parents c10fc6c + 388608d
commit 4c20647
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/blitz-app/src/app/home/HomePageContent.tsx b/blitz-app/src/app/home/HomePageContent.tsx
@@ -117,10 +117,9 @@ const AdvancedChecklistContentBlock = () => {
 
   return isPaid ? (
     <div
-      className={`${styles['next-steps-card']} rounded-lg bg-white p-2 shadow-lg`}
-      style={{ marginTop: '0.5rem' }}
+      className={`m-2 w-[300px] rounded-lg bg-white p-2 shadow-lg lg:w-auto`}
     >
-      <h3 className="text-m font-bold text-gray-800">
+      <p className="text-gray-800">
         As a paid member, you can access the{' '}
         <Link
           className="text-m font-bold text-ladderly-pink hover:underline"
@@ -129,7 +128,7 @@ const AdvancedChecklistContentBlock = () => {
           Advanced Checklist
         </Link>
         !
-      </h3>
+      </p>
     </div>
   ) : null
 }
@@ -164,7 +163,7 @@ const HomePage = () => (
           <LadderlyHelpsContentBlock />
         </div>
 
-        <div>
+        <div className="flex flex-col items-center">
           <div className="flex flex-col justify-center sm:mt-4 sm:flex-row">
             <section id="testimonials">
               <h2 className="text-l mt-3 px-6 font-bold text-gray-800 sm:text-xl">

diff --git a/blitz-app/src/app/styles/Home.module.css b/blitz-app/src/app/styles/Home.module.css
@@ -9,6 +9,10 @@
   width: 400px;
 }
 
+.mx-auto.next-steps-card {
+  margin: 0.5rem auto;
+}
+
 .wrapper {
   display: flex;
   flex-direction: column;

diff --git a/blitz-app/src/core/components/pricing-grid/PricingGrid.tsx b/blitz-app/src/core/components/pricing-grid/PricingGrid.tsx
@@ -105,8 +105,8 @@ const PricingGrid: React.FC = () => {
   const isLoggedIn = Boolean(currentUser)
 
   return (
-    <div className="mx-auto mt-10 max-w-7xl rounded-lg bg-frost p-6">
-      <h1 className="mb-10 text-center text-4xl font-bold">Pricing Plans</h1>
+    <div className="mx-auto mt-4 max-w-7xl rounded-lg bg-frost p-6">
+      <h1 className="mb-4 text-center text-2xl font-bold">Pricing Plans</h1>
 
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
         {plans.map((plan, i) => (