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 2 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
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 text-center md:grid-cols-[0.9fr_0.6fr_1.5fr] md:text-left 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 left-1/2 mt-10 translate-x-[20%] 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-[calc(1280px/2-100px)] lg:text-[100px] xl:text-[124px] 2xl:-translate-x-[calc(1280px/2-116px)]">
ModernAdvocates
</p>

@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

printf '\n== footer slice ==\n'
sed -n '1,220p' src/features/marketing/components/footer.tsx

printf '\n== search max-w-360 ==\n'
rg -n "max-w-360|1280px/2-116px|1440px/2|calc\\(" src -S

Repository: Smartlify07/Modern-Advocates

Length of output: 12534

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== footer slice ==\n'
sed -n '1,220p' src/features/marketing/components/footer.tsx

printf '\n== search max-w-360 and related config ==\n'
rg -n "max-w-360|1280px/2-116px|1440px/2|maxWidth|container" -S . --glob '!**/node_modules/**'

Repository: Smartlify07/Modern-Advocates

Length of output: 9310

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== tailwind/theme config files ==\n'
fd -a "tailwind*|postcss*|globals.css|theme.*|config.*" .

printf '\n== search for 360 width token ==\n'
rg -n "360|7xl|max-w-360|maxWidth|spacing" -S tailwind.config.* src app . --glob '!**/node_modules/**' --glob '!**/pnpm-lock.yaml'

printf '\n== search for custom maxWidth definitions ==\n'
rg -n "maxWidth:|theme:|extend:" -S . --glob '!**/node_modules/**' --glob '!**/pnpm-lock.yaml'

Repository: Smartlify07/Modern-Advocates

Length of output: 27208

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== globals.css theme section ==\n'
sed -n '1,260p' src/app/globals.css

printf '\n== search for max-w-360 token definition ==\n'
rg -n "`@theme`|--container-360|max-w-360|360rem|1440px|1280px" src/app src -S

printf '\n== search for tailwind config files ==\n'
fd -a 'tailwind.config.*|tailwind.*.*|*.config.*' .

printf '\n== search for custom container widths in css ==\n'
rg -n "container|max-width|--container|--breakpoint" src/app src -S

Repository: Smartlify07/Modern-Advocates

Length of output: 9325

🏁 Script executed:

#!/bin/bash
set -euo pipefail

rg -n "1280px/2-|1440px/2-|calc\\(1280px/2|calc\\(1440px/2" src -S

Repository: Smartlify07/Modern-Advocates

Length of output: 618

🌐 Web query:

Tailwind CSS v4 max-w-360 spacing scale 1440px default 0.25rem

💡 Result:

In Tailwind CSS v4, the spacing system was fundamentally redesigned to move away from a fixed, predefined list of scale values toward a dynamic multiplier-based system [1]. Default Spacing Scale By default, Tailwind CSS v4 defines a single base unit in the CSS @theme block: --spacing: 0.25rem; (which is equivalent to 4px) [1][2][3]. Rather than having a hardcoded list like in v3, v4 utilities are generated dynamically using the formula calc(var(--spacing) * n) [1][2]. This means that virtually any integer or decimal multiple of 0.25 is available as a spacing utility [1]. For example, max-w-360 is valid by default and calculates to 360 * 0.25rem = 90rem (1440px) [1][4]. Key Details: - Dynamic Generation: You can use utilities like max-w-360, p-100, or gap-5.5 because the framework derives these values on the fly from the --spacing variable [1][4]. - Customization: You can change the base unit by overriding the --spacing variable in your @theme block. For example, setting @theme { --spacing: 0.1rem; } would change the multiplier base to 0.1rem, making max-w-360 equal to 36rem [4]. - Compatibility: While v4 is highly dynamic, it maintains support for many standard practices, though explicit legacy spacing configurations are no longer required or used in the same way as v3 [5][1]. In summary, max-w-360 is supported in Tailwind CSS v4 because the framework no longer relies on a restricted list of spacing constants, but instead uses a multiplier system based on the default 0.25rem spacing unit [1][3].

Citations:

Adjust the 2xl heading offset to the 1440px container. In src/features/marketing/components/footer.tsx, 2xl:max-w-360 expands to 1440px, but 2xl:-translate-x-[calc(1280px/2-116px)] still anchors to 1280px. If this text should stay aligned with the widened footer container, switch that calc to the 1440px base or a shared width token.

🤖 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 102 - 104, The
`ModernAdvocates` heading in `footer.tsx` is still using a 1280px-based
`2xl:-translate-x` offset even though the `2xl:max-w-360` container grows to
1440px. Update the `p` element’s `2xl` translate calc to use the 1440px
container width, or replace the hardcoded width with a shared layout token so
the heading stays aligned with the widened footer at `2xl`.

</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
4 changes: 2 additions & 2 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 @@ -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:py-25 lg:px-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
4 changes: 2 additions & 2 deletions src/infrastructure/auth/auth.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { betterAuth } from "better-auth"
import { drizzleAdapter } from "better-auth/adapters/drizzle"
import { admin } from "better-auth/plugins"
import { admin, emailOTP } from "better-auth/plugins"
import { db } from "@/infrastructure/database/client"
import { schema } from "@/infrastructure/database/schema/schema"

Expand All @@ -14,5 +14,5 @@ export const auth = betterAuth({
},
emailAndPassword: { enabled: true },

plugins: [admin()],
plugins: [admin(), emailOTP()],
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
})