spazio-solazzo/lib/spazio_solazzo_web/live/page_live.html.heex

<Layouts.app flash={@flash} current_user={@current_user}>
  <div class="relative flex min-h-screen flex-col bg-base-100">
    <div class="flex-1 bg-base-100">
      <section class="bg-base-100">
        <div class="mx-auto max-w-[1200px] px-6 pt-25 pb-20 text-center bg-base-100">
          <div class="flex justify-center">
            <img
              alt="Spazio Solazzo"
              class="hero-logo-img drop-shadow-sm"
              src="/images/logo_spazio_solazzo.svg"
            />
          </div>
          <p class="text-lg md:text-xl text-earth font-light leading-relaxed max-w-2xl mx-auto mb-12">
            A space in the heart of Palermo where people meet to work, share ideas and spend time together.
          </p>
          <a
            href="#our-spaces"
            class="btn btn-primary h-14 px-12 rounded-full text-white font-bold shadow-xl uppercase text-sm tracking-widest"
          >
            Explore Spaces <.icon name="hero-chevron-down" class="size-5" />
          </a>
        </div>

        <div class="w-full mb-24">
          <.live_component
            module={SpazioSolazzoWeb.CarouselLiveComponent}
            id="home-carousel"
            images={@carousel_images}
            height="800px"
          />
        </div>
      </section>

      <section class="bg-base-100" id="our-spaces">
        <div class="mx-auto max-w-[1200px] px-6 pt-12 pb-12 bg-base-100">
          <div class="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-base-200 pb-10">
            <div>
              <h2 class="text-4xl font-extrabold tracking-tight text-plum-dark">
                Our Natural Habitats
              </h2>
              <p class="mt-3 text-lg font-light text-earth">
                Integrated environments tailored for your creative flow.
              </p>
            </div>
          </div>
        </div>

        <div class="mx-auto max-w-[1200px] px-6 pb-24 space-y-20 bg-base-100" id="spaces">
          <%= if @coworking_space do %>
            <.space_card
              id="coworking"
              title={@coworking_space.name}
              description={@coworking_space.description}
              image_url={~p"/images/coworking_room/01.jpg"}
              primary_label="Coworking"
              primary_label_variant={:secondary}
              image_position={:left}
              booking_url={"/#{@coworking_space.slug}"}
            />
          <% end %>

          <%= if @meeting_space do %>
            <.space_card
              id="meeting"
              title={@meeting_space.name}
              description={@meeting_space.description}
              image_url={~p"/images/meeting_room/01.jpg"}
              primary_label="Meeting"
              primary_label_variant={:secondary}
              secondary_label="Up to 8 people"
              secondary_label_icon="hero-user-group"
              image_position={:right}
              booking_url={"/#{@meeting_space.slug}"}
            />
          <% end %>

          <%= if @music_space do %>
            <.space_card
              id="music"
              title={@music_space.name}
              description={@music_space.description}
              image_url={~p"/images/music_room/01.jpg"}
              primary_label="Music"
              primary_label_variant={:primary}
              secondary_label="Not Soundproof"
              secondary_label_icon="hero-speaker-x-mark"
              note="Note: This is not a professional studio and is not soundproofed."
              image_position={:left}
              booking_url={"/#{@music_space.slug}"}
            />
          <% end %>
        </div>
      </section>
    </div>
  </div>
</Layouts.app>