diff --git a/blitz-app/src/app/home/HomePageContent.tsx b/blitz-app/src/app/home/HomePageContent.tsx index cd39ab6..25ac7a4 100644 --- a/blitz-app/src/app/home/HomePageContent.tsx +++ b/blitz-app/src/app/home/HomePageContent.tsx @@ -7,17 +7,69 @@ import Image from 'next/image' import Link from 'next/link' import { Suspense } from 'react' +import useSubscriptionLevel from 'src/app/users/hooks/useSubscriptionLevel' import { LadderlyPageWrapper } from 'src/core/components/page-wrapper/LadderlyPageWrapper' import PricingGrid from 'src/core/components/pricing-grid/PricingGrid' -import useSubscriptionLevel from 'src/app/users/hooks/useSubscriptionLevel' +import React from 'react' import styles from 'src/app/styles/Home.module.css' +type Testimonial = { + testimonialGiverName: string + testimonialLinkedInUrl: string + testimonialText: string +} + +const defaulTestimonial: Testimonial = { + testimonialGiverName: 'Calvin He', + testimonialLinkedInUrl: 'https://www.linkedin.com/in/calvin-h-he/', + testimonialText: `Ladderly.io's advice and Leetcode Kata helped me fill in the gaps from my web development boot camp. Without John's generous resume review and career advice, I wouldn't have landed my remote job this year!`, +} + +const testimonials: Testimonial[] = [ + defaulTestimonial, + { + testimonialGiverName: 'Chris Flannery', + testimonialLinkedInUrl: 'https://www.linkedin.com/in/chriswillsflannery/', + testimonialText: `The Ladderly Leetcode Kata is awesome. After using it for about two months, I'm notably more efficient and confident in coding interviews.`, + }, + { + testimonialGiverName: 'Pratik Thorat', + testimonialLinkedInUrl: 'https://www.linkedin.com/in/pratikwebworks/', + testimonialText: `I just got off of an interview that I obtained thanks to Ladderly's Networking Scripts. My resume was passed down to the hiring manager. I owe everything to John and Ladderly.io's open-source curriculum!`, + }, +] + +const TestimonialBlock = () => { + const randomTestimonial = + testimonials[Math.floor(Math.random() * testimonials.length)] ?? + defaulTestimonial + + return ( +
+

+ {`"${randomTestimonial.testimonialText}"`} +

+

{randomTestimonial.testimonialGiverName}

+ {randomTestimonial.testimonialLinkedInUrl ? ( + + Connect on LinkedIn + + ) : null} +
+ ) +} + const LadderlyHelpsContentBlock = () => { return (

Ladderly Helps You:

-
    +
    1. 1 @@ -40,7 +92,7 @@ const LadderlyHelpsContentBlock = () => { grow social and professional networks
    2. -
    3. +
    4. { return isPaid ? (

      @@ -87,7 +139,7 @@ const HomePage = () => (
      Ladderly Logo (
      -
      -

      - Recommended Next Steps: -

      -

      - Complete the{' '} - +
      +

      + Why Users Love Us: +

      +
      - Standard Checklist - - ,{' '} - - consider one of the paid plans below - - , and{' '} - +
      +
      + +

      -
      +

      + Recommended Next Steps: +

      +

      + Complete the{' '} + + Standard Checklist + + ,{' '} + + consider one of the paid plans below + + , and{' '} + + Book an Expert Session + + ! +

      +
      -
      -

      - To support Ladderly{"'"}s mission to provide low-cost education in - STEM, consider{' '} - - leaving a tip - - . -

      +

      + To support Ladderly{"'"}s mission to provide low-cost + education in STEM, consider{' '} + + leaving a tip + + . +

      +
      +
      diff --git a/blitz-app/src/app/home/HomePageSkeleton.tsx b/blitz-app/src/app/home/HomePageSkeleton.tsx index 031f4d5..c6a5bf5 100644 --- a/blitz-app/src/app/home/HomePageSkeleton.tsx +++ b/blitz-app/src/app/home/HomePageSkeleton.tsx @@ -21,13 +21,13 @@ const HomePageSkeleton = () => (

      diff --git a/blitz-app/src/app/styles/Home.module.css b/blitz-app/src/app/styles/Home.module.css index 2593677..77a0744 100644 --- a/blitz-app/src/app/styles/Home.module.css +++ b/blitz-app/src/app/styles/Home.module.css @@ -4,9 +4,9 @@ min-height: 100vh; } -.nextStepsCard { - margin: 0 auto; - width: 600px; +.next-steps-card { + margin: 0.5rem; + width: 400px; } .wrapper { @@ -154,7 +154,7 @@ flex-direction: column; } - .nextStepsCard { + .next-steps-card { width: 300px; } }