Skip to content

fix: make container widths responsive for consistent large-screen alignment #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Smartlify07 merged 3 commits into from
Jul 4, 2026
Merged

fix: make container widths responsive for consistent large-screen alignment #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a1313c0
fix: make container widths responsive with lg:max-w-7xl and 2xl:max-w…
Smartlify07 Jul 4, 2026
0c40108
fix: testimonial 3-card layout, footer mobile centering, add OTP plugin
Smartlify07 Jul 4, 2026
8312a15
fix: remove checkVerificationOtp from signup flow (user doesn't exist…
Smartlify07 Jul 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/figma-home/support.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion src/features/auth/components/login-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,9 @@ export function LoginForm({
type: "sign-in",
})
if (verifyError) {
setError("Invalid or expired code. Please try again.")
setError(
verifyError.message ?? "Invalid or expired code. Please try again."
)
return
}
const { data, error: signInError } = await authClient.signIn.emailOtp({
Expand Down
10 changes: 1 addition & 9 deletions src/features/auth/components/signup-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,15 +69,7 @@ export function SignupForm({
const handleSubmitCode = async (code: string) => {
if (!signupStep) return
setError(null)
const { error: verifyError } = await authClient.emailOtp.checkVerificationOtp({
email: signupStep.email,
otp: code,
type: "sign-in",
})
if (verifyError) {
setError("Invalid or expired code. Please try again.")
return
}

const { data, error: signInError } = await authClient.signIn.emailOtp({
email: signupStep.email,
otp: code,
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/about-ai-healthcare-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const ecosystemItems = [
export function AboutAiHealthcareSection() {
return (
<section className="bg-white py-12.5 text-ma-text sm:py-20">
<div className="mx-auto grid max-w-360 items-start gap-10 px-4 lg:grid-cols-[422px_1fr] lg:gap-12.5 lg:px-25 2xl:px-50">
<div className="mx-auto grid items-start gap-10 px-4 lg:max-w-7xl lg:grid-cols-[422px_1fr] lg:gap-12.5 lg:px-25 2xl:max-w-360 2xl:px-50">
<div className="relative hidden min-h-[360px] overflow-hidden rounded-[24px] bg-ma-bg sm:min-h-[500px] lg:block">
<Image
src="/figma-about/healthcare-ai.png"
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/about-hero-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const supporters = [
export function AboutHeroSection() {
return (
<section className="bg-white py-12.5 text-ma-text lg:py-25">
<div className="mx-auto max-w-360 px-4 lg:px-25 2xl:px-50">
<div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
<div className="mx-auto max-w-200 text-center">
<p className="text-base leading-normal font-medium tracking-[10%] text-[#6b7280] uppercase">
About us
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/about-our-values-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Gift } from "lucide-react"
const AboutOurValuesSection = () => {
return (
<section id="about" className="bg-white py-12.5 lg:py-25">
<div className="mx-auto max-w-360 px-4 xl:px-25 2xl:px-50">
<div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
<p className="mb-5 text-center text-sm leading-normal font-medium tracking-[10%] text-[#6b7280] uppercase sm:text-base">
OUR VALUES{" "}
</p>
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/contact-hero-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const socialLinks = [
export function ContactHeroSection() {
return (
<section id="contact" className="bg-white py-12.5 text-ma-text lg:py-25">
<div className="mx-auto grid max-w-360 items-start gap-14 px-4 lg:grid-cols-[444px_1fr] lg:gap-[88px] lg:px-25 2xl:px-50">
<div className="mx-auto grid items-start gap-14 px-4 lg:max-w-7xl lg:grid-cols-[444px_1fr] lg:gap-[88px] lg:px-25 2xl:max-w-360 2xl:px-50">
<div className="flex flex-col gap-10">
<div className="flex flex-col gap-5 lg:gap-[30px]">
<p className="text-base leading-normal font-medium tracking-[0.1em] text-[#6b7280] uppercase">
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/course-detail-content-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@ export function CourseDetailContentSection({
}) {
return (
<section className="bg-white py-10 text-ma-text lg:py-20">
<div className="mx-auto flex max-w-360 flex-col-reverse gap-12 px-4 lg:grid lg:grid-cols-[598px_335px] lg:items-start lg:justify-between lg:px-25 2xl:px-50">
<div className="mx-auto flex flex-col-reverse gap-12 px-4 lg:grid lg:max-w-7xl lg:grid-cols-[0.6fr_0.4fr] lg:items-start lg:justify-between lg:px-25 xl:grid-cols-[598px_335px] 2xl:max-w-360 2xl:px-50">
<div className="flex w-full max-w-[598px] flex-col gap-[30px]">
<section className="flex flex-col gap-4">
<h2 className="text-xl/[100%] leading-normal font-extrabold text-ma-text sm:text-2xl">
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/course-detail-hero-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function CourseDetailHeroSection({ course }: { course: CourseHeroData })

return (
<section className="bg-[#f5f5f5] py-10 text-ma-text sm:py-[90px] lg:py-16">
<div className="mx-auto grid max-w-360 gap-5 rounded-[24px] px-4 lg:grid-cols-2 lg:px-25 2xl:px-50">
<div className="mx-auto grid gap-5 rounded-[24px] px-4 lg:max-w-7xl lg:grid-cols-2 lg:px-25 2xl:max-w-360 2xl:px-50">
<div className="relative min-h-[360px] overflow-hidden rounded-[24px] sm:min-h-[428px]">
{course.thumbnailUrl ? (
<Image
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/courses-hero-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export function CoursesHeroSection() {

return (
<section className="bg-white py-20 pb-20 text-ma-text sm:pt-25 sm:pb-25 lg:pt-18">
<div className="mx-auto max-w-360 px-4 lg:px-25 2xl:px-50">
<div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
<div className="mx-auto max-w-200 text-center">
<p className="text-base leading-normal font-medium tracking-[0.1em] text-[#6b7280] uppercase">
Courses
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/cta-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Link from "next/link"
export function CtaSection() {
return (
<section>
<div className="mx-auto max-w-360 px-4 xl:px-25 2xl:px-50">
<div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
<section className="relative mx-auto my-5 flex min-h-[450px] w-full flex-col items-center justify-center overflow-hidden rounded-[24px] bg-ma-text px-6 text-center lg:my-20">
<div className="mx-auto max-w-[650px]">
<h2 className="mx-auto max-w-[600px] font-sans text-[28px]/[40px] font-extrabold tracking-[0%] text-white md:tracking-[-5%] lg:text-[40px]/[60px]">
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/donation-cta-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Link from "next/link"

export function DonationCtaSection() {
return (
<section className="mx-auto max-w-360 px-4 xl:px-25 2xl:px-50">
<section className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
<div className="relative mx-auto my-5 flex min-h-[450px] w-full flex-col items-center justify-center overflow-hidden rounded-[24px] bg-ma-text px-6 text-center lg:my-20">
<div className="mx-auto">
<h2 className="mx-auto font-sans text-[28px]/[40px] font-extrabold tracking-[0%] text-white md:tracking-[-5%] lg:text-[40px]/[60px]">
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/donation-hero-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Image from "next/image"
export function DonationHeroSection() {
return (
<section id="donation" className="bg-white py-12.5 text-ma-text lg:py-25">
<div className="mx-auto max-w-360 px-4 lg:px-25 2xl:px-50">
<div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
<div className="mx-auto max-w-[800px] text-center">
<p className="text-base leading-normal font-medium tracking-[10%] text-[#6B7280] uppercase">
Donation
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/donation-support-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export function DonationSupportSection() {

return (
<section className="bg-white py-12.5 text-ma-text lg:py-25">
<div className="mx-auto grid max-w-360 items-start gap-12 px-4 lg:grid-cols-2 lg:gap-6 lg:px-25 2xl:px-50">
<div className="mx-auto grid items-start gap-12 px-4 lg:max-w-7xl lg:grid-cols-2 lg:gap-6 lg:px-25 2xl:max-w-360 2xl:px-50">
<div className="pt-0 lg:pt-2">
<h2 className="font-sans text-[28px]/[100%] leading-[1.12] font-extrabold text-balance text-primary lg:text-[60px]/[70px] lg:tracking-[-5%]">
Support us and make a difference for the future!
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/faq.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export function Faq() {

return (
<section id="faq" className="bg-white py-12.5 lg:py-25">
<div className="mx-auto max-w-360 px-4 lg:px-25 2xl:px-50">
<div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
<div className="grid gap-12 lg:grid-cols-[425px_1fr] lg:gap-[77px]">
<div>
<h2 className="max-w-[425px] font-sans text-[28px]/[100%] font-extrabold text-primary lg:text-[40px]/[60px] lg:tracking-[-5%]">
Expand Down
12 changes: 6 additions & 6 deletions src/features/marketing/components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ const quickLinks = [
export function Footer() {
return (
<footer className="overflow-hidden bg-white text-ma-text">
<div className="relative mx-auto min-h-125 max-w-360 px-4 pt-12.5 lg:px-25 lg:pt-17.5 2xl:px-50">
<div className="grid gap-10 md:grid-cols-[254px_180px_1fr] md:gap-[100px] lg:gap-[120px]">
<section>
<div className="relative mx-auto min-h-125 px-4 pt-12.5 lg:max-w-7xl lg:px-25 lg:pt-17.5 2xl:max-w-360 2xl:px-50">
<div className="grid gap-10 md:grid-cols-[0.9fr_0.6fr_1.5fr] lg:gap-10 xl:grid-cols-[254px_180px_1fr] xl:gap-[125px]">
<section className="">
<h2 className="font-sans text-lg font-extrabold lg:text-2xl">
Get in Touch
</h2>
Expand Down Expand Up @@ -63,12 +63,12 @@ export function Footer() {
<h2 className="font-sans text-lg font-extrabold lg:text-2xl">
Join our News letter
</h2>
<p className="mt-5 max-w-[387px] text-sm leading-normal">
<p className="mt-5 text-sm leading-normal xl:max-w-[387px]">
Stay connected and informed: Join our newsletter for the latest
updates, inspiration, and design insights.
</p>

<form className="mt-6 flex w-full max-w-[374px] items-center justify-between rounded-[60px] bg-[#f5f5f5] py-2.5 pr-2.5 pl-5">
<form className="mt-6 flex w-full items-center justify-between rounded-[60px] bg-[#f5f5f5] py-2.5 pr-2.5 pl-5 lg:max-w-[374px]">
Comment on lines +66 to +71

@coderabbitai coderabbitai Bot Jul 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Show the relevant file with line numbers, limited to the component area.
sed -n '1,220p' src/features/marketing/components/footer.tsx

# Find likely parent/layout usage for this footer component.
rg -n "footer" src/features/marketing -g '!**/node_modules/**'

Repository: Smartlify07/Modern-Advocates

Length of output: 5155

Align the newsletter copy and form widths. The paragraph stays unconstrained until xl, while the form is capped at lg, so the section can look uneven between 1024–1279px. Cap the paragraph at lg as well.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/features/marketing/components/footer.tsx` around lines 66 - 71, The
newsletter text and signup form are using different width constraints, which
makes the footer section look uneven between lg and xl breakpoints. Update the
paragraph in the footer component to use the same lg max-width as the form,
keeping the layout consistent; adjust the text block near the newsletter copy in
the footer component so it matches the form’s width behavior.

<label htmlFor="footer-email" className="sr-only">
Email address
</label>
Expand Down Expand Up @@ -99,7 +99,7 @@ export function Footer() {
</section>
</div>

<p className="pointer-events-none mt-10 bg-gradient-to-b from-ma-text from-[40%] to-ma-text/0 to-[74%] bg-clip-text font-heading text-[40px] leading-none font-extrabold whitespace-nowrap text-transparent select-none lg:absolute lg:top-[370px] lg:left-1/2 lg:-translate-x-1/2 lg:text-[124px]">
<p className="pointer-events-none mt-10 text-center bg-gradient-to-b from-ma-text from-[40%] to-ma-text/0 to-[74%] bg-clip-text font-heading text-[40px] leading-none font-extrabold whitespace-nowrap text-transparent select-none lg:absolute lg:left-1/2 lg:-translate-x-[calc(1280px/2-100px)] lg:text-[100px] xl:text-[124px] 2xl:-translate-x-[calc(1280px/2-116px)]">
ModernAdvocates
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/hero-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const supporters = [
export function HeroSection() {
return (
<section className="relative isolate bg-white text-ma-text">
<div className="relative z-10 mx-auto flex max-w-360 flex-col items-center px-4 py-12.5 text-center lg:min-h-[924px] lg:py-[118px] xl:px-25 2xl:px-50">
<div className="relative z-10 mx-auto flex flex-col items-center px-4 py-12.5 text-center lg:min-h-[924px] lg:max-w-7xl lg:py-[118px] lg:px-25 2xl:max-w-360 2xl:px-50">
<div className="flex items-center justify-center gap-4">
<div className="flex -space-x-2">
{supporters.map((src, index) => (
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/how-can-we-support.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import React from "react"
const SupportSection = () => {
return (
<section id="about" className="bg-white py-12.5 sm:py-25">
<div className="mx-auto max-w-360 px-4 xl:px-25 2xl:px-50">
<div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
<div className="mx-auto text-center">
<h2 className="mx-auto max-w-160 text-center font-sans text-[26px]/[100%] font-extrabold tracking-[0%] text-ma-text sm:text-[40px]/[60px]">
How can we support your healthcare journey?{" "}
Expand Down
16 changes: 8 additions & 8 deletions src/features/marketing/components/mission-sections.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function MissionBridgeSection() {

return (
<section id="about" className="bg-white">
<div className="mx-auto max-w-360 px-4 py-12.5 sm:py-25 xl:px-25 2xl:px-50">
<div className="mx-auto px-4 py-12.5 sm:py-25 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
<div className="mx-auto max-w-xl text-center">
<h2 className="font-sans text-[28px]/[100%] font-extrabold tracking-[0%] text-ma-text sm:text-[40px]/[60px] sm:tracking-[-0.01em]">
Bridging the Gap between Technology and Care
Expand Down Expand Up @@ -132,7 +132,7 @@ export function MissionBridgeSection() {
</div>

<div
className={`shrink-0 overflow-hidden rounded-2xl transition-all duration-500 max-lg:w-full max-lg:max-w-[292px] ${
className={`shrink-0 overflow-hidden rounded-2xl transition-all duration-500 max-lg:w-full ${
hovered === "second" ? "w-0 min-w-0" : "lg:w-[292px]"
}`}
>
Expand All @@ -152,13 +152,13 @@ export function MissionBridgeSection() {
onMouseLeave={onLeave}
className="flex max-w-full shrink-0 flex-col gap-5 rounded-2xl bg-white p-5 sm:flex-row lg:max-w-none"
>
<div className="flex min-w-0 flex-col justify-between gap-2.5 md:min-h-79.5">
<div className="flex min-w-0 flex-col justify-between gap-2.5 sm:gap-0 md:min-h-79.5">
<div className="flex size-12.5 items-center justify-center rounded-full border">
<Gift />
</div>

<div className="flex flex-col items-start gap-4">
<h3 className="text-xl font-semibold text-ma-text">
<h3 className="text-xl font-semibold text-balance text-ma-text">
Support mission
</h3>
<p className="text-sm text-balance text-ma-text/80">
Expand All @@ -170,14 +170,14 @@ export function MissionBridgeSection() {
</div>

<div
className={`shrink-0 overflow-hidden rounded-2xl transition-all duration-500 max-lg:w-full max-lg:max-w-[292px] ${
className={`shrink-0 overflow-hidden rounded-2xl object-cover transition-all duration-500 max-lg:w-full ${
hovered === "second" ? "lg:w-[292px]" : "w-0 min-w-0"
}`}
>
<Image
src="/figma-home/get-assistance.png"
src="/figma-home/support.png"
alt=""
className="size-full object-cover"
className="size-full lg:h-[318px]"
loading="lazy"
width={292}
height={318}
Expand All @@ -193,7 +193,7 @@ export function MissionBridgeSection() {
export function FounderStorySection() {
return (
<section className="bg-white">
<div className="mx-auto max-w-360 px-4 py-12.5 lg:py-25 xl:px-25 2xl:px-50">
<div className="mx-auto px-4 py-12.5 lg:max-w-7xl lg:px-25 lg:py-25 2xl:max-w-360 2xl:px-50">
{/* Large screens */}
<div className="hidden gap-10 lg:grid lg:grid-cols-[0.8fr_1.2fr] lg:items-center">
<Image
Expand Down
2 changes: 1 addition & 1 deletion src/features/marketing/components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Navbar = () => {

return (
<header className="bg-white">
<div className="relative z-20 mx-auto max-w-360 px-4 py-5 xl:px-25 2xl:px-50">
<div className="relative z-20 mx-auto px-4 py-5 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
<div className="flex w-full items-center justify-between">
<Link href="/" className="flex w-[157px] flex-col gap-1">
<Image
Expand Down
87 changes: 40 additions & 47 deletions src/features/marketing/components/testimonials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,6 @@ export function Testimonials() {
const el = scrollRef.current
if (!el) return

if (!isMobile) {
el.scrollTo({
left: direction === "next" ? el.scrollWidth - el.clientWidth : 0,
behavior: "smooth",
})
return
}

const cards = el.querySelectorAll<HTMLElement>("article")
const firstCard = cards[0]
const secondCard = cards[1]
Expand All @@ -59,13 +51,16 @@ export function Testimonials() {
: firstCard?.offsetWidth || el.clientWidth
const currentIndex = Math.round(el.scrollLeft / cardStep)
const nextIndex = direction === "next" ? currentIndex + 1 : currentIndex - 1
const clampedIndex = Math.max(0, Math.min(nextIndex, cards.length - 1))
const clampedIndex = Math.max(
0,
Math.min(nextIndex, cards.length - (isMobile ? 1 : 3))
)
el.scrollTo({ left: clampedIndex * cardStep, behavior: "smooth" })
}

return (
<section className="overflow-hidden bg-white py-12.5 lg:py-25">
<div className="mx-auto max-w-360 px-4 xl:px-25 2xl:px-50">
<section className="bg-white py-12.5 lg:py-25">
<div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
<div className="flex w-full flex-col gap-8 sm:flex-row sm:items-end sm:justify-between">
<div>
<h2 className="font-sans text-[28px]/[100%] font-extrabold text-primary lg:text-[40px] lg:leading-15">
Expand Down Expand Up @@ -98,43 +93,41 @@ export function Testimonials() {
</div>
</div>

<div className="overflow-hidden px-4 xl:pl-25 2xl:px-50">
<div
ref={scrollRef}
className="hide-scrollbar relative mt-21.5 flex gap-7.5 overflow-x-auto scroll-smooth pr-[max(0px,calc(100%_-_1050px))] pb-2"
>
{reviews.map((review) => (
<article
key={review.image}
className="relative flex h-[500px] w-[330px] shrink-0 flex-col justify-end overflow-hidden rounded-3xl px-[15px] pb-[30px]"
>
<Image
src={review.image}
alt=""
fill
sizes="330px"
className="object-cover"
/>
<div
className="absolute inset-0 bg-gradient-to-b from-transparent from-[30%] to-black"
aria-hidden="true"
/>
<div
ref={scrollRef}
className="hide-scrollbar relative mx-auto mt-21.5 flex gap-7.5 overflow-x-auto scroll-smooth px-4 pb-2 lg:w-full lg:max-w-[1050px] lg:overflow-hidden lg:px-0"
>
{reviews.map((review) => (
<article
key={review.image}
className="relative flex h-[500px] w-[330px] shrink-0 flex-col justify-end overflow-hidden rounded-3xl px-[15px] pb-[30px] lg:w-[calc((100%-60px)/3)]"
>
<Image
src={review.image}
alt=""
fill
sizes="330px"
className="object-cover"
/>
<div
className="absolute inset-0 bg-gradient-to-b from-transparent from-[30%] to-black"
aria-hidden="true"
/>

<div className="relative z-10 h-[166px] w-[300px] text-white">
<p className="font-heading text-[100px] leading-[60px] font-extrabold">
&ldquo;
</p>
<p className="mt-[-14px] text-[18px] leading-normal font-semibold">
ModernAdvocates helped me see a clear path forward. The
guidance and training resources gave
</p>
<p className="mt-5 text-[18px] leading-normal font-semibold">
-{review.name}
</p>
</div>
</article>
))}
</div>
<div className="relative z-10 h-[166px] w-[300px] text-white">
<p className="font-heading text-[100px] leading-[60px] font-extrabold">
&ldquo;
</p>
<p className="mt-[-14px] text-[18px] leading-normal font-semibold">
ModernAdvocates helped me see a clear path forward. The guidance
and training resources gave
</p>
<p className="mt-5 text-[18px] leading-normal font-semibold">
-{review.name}
</p>
</div>
</article>
))}
</div>
</section>
)
Expand Down
Loading