today_ai_weather/app/views/weather_arts/_weather_stats.html.erb

<%# Partial _weather_stats.html.erb %>

<div class="stat bg-gradient-to-br from-primary/10 to-primary/20 hover:from-primary hover:to-primary/30 p-4 rounded-lg">
  <div class="stat-title font-medium text-base">Temperature</div>
  <div class="stat-value text-3xl"><%= weather_art.temperature %>°C</div>
  <div class="stat-desc">Feels like <%= weather_art.feeling_temp %>°C</div>
</div>

<div class="stat bg-gradient-to-br from-secondary/10 to-secondary/20 hover:from-secondary hover:to-secondary/30 p-4 rounded-lg">
  <div class="stat-title font-medium text-base">Wind</div>
  <div class="stat-value text-3xl"><%= weather_art.wind_scale %></div>
  <div class="stat-desc"><%= weather_art.wind_speed %> km/h</div>
</div>

<div class="stat bg-base-300 hover:bg-base-400 p-4 rounded-lg">
  <div class="stat-title font-medium text-base">Humidity</div>
  <div class="stat-value text-3xl"><%= weather_art.humidity %>%</div>
  <div class="stat-desc">Relative humidity</div>
</div>

<div class="stat bg-base-300 hover:bg-base-400 p-4 rounded-lg">
  <div class="stat-title font-medium text-base">Visibility</div>
  <div class="stat-value text-3xl"><%= weather_art.visibility %> km</div>
  <div class="stat-desc">Clear view distance</div>
</div>

<div class="stat bg-accent/10 hover:bg-accent p-4 rounded-lg">
  <div class="stat-title font-medium text-base">Pressure</div>
  <div class="stat-value text-3xl"><%= weather_art.pressure %> hPa</div>
  <div class="stat-desc">Atmospheric pressure</div>
</div>

<div class="stat bg-base-200 hover:bg-base-100 p-4 rounded-lg">
  <div class="stat-title font-medium text-base">Cloud Cover</div>
  <div class="stat-value text-3xl"><%= weather_art.cloud %>%</div>
  <div class="stat-desc">Sky coverage</div>
</div>