x

apps/spa/src/components/DynamicEditorialCarousel.tsx

@@ -1,5 +1,5 @@
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Pagination } from 'swiper/modules';
+import { Autoplay, Pagination, Navigation } from 'swiper/modules';
 import { Link } from 'react-router-dom';
 import type { EditorialCarouselSectionPayload } from '@homaroma/types';
 import { useTranslation } from 'react-i18next';
@@ -8,6 +8,7 @@ import { getLocalizedField } from '../utils/localization';
 // Import Swiper styles
 import 'swiper/css';
 import 'swiper/css/pagination';
+import 'swiper/css/navigation';
 
 interface DynamicEditorialCarouselProps {
   payload: EditorialCarouselSectionPayload;
@@ -45,8 +46,35 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
     });
   };
 
+  const bgMap: Record<string, string> = {
+    bg: 'bg-pop-bg',
+    black: 'bg-pop-black',
+    pink: 'bg-pop-pink',
+    yellow: 'bg-pop-yellow',
+    orange: 'bg-pop-orange',
+    red: 'bg-pop-red',
+    cyan: 'bg-pop-cyan',
+    green: 'bg-pop-green',
+    purple: 'bg-pop-purple',
+  };
+
+  const textMap: Record<string, string> = {
+    bg: 'text-pop-bg',
+    black: 'text-pop-black',
+    pink: 'text-pop-pink',
+    yellow: 'text-pop-yellow',
+    orange: 'text-pop-orange',
+    red: 'text-pop-red',
+    cyan: 'text-pop-cyan',
+    green: 'text-pop-green',
+    purple: 'text-pop-purple',
+  };
+
+  const bgClass = payload.backgroundColor && bgMap[payload.backgroundColor] ? bgMap[payload.backgroundColor] : 'bg-pop-bg';
+  const textClass = payload.textColor && textMap[payload.textColor] ? textMap[payload.textColor] : 'text-pop-black';
+
   return (
-    <section className="overflow-hidden py-16 md:py-24" style={{ backgroundColor: payload.backgroundColor, color: payload.textColor }}>
+    <section className={`overflow-hidden py-16 md:py-24 ${bgClass} ${textClass}`}>
       <div className="ui-section-inner space-y-12">
         <div className="space-y-3 text-center">
           <h2 className="font-serif text-3xl font-light tracking-wide text-pop-pink md:text-5xl">
@@ -57,7 +85,7 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
 
         <div className="relative select-none pb-12">
           <Swiper
-            modules={[Autoplay, Pagination]}
+            modules={[Autoplay, Pagination, Navigation]}
             spaceBetween={30}
             slidesPerView={1}
             breakpoints={{
@@ -65,6 +93,7 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
               1024: { slidesPerView: 3 }
             }}
             pagination={{ clickable: true, bulletActiveClass: 'swiper-pagination-bullet-active !bg-pop-pink' }}
+            navigation={true}
             autoplay={{ delay: 5000, disableOnInteraction: false }}
             className="w-full"
           >

apps/spa/src/components/sections/AccordionSection.tsx

@@ -19,17 +19,22 @@ export default function AccordionSection({ payload }: AccordionSectionProps) {
   };
 
   return (
-    <section className="ui-section-band w-full bg-pop-bg px-4 md:px-8">
+    <section
+      className="ui-section-band w-full px-4 md:px-8"
+      style={{ backgroundColor: payload.backgroundColor, color: payload.textColor }}
+    >
       <div className="ui-section-inner">
         {title && (
-          <h2 className="mb-10 text-center font-serif text-3xl text-pop-black md:text-4xl">
+          <h2 className="mb-10 text-center font-serif text-3xl md:text-4xl">
             {title}
           </h2>
         )}
         {payload.categories.map((category, catIndex) => (
           <div key={catIndex} className="mb-12 last:mb-0">
-            <h3 className="mb-6 flex items-center gap-3 font-serif text-2xl text-pop-black">
-              {category.icon && <span className="text-pop-pink">{category.icon}</span>}
+            <h3 className="mb-6 flex items-center gap-3 font-serif text-2xl">
+              {category.icon && (
+                <span style={{ color: payload.iconColor }}>{category.icon}</span>
+              )}
               {getLocalizedField(category.name, lang)}
             </h3>
             <div className="flex flex-col gap-4">
@@ -43,15 +48,15 @@ export default function AccordionSection({ payload }: AccordionSectionProps) {
                   >
                     <button
                       type="button"
-                      className={`flex w-full items-center justify-between p-5 text-left focus:outline-none focus:ring-2 focus:ring-pop-pink/50 hover:bg-pop-black/5 transition-colors ${
-                        isOpen ? 'bg-pop-black/5' : ''
+                      className={`flex w-full items-center justify-between p-5 text-left focus:outline-none focus:ring-2 focus:ring-pop-pink/50 hover:bg-black/5 transition-colors ${
+                        isOpen ? 'bg-black/5' : ''
                       }`}
                       onClick={() => toggleAccordion(indexKey)}
                     >
-                      <span className="pr-4 text-lg font-medium text-pop-black">
+                      <span className="pr-4 text-lg font-medium">
                         {getLocalizedField(item.q, lang)}
                       </span>
-                      <span className="flex-shrink-0 text-pop-pink">
+                      <span className="flex-shrink-0" style={{ color: payload.iconColor }}>
                         {isOpen ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
                       </span>
                     </button>
@@ -60,7 +65,7 @@ export default function AccordionSection({ payload }: AccordionSectionProps) {
                         isOpen ? 'max-h-96 pb-5 opacity-100' : 'max-h-0 opacity-0'
                       }`}
                     >
-                      <p className="text-pop-black/80 leading-relaxed whitespace-pre-wrap">
+                      <p className="opacity-80 leading-relaxed whitespace-pre-wrap">
                         {getLocalizedField(item.a, lang)}
                       </p>
                     </div>