From ce0062cc2457f23a967423044f95b962dfde9e3c Mon Sep 17 00:00:00 2001
From: Thibault <54189871+Asaren1070@users.noreply.github.com>
Date: Wed, 18 Jun 2025 11:45:05 +0100
Subject: [PATCH] feat : adding historical solar data at the home page (#454)

* feat : adding historical solar data at the home page

* fix: fixing lint
---
 .../app/_homeComponents/HistorySolarData.tsx  | 33 +++++++++++++++++++
 frontend/src/app/page.tsx                     |  6 +++-
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/_homeComponents/HistorySolarData.tsx

diff --git a/frontend/src/app/_homeComponents/HistorySolarData.tsx b/frontend/src/app/_homeComponents/HistorySolarData.tsx
new file mode 100644
index 0000000..4d3222f
--- /dev/null
+++ b/frontend/src/app/_homeComponents/HistorySolarData.tsx
@@ -0,0 +1,33 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+
+const solarDataUrl =
+    "https://services.swpc.noaa.gov/images/swx-overview-large.gif";
+
+export default function HistorySolarData() {
+    return (
+        <div className="flex w-full flex-col items-center justify-center">
+            <div className="mt-16 flex flex-col items-center justify-center text-center">
+                <div className="prose prose-invert">
+                    <h1>{"Historical Solar Data"}</h1>
+                    <p>
+                        {
+                            "Here is shown multiple charts informing the current state of the solar weather"
+                        }
+                    </p>
+                </div>
+            </div>
+            {/* Images side by side */}
+            <div className="my-10 flex w-full flex-row items-center justify-center gap-8 p-4 text-center">
+                <Image
+                    alt="Historical Solar Data"
+                    src={solarDataUrl}
+                    width={900}
+                    height={400}
+                    className="w-900 h-auto"
+                />
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 5b07694..414a9a5 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -4,15 +4,19 @@ import MissionStatement from "./_homeComponents/MissionStatement";
 import FeaturedImage from "./_homeComponents/FeaturedImage";
 import GlobeWithStats from "./_homeComponents/GlobeWithStats";
 import ScrollIndicator from "./_homeComponents/ScrollIndicator";
+import HistorySolarData from "./_homeComponents/HistorySolarData";
 
 export default async function Home() {
     return (
         <>
             <ScrollIndicator></ScrollIndicator>
-            {/* Globe */}
 
+            {/* Globe */}
             <GlobeWithStats />
 
+            {/* History Solar Data Section */}
+            <HistorySolarData />
+
             {/* Mission Statement Section */}
             <MissionStatement />