feat: move improved components out of ui folder

src/components/sections/WeatherSection.astro

@@ -0,0 +1,37 @@
+---
+import WeatherCard from '@components/cards/WeatherCard.astro';
+import { getFiveDayForecast } from '@support/weather';
+
+const { latitude = "44.95", longitude = "-93.09", cityName = "St. Paul, Minnesota", timezone = "America/Chicago" } = Astro.props;
+const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, timezone);
+---
+
+<section class="mx-auto mb-20 max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
+  <div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
+    <h1 class="card-text-header smooth-reveal block font-bold md:leading-tight">
+      Weather in my Area 
+    </h1>
+    <div class="smooth-reveal mx-auto mt-5 max-w-3xl text-center">
+      <span class="card-text-header-description">
+        Five day forecast for {cityName}
+      </span>
+    </div>
+  </div>
+
+  {error ? (
+  <div class="card-base p-10 text-accent text-center">
+    {error}
+  </div>
+  ) : (
+  <div class="flex flex-wrap justify-center gap-4 lg:gap-6">
+    {forecastDays.map((forecastDay) => (
+    <WeatherCard
+      dayName={forecastDay.dayName}
+      label={forecastDay.label}
+      icon={forecastDay.icon}
+      temp={forecastDay.temp}
+    />
+    ))}
+  </div>
+  )}
+</section>