feat: donation form API wiring and shared marketing container

src/app/(marketing)/donation/success/page.tsx

@@ -10,6 +10,7 @@ import { Button } from "@/shared/ui/button"
 import { apiFetch } from "@/shared/lib/api-fetch"
 import { queryKeys } from "@/shared/lib/query-keys"
 import type { Donation } from "@/features/admin/donations/types"
+import { computeDonationTotal } from "@/features/marketing/lib/donation-pricing"
 
 function DonationSuccessContent() {
   const searchParams = useSearchParams()
@@ -58,7 +59,7 @@ function DonationSuccessContent() {
         <p className="max-w-md text-lg text-muted-foreground">
           Your donation of{" "}
           <span className="font-semibold text-ma-text">
-            ${Number(donation?.amount ?? 0).toFixed(2)} USD
+            ${computeDonationTotal(Number(donation?.amount ?? 0)).toFixed(2)} USD
           </span>{" "}
           has been received. Your support helps us make a real impact.
         </p>

src/app/(user)/dashboard/page.tsx

@@ -58,7 +58,7 @@ export default function UserDashboardPage() {
   }, [enrollments])
 
   return (
-    <div className="mx-auto px-4 py-8 lg:max-w-7xl lg:px-25 lg:py-19.25 2xl:max-w-360 2xl:px-50">
+    <div className="marketing-container px-0! py-8! sm:py-19.25!">
       <div className="mb-[70px] flex items-center gap-4 lg:mb-26.75">
         <UserAvatar user={user} className="size-[50px] lg:size-12.5" />
         <p className="text-xl font-bold text-ma-text lg:text-2xl">
@@ -73,11 +73,11 @@ export default function UserDashboardPage() {
       </div>
 
       {isLoading ? (
-        <div className="grid justify-items-center gap-5 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
           {Array.from({ length: 6 }).map((_, i) => (
             <div
               key={i}
-              className="flex w-full flex-col gap-5 sm:max-w-[334px]"
+              className="flex w-full flex-col gap-5 sm:max-w-[300px]"
             >
               <Skeleton className="h-[254px] rounded-card-2" />
               <div className="flex flex-col gap-2 px-2.5">
@@ -116,15 +116,19 @@ export default function UserDashboardPage() {
           </ErrorStateAction>
         </ErrorState>
       ) : (
-        <div className="grid justify-items-center gap-5 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
           {courses?.map((course) => {
             const enrolledProgress = enrollmentMap.get(course.id)
             const isEnrolled = enrolledProgress !== undefined
 
             return (
               <CourseCard.Root
                 key={course.id}
-                href={isEnrolled ? `/my-learning/${course.id}` : `/dashboard/course/${course.id}`}
+                href={
+                  isEnrolled
+                    ? `/my-learning/${course.id}`
+                    : `/dashboard/course/${course.id}`
+                }
               >
                 <CourseCard.Thumbnail
                   src={course.thumbnailUrl}

src/app/api/donations/route.ts

@@ -5,6 +5,7 @@ import { eq } from "drizzle-orm"
 import { db } from "@/infrastructure/database/client"
 import { donations } from "@/infrastructure/database/schema/donation"
 import { getStripe } from "@/infrastructure/payment/stripe"
+import { computeDonationTotal } from "@/features/marketing/lib/donation-pricing"
 import * as Sentry from "@sentry/nextjs"
 
 export async function POST(request: Request) {
@@ -65,14 +66,15 @@ export async function POST(request: Request) {
       `${request.headers.get("x-forwarded-proto") ?? "https"}://${request.headers.get("host") ?? "localhost:3000"}`
 
     const stripe = getStripe()
+    const total = computeDonationTotal(amount)
     const session = await stripe.checkout.sessions.create({
       mode: "payment",
       customer_email: donorEmail,
       line_items: [
         {
           price_data: {
             currency: "usd",
-            unit_amount: Math.round(amount * 100),
+            unit_amount: Math.round(total * 100),
             product_data: {
               name: "Donation to Modern Advocates",
             },

src/app/globals.css

@@ -188,6 +188,9 @@
 }
 
 @layer utilities {
+  .marketing-container {
+    @apply mx-auto px-4 py-12.5 sm:py-25 lg:max-w-7xl lg:px-25 2xl:max-w-360;
+  }
   .hide-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;

src/features/courses/components/course-card.tsx

@@ -13,7 +13,7 @@ function Root({ href, children }: RootProps) {
   return (
     <Link
       href={href}
-      className="group flex w-full flex-col gap-5 rounded-card-2 border border-ma-border-light bg-white px-2.5 pt-2.5 pb-7.5 transition-colors duration-300 hover:bg-gray-50 sm:max-w-[334px]"
+      className="group flex w-full flex-col gap-5 rounded-card-2 border border-ma-border-light bg-white px-2.5 pt-2.5 pb-7.5 transition-colors duration-300 hover:bg-gray-50 sm:max-w-[400px]"
     >
       {children}
     </Link>
@@ -73,18 +73,17 @@ function Title({
 
 function Tutor({ name }: { name: string | null }) {
   return (
-    <p className="text-sm leading-normal font-medium text-muted-foreground">{name}</p>
+    <p className="text-sm leading-normal font-medium text-muted-foreground">
+      {name}
+    </p>
   )
 }
 
 function Rating({ avg, count }: { avg: number; count: number }) {
   return (
     <div className="flex flex-wrap items-center gap-2">
       <span className="inline-flex items-center gap-1 rounded-md border border-border p-[5px] text-sm leading-normal font-medium text-muted-foreground">
-        <Star
-          className="size-5 fill-ma-star text-ma-star"
-          aria-hidden="true"
-        />
+        <Star className="size-5 fill-ma-star text-ma-star" aria-hidden="true" />
         {Number(avg).toFixed(1)}
       </span>
       <span className="inline-flex items-center rounded-md border border-border px-[5px] py-1.5 text-sm leading-normal font-medium text-muted-foreground">
@@ -138,7 +137,9 @@ function DisplayPrice({
   className?: string
 }) {
   return (
-    <p className={cn("text-base text-muted-foreground line-through", className)}>
+    <p
+      className={cn("text-base text-muted-foreground line-through", className)}
+    >
       $ {displayPrice?.toFixed(2)} USD
     </p>
   )

src/features/courses/components/enroll-now-button.tsx

@@ -24,7 +24,9 @@ export function EnrollNowButton({
     queryKey: queryKeys.enrollment.check(courseId),
     queryFn: async () => {
       try {
-        return await apiFetch<{ enrolled: boolean }>(`/api/enrollments/check/${courseId}`)
+        return await apiFetch<{ enrolled: boolean }>(
+          `/api/enrollments/check/${courseId}`
+        )
       } catch {
         return { enrolled: false }
       }
@@ -80,7 +82,7 @@ export function EnrollNowButton({
     <Button asChild className="group relative overflow-hidden rounded-pill">
       <Link
         href={href}
-        className="flex h-pill w-full items-center justify-center gap-2.5 rounded-pill bg-ma-text px-5 py-4 text-base font-semibold text-white"
+        className="flex h-pill w-full items-center justify-center gap-2.5 rounded-pill bg-ma-admin-primary px-5 py-4 text-base font-semibold text-white"
       >
         <span className="relative z-10 inline-flex items-center gap-2.5">
           {label}

src/features/marketing/components/about-hero-section.tsx

@@ -10,8 +10,8 @@ const supporters = [
 
 export function AboutHeroSection() {
   return (
-    <section className="bg-white py-12.5 text-ma-text lg:py-25">
-      <div className="mx-auto px-4 lg:max-w-7xl lg:px-25 2xl:max-w-360">
+    <section className="bg-white text-ma-text">
+      <div className="marketing-container">
         <header className="mx-auto mb-15 max-w-230 text-center">
           <h4 className="mb-7.5 text-base text-muted-foreground uppercase">
             Our story

src/features/marketing/components/about-our-values-section.tsx

@@ -4,8 +4,8 @@ import { Gift } from "lucide-react"
 
 const AboutOurValuesSection = () => {
   return (
-    <section id="about" 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">
+    <section id="about" className="bg-white">
+      <div className="marketing-container">
         <p className="mb-5 text-center text-sm leading-normal font-medium tracking-[10%] text-muted-foreground uppercase sm:text-base">
           OUR VALUES{" "}
         </p>

src/features/marketing/components/about-support-mission-section.tsx

@@ -5,9 +5,9 @@ import React from "react"
 
 const AboutSupportMissionSection = () => {
   return (
-    <section className="">
-      <div className="mx-auto flex flex-col items-center px-4 py-12.5 sm:gap-50 sm:py-25 lg:max-w-7xl lg:px-25 2xl:max-w-360">
-        <div className="flex flex-col gap-12 sm:flex-row sm:items-center sm:gap-25">
+    <section>
+      <div className="marketing-container flex flex-col items-center border sm:gap-50">
+        <div className="flex w-full flex-col gap-12 sm:flex-row sm:items-center sm:gap-25">
           <Image
             src={"/figma-home/community.png"}
             alt="People putting hands together"
@@ -26,7 +26,7 @@ const AboutSupportMissionSection = () => {
               education, and health advocacy.
             </p>
 
-            <Button className="h-13 w-full self-start rounded-pill sm:w-75 sm:max-w-75">
+            <Button className="h-15 w-full self-start rounded-pill sm:w-75 sm:max-w-75">
               Support our mission <ArrowRight />
             </Button>
           </div>

src/features/marketing/components/community-section.tsx

@@ -4,7 +4,7 @@ import React from "react"
 const CommunitySection = () => {
   return (
     <section className="">
-      <div className="mx-auto flex flex-col-reverse items-center gap-12 px-4 py-12.5 sm:flex-row sm:gap-25 sm:py-25 lg:max-w-7xl lg:px-25 2xl:max-w-360">
+      <div className="marketing-container flex flex-col-reverse items-center gap-12 sm:flex-row sm:gap-25">
         <Image
           src="/figma-home/community.png"
           alt="People putting hands together"

src/features/marketing/components/contact-hero-section.tsx

@@ -39,11 +39,14 @@ export function ContactHeroSection({
   defaultName = "",
   defaultEmail = "",
 }: ContactHeroSectionProps) {
-  const { form, submitting, onSubmit } = useContactForm({ name: defaultName, email: defaultEmail })
+  const { form, submitting, onSubmit } = useContactForm({
+    name: defaultName,
+    email: defaultEmail,
+  })
 
   return (
-    <section id="contact" className="bg-white py-12.5 text-ma-text lg:py-25">
-      <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">
+    <section id="contact" className="bg-white text-ma-text">
+      <div className="marketing-container grid items-start gap-14 lg:grid-cols-[444px_1fr] lg:gap-[88px]">
         <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-muted-foreground uppercase">
@@ -117,7 +120,10 @@ export function ContactHeroSection({
               name="name"
               render={({ field, fieldState }) => (
                 <Field data-invalid={fieldState.invalid}>
-                  <FieldLabel htmlFor={field.name} className="text-lg font-normal text-ma-text">
+                  <FieldLabel
+                    htmlFor={field.name}
+                    className="text-lg font-normal text-ma-text"
+                  >
                     Full Name
                   </FieldLabel>
                   <Input
@@ -128,7 +134,9 @@ export function ContactHeroSection({
                     aria-invalid={fieldState.invalid}
                     className="h-9 rounded-md border-border bg-white px-2.5 py-2.5 text-base placeholder:text-muted-foreground"
                   />
-                  {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
                 </Field>
               )}
             />
@@ -139,7 +147,10 @@ export function ContactHeroSection({
                 name="email"
                 render={({ field, fieldState }) => (
                   <Field data-invalid={fieldState.invalid}>
-                    <FieldLabel htmlFor={field.name} className="text-lg font-normal text-ma-text">
+                    <FieldLabel
+                      htmlFor={field.name}
+                      className="text-lg font-normal text-ma-text"
+                    >
                       Email
                     </FieldLabel>
                     <Input
@@ -151,7 +162,9 @@ export function ContactHeroSection({
                       aria-invalid={fieldState.invalid}
                       className="h-9 rounded-md border-border bg-white px-2.5 py-2.5 text-base placeholder:text-muted-foreground"
                     />
-                    {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
                   </Field>
                 )}
               />
@@ -161,7 +174,10 @@ export function ContactHeroSection({
                 name="phone"
                 render={({ field, fieldState }) => (
                   <Field data-invalid={fieldState.invalid}>
-                    <FieldLabel htmlFor={field.name} className="text-lg font-normal text-ma-text">
+                    <FieldLabel
+                      htmlFor={field.name}
+                      className="text-lg font-normal text-ma-text"
+                    >
                       Phone number
                     </FieldLabel>
                     <Input
@@ -173,7 +189,9 @@ export function ContactHeroSection({
                       aria-invalid={fieldState.invalid}
                       className="h-9 rounded-md border-border bg-white px-2.5 py-2.5 text-base placeholder:text-muted-foreground"
                     />
-                    {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+                    {fieldState.invalid && (
+                      <FieldError errors={[fieldState.error]} />
+                    )}
                   </Field>
                 )}
               />
@@ -184,7 +202,10 @@ export function ContactHeroSection({
               name="message"
               render={({ field, fieldState }) => (
                 <Field data-invalid={fieldState.invalid}>
-                  <FieldLabel htmlFor={field.name} className="text-lg font-normal text-ma-text">
+                  <FieldLabel
+                    htmlFor={field.name}
+                    className="text-lg font-normal text-ma-text"
+                  >
                     Message
                   </FieldLabel>
                   <textarea
@@ -194,7 +215,9 @@ export function ContactHeroSection({
                     aria-invalid={fieldState.invalid}
                     className="h-[180px] w-full min-w-0 resize-none rounded-md border border-border bg-white px-2.5 py-2.5 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20"
                   />
-                  {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
                 </Field>
               )}
             />
@@ -204,7 +227,12 @@ export function ContactHeroSection({
               disabled={submitting}
               className="mt-1 w-full"
             >
-              {submitting && <LoaderCircle className="size-4 animate-spin" aria-hidden="true" />}
+              {submitting && (
+                <LoaderCircle
+                  className="size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
               Send your message
               <ArrowRight
                 className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]"

src/features/marketing/components/course-detail-content-section.tsx

@@ -22,8 +22,24 @@ type CourseContentData = {
   avgRating: number
   reviewCount: number
   enrollmentCount: number
-  modules: { id: string; title: string; sortOrder: number; topics: { id: string; title: string; format: string; content: string | null }[] }[]
-  reviews: { id: string; body: string | null; rating: number; studentName: string | null; studentImage: string | null }[]
+  modules: {
+    id: string
+    title: string
+    sortOrder: number
+    topics: {
+      id: string
+      title: string
+      format: string
+      content: string | null
+    }[]
+  }[]
+  reviews: {
+    id: string
+    body: string | null
+    rating: number
+    studentName: string | null
+    studentImage: string | null
+  }[]
 }
 
 export function CourseDetailContentSection({
@@ -33,7 +49,7 @@ export function CourseDetailContentSection({
 }) {
   return (
     <section className="bg-white py-10 text-ma-text lg:py-20">
-      <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="marketing-container flex flex-col-reverse gap-12 py-0! sm:py-0 lg:grid lg:grid-cols-[0.6fr_0.4fr] lg:items-start lg:justify-between xl:grid-cols-[598px_335px] 2xl:grid-cols-[650px_400px]">
         <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">