refactor: add carousel plugin to landpage

app/contrib/frontend/landpage/cms_plugins.py

@@ -6,7 +6,7 @@
 
 from contrib.bonde.models import Community
 
-from .models import Navbar, Footer
+from .models import Navbar, Carousel, CarouselItem, Footer
 from .forms import LayoutBlockForm, LayoutBlockPressureForm
 
 # from .layouts import Layout
@@ -82,6 +82,28 @@ def render(self, context, instance, placeholder):
         return context
 
 
+@plugin_pool.register_plugin
+class CarouselPlugin(CMSPluginBase):
+    name = "Carousel"
+    model = Carousel
+    module = "Carrosel"
+    render_template = "plugins/carousel.html"
+
+    def copy_relations(self, old_instance):
+        for item in old_instance.items.all():
+            item.pk = None
+            item.carousel = self.model
+            item.save()
+
+    def render(self, context, instance, placeholder):
+        context.update({
+            'instance': instance,
+            'items': instance.items.all(),
+            'placeholder': placeholder,
+        })
+        return context
+
+
 @plugin_pool.register_plugin
 class FooterPlugin(CMSPluginBase):
     name = "Rodapé (Padrão)"

app/contrib/frontend/landpage/models.py

@@ -118,8 +118,17 @@ class Meta:
         abstract = False
 
 
+class Carousel(CMSPlugin):
+    title = models.CharField("Título", max_length=120)
+    description = models.CharField("Descrição", max_length=120, null=True, blank=True)
+
+
+class CarouselItem(models.Model):
+    carousel = models.ForeignKey(Carousel, on_delete=models.CASCADE, related_name='items')
+    image = FilerImageField(null=True, blank=True, related_name='carousel_images')
+    text = models.TextField()
+
+
 class Footer(BlockElementStyled, CMSPlugin):
     class Meta:
         abstract = False
-
-

app/contrib/frontend/landpage/templates/frontend/landpage/plugins/carousel.html

@@ -0,0 +1,61 @@
+{% load cms_tags sekizai_tags static %}
+
+{% addtoblock "css" %}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
+{% endaddtoblock %}
+
+<section class="bg-[#024C2B] relative">
+  <div class="container px-5 py-28 mx-auto md:px-4">
+    {% if title or description %}<div class="mb-6">{% endif %}
+    {% if title %}<h2 class="text-4xl text-white text-center max-w-[620px] mx-auto mb-4">{{title}}</h2>{% endif %}
+    {% if description %}<p class="text-white text-center max-w-[815px] mx-auto">{{ description }}</p>{% endif %}
+    {% if title or description %}</div>{% endif %}
+
+    <div class="swiper mySwiper md:min-h-[300px]">
+      <div class="swiper-wrapper">
+        <!-- Slides -->
+        {% for item in items %}
+          <div class="swiper-slide">
+            <img src="{{ item.image.url }}" alt="{{ item.image.description }}">
+            <p>{{ item.text }}</p>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+    <div class="swiper-pagination"></div>
+    <div class="swiper-button-prev mt-14 md:mx-5 md:mt-10"></div>
+    <div class="swiper-button-next mt-14 md:mx-5 md:mt-10"></div>
+  </div>
+</section>
+
+{% addtoblock "js" %}
+  <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
+  <script>
+    var swiper = new Swiper(".mySwiper", {
+      slidesPerView: 1,
+      spaceBetween: 10,
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+      breakpoints: {
+        640: {
+          slidesPerView: 2,
+          spaceBetween: 20,
+        },
+        768: {
+          slidesPerView: 4,
+          spaceBetween: 40,
+        },
+        1024: {
+          slidesPerView: 5,
+          spaceBetween: 50,
+        },
+      },
+    });
+  </script>
+{% endaddtoblock %}

app/project/settings/cms.py

@@ -12,7 +12,7 @@
 CMS_PLACEHOLDER_CONF = {
     "content": {
         "name": "Blocos",
-        "plugins": ["BlockPlugin", "BlockPressurePlugin", "EleicaoCandidateListPlugin", "EleicaoCarouselPlugin", "EleicaoVoterFormPlugin"],
+        "plugins": ["BlockPlugin", "BlockPressurePlugin", "Carousel", "EleicaoCandidateListPlugin", "EleicaoCarouselPlugin", "EleicaoVoterFormPlugin"],
     },
     "navigation": {
         "name": "Navegação",