update new requested flip card design

majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html

 <div class="flip-card" tabindex="0">
   <div class="flip-card-inner">
-    <div class="flip-card-front">
+    <div
+      class="flip-card-front rounded-3xl bg-cover"
+
+      {% if background_url %}
+        style="
+          background-image: url('{{ background_url }}')
+        "
+      {% endif %}
+    >
       <div
         class="relative h-[33rem] rounded-3xl overflow-hidden bg-cover"
         style="
-          background-color: {{ bg_color }};
+          {% if not background_url %}
+            background-color: {{ bg_color }};
+          {% endif %}
 
           {% if image_url %}
             background-image: url('{{ image_url }}')
           {% endif %}
         "
       >
-        <div
-          class="
-            absolute top-0 left-0
+        {% if not background_url %}
+          <div
+            class="
+              absolute top-0 left-0
 
-            border border-r-[27rem] border-r-[transparent]
-            border-l-0 border-t-[33rem]
-          "
-          style="border-top-color: {{ bg_color }}"
-        ></div>
+              border border-r-[27rem] border-r-[transparent]
+              border-l-0 border-t-[33rem]
+            "
+            style="border-top-color: {{ bg_color }}"
+          ></div>
+        {% endif %}
 
         <h1
           class="
             font-alt text-5xl whitespace-pre-line absolute top-10 left-10 max-w-[60%]
           "
+          {% if title_color %}
+            style="color: {{ title_color }}"
+          {% endif %}
         >{{ title }}</h1>
 
-        {% if icon_url %}
-          {{ icon_url }}
-          <img
-            class="
-              absolute w-32 h-32 bottom-8 right-8
-            "
-            src="{{ icon_url }}"
-          >
-        {% endif %}
-
         <div
           class="
-            {% if image_url %}
-              right-4 bottom-4 text-right
-            {% elif icon_url %}
-              bottom-8 left-8 text-left
-            {% endif %}
+            bottom-8 left-8 text-left
 
             absolute block text-white opacity-75 leading-5 font-condensed
 

majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml

@@ -3,7 +3,8 @@ context:
     Staň se členkou
     nebo členem
   image_url: '../../../../../static/images/onboarding/member.png'
-  icon_url: ''
+  title_color: ''
+  background_url: ''
   content: |-
     <h2>
       Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!

majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.html

 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-4">
   {% for card in cards %}
-    {% include 'patterns/molecules/boxes/flip_card_box.html' with title=card.title image_url=card.image_url icon_url=card.icon_url content=card.content button_text=card.button_text %}
+    {% include 'patterns/molecules/boxes/flip_card_box.html' with title=card.title image_url=card.image_url background_url=card.background_url title_color=card.title_color content=card.content button_text=card.button_text %}
   {% endfor %}
 </div>

majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.yaml

@@ -4,7 +4,8 @@ context:
       title: |-
         Staň se členkou
         nebo členem
-      icon_url: '../../../../../static/images/onboarding/member.webp'
+      title_color: 'red'
+      background_url: '../../../../../static/images/onboarding/member.webp'
       content: |-
         <h2>
           Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!