Added Hero section

src/components/HeroSection.jsx

@@ -0,0 +1,21 @@
+
+import React from 'react';
+
+
+const HeroSection = ({ image, title, subtitle }) => {
+  return (
+    <section
+      className="hero-section"
+      style={{ backgroundImage: `url(${image})` }}
+    >
+      <div className="hero-overlay">
+        <div className="hero-content">
+          <h1 className="hero-title">{title}</h1>
+          {subtitle && <p className="hero-subtitle">{subtitle}</p>}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;

src/pages/Covid.jsx

@@ -22,6 +22,8 @@ import Loading from '../components/Loading.jsx';
 import ErrorMessage from '../components/ErrorMessage.jsx';
 import Card from '../components/Card.jsx';
 import CountryTrendChart from '../components/CountryTrendChart.jsx';
+import HeroSection from '../components/HeroSection';
+import Corona from '../Images/Corona.jpg';
 
 export default function Covid() {
   const [summary, setSummary] = useState(null);
@@ -69,7 +71,17 @@ export default function Covid() {
   );
 
   return (
+
     <div>
+     <HeroSection
+  image={Corona}
+  title={
+    <>
+      COVID-19 <span style={{ color: 'red' }}>Tracker</span>
+    </>
+  }
+  subtitle="Stay informed with the latest COVID-19 stats worldwide."
+/>
       <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
         <h2>COVID-19 Tracker</h2>
         <button onClick={fetchSummary} disabled={loading}>

src/pages/Crypto.jsx

@@ -24,6 +24,9 @@ import Loading from "../components/Loading.jsx";
 import ErrorMessage from "../components/ErrorMessage.jsx";
 import Card from "../components/Card.jsx";
 import formatNumber from "../utilities/numberFormatter.js";
+import HeroSection from '../components/HeroSection';
+import CryptoImg from '../Images/Cryptocurrency.jpg';
+
 
 export default function Crypto() {
   const [coins, setCoins] = useState([]);
@@ -59,6 +62,15 @@ export default function Crypto() {
 
   return (
     <div>
+      <HeroSection
+      image= {CryptoImg}
+        title={
+    <>
+      Decoding Digital <span style={{ color: 'green' }}>Currency</span>
+    </>
+  }
+      subtitle="Empowering you to invest, trade, and understand crypto with confidence"
+    />
       <h2>💹 Cryptocurrency Tracker</h2>
       <input
         value={query}

src/pages/JokesQuotes.jsx

@@ -21,6 +21,8 @@ import { useEffect, useState } from 'react';
 import Loading from '../components/Loading.jsx';
 import ErrorMessage from '../components/ErrorMessage.jsx';
 import Card from '../components/Card.jsx';
+import HeroSection from '../components/HeroSection';
+import Flowers from '../Images/Flowers.jpg';
 
 export default function JokesQuotes() {
   const [joke, setJoke] = useState(null);
@@ -66,6 +68,16 @@ export default function JokesQuotes() {
 
   return (
     <div>
+      <HeroSection
+      image={Flowers}
+       title={
+    <>
+      Quote It, Joke It, <span style={{ color: 'skyblue' }}>Live It</span>
+    </>
+  }
+
+      subtitle="Whether you need a laugh or a little life wisdom, we’ve got a line for that."
+    />
       <h2>Jokes & Quotes</h2>
       <div className="flex gap">
         <button onClick={fetchJoke}>New Joke</button>

src/pages/Movies.jsx

@@ -21,6 +21,8 @@ import { useEffect, useState } from 'react';
 import Loading from '../components/Loading.jsx';
 import ErrorMessage from '../components/ErrorMessage.jsx';
 import Card from '../components/Card.jsx';
+import HeroSection from '../components/HeroSection';
+import Cinema from '../Images/Movie.jpg';
 
 export default function Movies() {
   const [films, setFilms] = useState([]);
@@ -44,6 +46,15 @@ export default function Movies() {
 
   return (
     <div>
+      <HeroSection
+      image={Cinema}
+      title={
+    <>
+      Lights, Camera, <span style={{ color: 'darkred' }}>Binge!</span>
+    </>
+  }
+      subtitle="Dive deep into storytelling, performances, and the art of filmmaking."
+    />
       <h2>Studio Ghibli Films</h2>
       <input value={filter} onChange={e => setFilter(e.target.value)} placeholder="Filter by director or year" />
       {loading && <Loading />}

src/pages/Pets.jsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from "react";
 import { Heart, X, Download, ExternalLink, RefreshCw } from "lucide-react";
+import HeroSection from '../components/HeroSection';
+import Animals from '../Images/Pets.jpg';
 
 export default function Pets() {
   const [dog, setDog] = useState(null);
@@ -592,7 +594,15 @@ export default function Pets() {
           }
 
       `}</style>
-
+      <HeroSection
+      image={Animals}
+        title={
+    <>
+      Paws, Love, <span style={{ color: 'orange' }}>Repeat</span>
+    </>
+  }
+      subtitle="Because every pet deserves a life full of love and tail wags."
+    />
       <div className="container">
         <div className="main-content">
           <div className="header">

src/pages/Recipes.jsx

@@ -21,6 +21,8 @@ import { useEffect, useState } from 'react';
 import Loading from '../components/Loading.jsx';
 import ErrorMessage from '../components/ErrorMessage.jsx';
 import Card from '../components/Card.jsx';
+import HeroSection from '../components/HeroSection';
+import Food from '../Images/Food.jpg';
 
 export default function Recipes() {
   const [ingredient, setIngredient] = useState('chicken');
@@ -53,6 +55,15 @@ export default function Recipes() {
 
   return (
     <div>
+      <HeroSection
+      image={Food}
+        title={
+    <>
+      Delicious Made <span style={{ color: 'yellow' }}>Simple</span>
+    </>
+  }
+      subtitle="Wholesome recipes with heart, made easy for every home cook"
+    />
       <h2>Recipe Finder</h2>
       <form onSubmit={e => { e.preventDefault(); search(); }} className="inline-form">
         <input value={ingredient} onChange={e => setIngredient(e.target.value)} placeholder="Ingredient" />

src/pages/Space.jsx

@@ -23,6 +23,8 @@ import ErrorMessage from '../components/ErrorMessage.jsx';
 import Card from '../components/Card.jsx';
 import IssMap from '../components/IssMap.jsx';
 import DashboardControls from "../components/DashboardControls.jsx";
+import HeroSection from '../components/HeroSection';
+import SpaceImg from '../Images/Space.jpg';
 
 
 export default function Space({ theme = 'light' }) {
@@ -91,6 +93,16 @@ useEffect(() => {
   const borderColor = isDark ? '#334155' : '#e2e8f0';
 
   return (
+    <>
+    <HeroSection
+  image={SpaceImg}
+    title={
+    <>
+      Orbiting Earth, <span style={{ color: 'purple' }}>Sharing Stories</span>
+    </>
+  }
+  subtitle="Track the International Space Station and dive into the lives of its courageous crew"
+/>
     <div
       style={{
         maxWidth: '1000px',
@@ -260,5 +272,6 @@ useEffect(() => {
         </a>
       </p>
     </div>
+    </>
   );
 }

src/pages/Trivia.jsx

@@ -21,6 +21,8 @@ import { useEffect, useState } from 'react';
 import Loading from '../components/Loading.jsx';
 import ErrorMessage from '../components/ErrorMessage.jsx';
 import Card from '../components/Card.jsx';
+import HeroSection from '../components/HeroSection';
+import Quiz from '../Images/Quiz.jpg';
 
 export default function Trivia() {
   const [questions, setQuestions] = useState([]);
@@ -88,6 +90,16 @@ export default function Trivia() {
   const allAnswered = answeredCount === totalQuestions && totalQuestions > 0;
 
   return (
+    <>
+        <HeroSection
+  image={Quiz}
+ title={
+    <>
+      Think Fast, <span style={{ color: 'grey' }}>Learn Faster</span>
+    </>
+  }
+  subtitle="A trivia playground for curious minds, quick thinkers, and casual know-it-alls"
+/>
     <div style={{ padding: '20px' }}>
       <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}>
         <h2 style={{ margin: 0 }}>Trivia Quiz</h2>
@@ -265,6 +277,7 @@ export default function Trivia() {
         </div>
       )}
     </div>
+    </>
   );
 }
 

src/pages/Weather.jsx

@@ -26,6 +26,8 @@ import Loading from "../components/Loading.jsx";
 import ErrorMessage from "../components/ErrorMessage.jsx";
 import Card from "../components/Card.jsx";
 import Skeleton from "../components/Skeleton.jsx";
+import HeroSection from '../components/HeroSection';
+import Cloud from '../Images/Cloud.jpg';
 import {
   getWeatherData,
   clearWeatherCache,
@@ -154,6 +156,15 @@ export default function Weather() {
     if (variant === "cloud") {
       return (
         <>
+                <HeroSection
+  image={Cloud}
+  title={
+    <>
+  Weather <span style={{ color: "black" }}>Wonders</span>
+  </>
+  }
+  subtitle="Stay ahead of the weather with real-time updates and accurate forecasts tailored just for you"
+/>
           <svg
             className="cloud-svg cloud--left"
             viewBox="0 0 220 80"
@@ -342,6 +353,7 @@ export default function Weather() {
         background: `var(--${activeBg}-gradient)`,
         transition: "background 1s ease-in-out",
         position: "relative",
+        marginTop: "45vh",
       }}
     >
       <div style={{ position: "fixed", inset: 0, zIndex: 0 }}>

src/styles.css

@@ -755,4 +755,63 @@ blockquote {
 .pagination button:disabled {
   background-color: #ccc;
   cursor: not-allowed;
-}
+}
+
+
+.hero-section {
+  position: relative;
+  height: 54vh;
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.hero-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero-content {
+  text-align: center;
+  z-index: 1;
+  padding: 0 20px;
+}
+
+.hero-title {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.hero-subtitle {
+  font-size: 1.5rem;
+  color: #fafafa;
+  font-style: italic;
+}
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2.2rem;
+  }
+  .hero-subtitle {
+    font-size: 1.2rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-title {
+    font-size: 1.8rem;
+  }
+  .hero-subtitle {
+    font-size: 1rem;
+  }
+}
+}