From 328db9f22879c0c2f7435781a7e7eaea39477d06 Mon Sep 17 00:00:00 2001
From: ascpixi <44982772+ascpixi@users.noreply.github.com>
Date: Thu, 20 Nov 2025 16:25:27 -0500
Subject: [PATCH] feat: make FAQ wooden boards responsive

---
 frontend/public/ui/woodboard-1-bottom.svg |  3 +++
 frontend/public/ui/woodboard-1-top.svg    |  3 +++
 frontend/public/ui/woodboard-2-bottom.svg |  3 +++
 frontend/public/ui/woodboard-2-top.svg    |  3 +++
 frontend/src/App.tsx                      | 12 ++++++++----
 5 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 frontend/public/ui/woodboard-1-bottom.svg
 create mode 100644 frontend/public/ui/woodboard-1-top.svg
 create mode 100644 frontend/public/ui/woodboard-2-bottom.svg
 create mode 100644 frontend/public/ui/woodboard-2-top.svg

diff --git a/frontend/public/ui/woodboard-1-bottom.svg b/frontend/public/ui/woodboard-1-bottom.svg
new file mode 100644
index 0000000..feca675
--- /dev/null
+++ b/frontend/public/ui/woodboard-1-bottom.svg
@@ -0,0 +1,3 @@
+<svg width="601" height="819" viewBox="0 0 601 819" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.94084 178C4.94084 178 28.2671 177 24.7929 198.5C21.3188 220 9.90386 262 9.90386 262L0 799L92.2901 790L156.809 819C156.809 819 164.624 804.376 180.632 799C185.099 797.5 210.41 804 210.41 804H344.412C344.412 804 366.745 783 393.049 778C410.13 774.753 452.606 799 452.606 799L601 790V464.5C601 464.5 581.148 465.103 581.148 449.5C581.148 432 601 430.5 601 430.5V52.5C601 52.5 579.104 44.9908 580.155 29C581.147 13.9068 601 0 601 0H0L4.94084 178Z" fill="#AD684F"/>
+</svg>
diff --git a/frontend/public/ui/woodboard-1-top.svg b/frontend/public/ui/woodboard-1-top.svg
new file mode 100644
index 0000000..55ed4b3
--- /dev/null
+++ b/frontend/public/ui/woodboard-1-top.svg
@@ -0,0 +1,3 @@
+<svg width="601" height="566" viewBox="0 0 601 566" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M99.4449 0C99.4449 0 93.7726 17.6259 85.4524 17.5C50.971 16.9782 31.9812 0 31.9812 0H0L5.99516 381L14.9903 451L0 566H601L591.68 298L572.69 288L591.68 256.5L601 5L468.247 17.5L442.261 5L296.839 0L290.342 17.5L269.354 0H99.4449Z" fill="#AD684F"/>
+</svg>
diff --git a/frontend/public/ui/woodboard-2-bottom.svg b/frontend/public/ui/woodboard-2-bottom.svg
new file mode 100644
index 0000000..a8004c0
--- /dev/null
+++ b/frontend/public/ui/woodboard-2-bottom.svg
@@ -0,0 +1,3 @@
+<svg width="591" height="627" viewBox="0 0 591 627" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.9836 20.5234C23.0342 1.75331 5.55542 0.118699 1.04302 0.00724884H0C0 0.00724884 0.382666 -0.00906105 1.04302 0.00724884H590.015L580.023 89.3336L563.537 129.866L580.023 154.885L590.015 301C590.015 301 572.529 304.002 572.529 321.516C572.529 337.131 590.015 340.531 590.015 340.531V620.495H517.574C517.574 620.495 518.05 603.923 514.577 597.477C508.319 585.861 483.103 582.965 473.111 590.471C460.616 599.858 468.115 620.495 468.115 620.495L446.633 612.489H430.146C430.146 612.489 403.668 600.98 396.674 604.482C381.481 612.091 377.19 627 377.19 627L268.279 608.986L1.81198e-05 620.495L0 43.5415C0 43.5415 16.4864 42.0403 19.9836 20.5234Z" fill="#AD684F"/>
+</svg>
diff --git a/frontend/public/ui/woodboard-2-top.svg b/frontend/public/ui/woodboard-2-top.svg
new file mode 100644
index 0000000..7b5e6c7
--- /dev/null
+++ b/frontend/public/ui/woodboard-2-top.svg
@@ -0,0 +1,3 @@
+<svg width="590" height="529" viewBox="0 0 590 529" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M308.242 0C308.242 0 300.074 13.6388 291.756 13.5128C283.589 13.389 275.77 0 275.77 0H0.000152588L9.15527e-05 395.874L19.9834 430.907L9.15527e-05 461.436V529H590.007C590.007 529 575.112 513.91 570.523 490.464C567.388 474.448 590.007 454.43 590.007 454.43L586.51 0H461.115L448.125 13.5128L425.644 7.5071L308.242 0Z" fill="#AD684F"/>
+</svg>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 70c68e6..265c867 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -466,8 +466,10 @@ function App() {
 
           <div className="flex flex-col lg:flex-row gap-10 justify-center items-start">
             <div className="relative">
-              <div className="absolute inset-0 lg:w-[608px] lg:h-[1491px] pointer-events-none">
-                <img src="/ui/faq-participant-bg.svg" alt="" className="w-full h-full object-cover select-none" />
+              <div className="absolute inset-0 lg:w-[608px] pointer-events-none flex flex-col">
+                <img src="/ui/woodboard-1-top.svg" alt="" className="w-full flex-shrink-0 select-none" />
+                <div className="bg-[#AD684F] flex-1 w-full py-4"></div>
+                <img src="/ui/woodboard-1-bottom.svg" alt="" className="w-full flex-shrink-0 select-none" />
               </div>
               
               <div className="relative z-10 flex flex-col gap-10 items-center lg:px-16 pt-8 lg:w-[608px]">
@@ -500,8 +502,10 @@ function App() {
             </div>
 
             <div className="relative w-full lg:w-auto">
-              <div className="absolute inset-0 lg:w-[608px] h-[1505px] pointer-events-none">
-                <img src="/ui/faq-organizer-bg.svg" alt="" className="w-full h-full object-cover select-none" />
+              <div className="absolute inset-0 lg:w-[608px] pointer-events-none flex flex-col">
+                <img src="/ui/woodboard-2-top.svg" alt="" className="w-full flex-shrink-0 select-none" />
+                <div className="bg-[#AD684F] flex-1 w-full py-4"></div>
+                <img src="/ui/woodboard-2-bottom.svg" alt="" className="w-full flex-shrink-0 select-none" />
               </div>
               
               <div className="relative z-10 flex flex-col gap-10 items-center px-16 pt-9 lg:w-[608px]">