Add wave section transitions

frontend/src/pages/index.tsx

@@ -65,6 +65,32 @@ const testimonials = [
   ],
 ];
 
+function WaveDivider({
+  from = '#fffdf9',
+  to = '#19192d',
+  flip = false,
+}: {
+  from?: string;
+  to?: string;
+  flip?: boolean;
+}) {
+  return (
+    <div className="relative h-28 overflow-hidden" style={{ backgroundColor: from }}>
+      <svg
+        className={`absolute inset-x-0 bottom-0 h-full w-full ${flip ? 'rotate-180' : ''}`}
+        viewBox="0 0 1440 160"
+        preserveAspectRatio="none"
+        aria-hidden="true"
+      >
+        <path
+          fill={to}
+          d="M0,96 C180,122 330,136 520,124 C720,112 865,58 1090,72 C1248,82 1356,106 1440,96 L1440,160 L0,160 Z"
+        />
+      </svg>
+    </div>
+  );
+}
+
 export default function Starter() {
   return (
     <>
@@ -229,7 +255,9 @@ export default function Starter() {
           </div>
         </section>
 
-        <section id="session-memory" className={`px-5 py-20 ${ui.darkPanel}`}>
+        <WaveDivider from="#fffdf9" to="#19192d" />
+
+        <section id="session-memory" className={`px-5 pb-20 pt-10 ${ui.darkPanel}`}>
           <div className="mx-auto grid max-w-7xl grid-cols-1 gap-10 lg:grid-cols-[0.95fr_1.05fr] lg:px-8">
             <div className="flex flex-col justify-center">
               <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#c79a38]">Session memory</p>
@@ -291,7 +319,9 @@ export default function Starter() {
           </div>
         </section>
 
-        <section id="trust" className={ui.section}>
+        <WaveDivider from="#fffdf9" to="#19192d" flip />
+
+        <section id="trust" className={`${ui.section} pt-10`}>
           <div className="grid grid-cols-1 gap-10 lg:grid-cols-[0.9fr_1.1fr]">
             <div>
               <p className={ui.overline}>Coach supervised</p>