From 28264543634ee03e7d69e69a2cfdfcce1fcc53bc Mon Sep 17 00:00:00 2001
From: AdrianBalunan <adrianbalunan63@gmail.com>
Date: Tue, 21 Apr 2026 14:46:57 +0200
Subject: [PATCH] Shitty as fxml (grr i hate fxml) turns every text white for
 some reason ) but now frontpage now scrolls and looks nice

---
 .../team6/controller/FrontpageController.java |   2 +
 .../fxml/components/feedbackCard.fxml         |  29 +-
 .../resources/fxml/components/footer.fxml     |   2 +-
 .../resources/fxml/components/navbar.fxml     |   2 +-
 .../fxml/components/organizationCard.fxml     |   6 +-
 .../src/main/resources/fxml/frontPage.fxml    | 386 +++++++-----------
 6 files changed, 169 insertions(+), 258 deletions(-)

diff --git a/helpmehelpapplication/src/main/java/ntnu/systemutvikling/team6/controller/FrontpageController.java b/helpmehelpapplication/src/main/java/ntnu/systemutvikling/team6/controller/FrontpageController.java
index 815ff01..660a9d3 100644
--- a/helpmehelpapplication/src/main/java/ntnu/systemutvikling/team6/controller/FrontpageController.java
+++ b/helpmehelpapplication/src/main/java/ntnu/systemutvikling/team6/controller/FrontpageController.java
@@ -4,6 +4,8 @@
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Random;
+
+import javafx.application.Platform;
 import javafx.event.ActionEvent;
 import javafx.fxml.FXML;
 import javafx.fxml.FXMLLoader;
diff --git a/helpmehelpapplication/src/main/resources/fxml/components/feedbackCard.fxml b/helpmehelpapplication/src/main/resources/fxml/components/feedbackCard.fxml
index 2029ce4..35fba4e 100644
--- a/helpmehelpapplication/src/main/resources/fxml/components/feedbackCard.fxml
+++ b/helpmehelpapplication/src/main/resources/fxml/components/feedbackCard.fxml
@@ -1,40 +1,33 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
-<?import javafx.scene.control.*?>
-<?import javafx.scene.layout.*?>
-<?import javafx.scene.shape.*?>
-<?import javafx.scene.text.*?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.shape.Circle?>
+<?import javafx.scene.text.Font?>
 
-<HBox alignment="CENTER_LEFT"
-      spacing="16.0"
-      style="-fx-background-color: #FFFFFF;
-             -fx-border-color: transparent transparent #EEEEEE transparent;
-             -fx-border-width: 1;
-             -fx-padding: 14 20 14 20;"
-      xmlns="http://javafx.com/javafx/25"
-      xmlns:fx="http://javafx.com/fxml/1"
-      fx:controller="ntnu.systemutvikling.team6.controller.components.FeedbackCardController">
+<HBox alignment="CENTER_LEFT" spacing="16.0" style="-fx-background-color: #FFFFFF;              -fx-border-color: transparent transparent #EEEEEE transparent;              -fx-border-width: 1;              -fx-padding: 14 20 14 20;" xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ntnu.systemutvikling.team6.controller.components.FeedbackCardController">
     <children>
 
         <Circle fx:id="avatar" fill="#D9D9D9" radius="20.0" />
 
         <VBox spacing="4.0" HBox.hgrow="ALWAYS">
             <children>
-                <HBox spacing="10.0" alignment="CENTER_LEFT">
+                <HBox alignment="CENTER_LEFT" spacing="10.0">
                     <children>
-                        <Label fx:id="usernameLabel" style="-fx-text-fill: #111111;">
+                        <Label fx:id="usernameLabel" style="-fx-text-fill: #111111;" text="sdfghjklø">
                             <font><Font name="System Bold" size="13.0" /></font>
                         </Label>
-                        <Label fx:id="dateLabel" style="-fx-text-fill: #AAAAAA;">
+                        <Label fx:id="dateLabel" style="-fx-text-fill: #AAAAAA;" text="xcfghuiknbghjk">
                             <font><Font size="11.0" /></font>
                         </Label>
                     </children>
                 </HBox>
-                <Label fx:id="commentLabel" style="-fx-text-fill: #555555;" wrapText="true">
+                <Label fx:id="commentLabel" style="-fx-text-fill: #555555;" text="qwertyuio" wrapText="true">
                     <font><Font size="12.0" /></font>
                 </Label>
             </children>
         </VBox>
 
     </children>
-</HBox>
\ No newline at end of file
+</HBox>
diff --git a/helpmehelpapplication/src/main/resources/fxml/components/footer.fxml b/helpmehelpapplication/src/main/resources/fxml/components/footer.fxml
index e3ecbb5..30478a9 100644
--- a/helpmehelpapplication/src/main/resources/fxml/components/footer.fxml
+++ b/helpmehelpapplication/src/main/resources/fxml/components/footer.fxml
@@ -7,7 +7,7 @@
 <?import javafx.scene.shape.*?>
 <?import javafx.scene.text.*?>
 
-<HBox alignment="BOTTOM_CENTER" prefHeight="180.0" prefWidth="800.0" style="-fx-background-color: #2f8f8b;" GridPane.rowIndex="2" xmlns="http://javafx.com/javafx/17.0.12" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ntnu.systemutvikling.team6.controller.components.FooterController">
+<HBox alignment="BOTTOM_CENTER" prefHeight="180.0" prefWidth="800.0" style="-fx-background-color: #2f8f8b;" GridPane.rowIndex="2" xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ntnu.systemutvikling.team6.controller.components.FooterController">
     <children>
         <GridPane HBox.hgrow="ALWAYS">
             <columnConstraints>
diff --git a/helpmehelpapplication/src/main/resources/fxml/components/navbar.fxml b/helpmehelpapplication/src/main/resources/fxml/components/navbar.fxml
index 164c455..30cb898 100644
--- a/helpmehelpapplication/src/main/resources/fxml/components/navbar.fxml
+++ b/helpmehelpapplication/src/main/resources/fxml/components/navbar.fxml
@@ -9,7 +9,7 @@
 <?import javafx.scene.layout.*?>
 <?import javafx.scene.text.*?>
 
-<GridPane prefHeight="67" style="-fx-background-color: #2f8f8b;" HBox.hgrow="ALWAYS" xmlns="http://javafx.com/javafx/17.0.12" xmlns:fx="http://javafx.com/fxml/1"   GridPane.columnSpan="2" fx:controller="ntnu.systemutvikling.team6.controller.components.NavbarController">
+<GridPane prefHeight="67" style="-fx-background-color: #2f8f8b;" HBox.hgrow="ALWAYS" xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1"   GridPane.columnSpan="2" fx:controller="ntnu.systemutvikling.team6.controller.components.NavbarController">
     <columnConstraints>
         <ColumnConstraints hgrow="ALWAYS" minWidth="10.0" percentWidth="30.0" prefWidth="100.0" />
         <ColumnConstraints hgrow="ALWAYS" minWidth="10.0" percentWidth="30.0" prefWidth="100.0" />
diff --git a/helpmehelpapplication/src/main/resources/fxml/components/organizationCard.fxml b/helpmehelpapplication/src/main/resources/fxml/components/organizationCard.fxml
index 94cf11f..45380d8 100644
--- a/helpmehelpapplication/src/main/resources/fxml/components/organizationCard.fxml
+++ b/helpmehelpapplication/src/main/resources/fxml/components/organizationCard.fxml
@@ -15,15 +15,15 @@
          <children>
             <ImageView fitHeight="60.0" fitWidth="60.0" pickOnBounds="true" preserveRatio="true" />
             <Region prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS" />
-            <Label style="-fx-background-color: #cdedcf; -fx-background-radius: 12; -fx-padding: 4 10 4 10; -fx-text-fill: #2e7d32; -fx-font-size: 12;" text="Verified" />
+            <Label textFill="2e7d32" style="-fx-background-color: #cdedcf; -fx-background-radius: 12; -fx-padding: 4 10 4 10; -fx-text-fill: #2e7d32; -fx-font-size: 12;" text="Verified" />
          </children>
       </HBox>
-      <Label fx:id="organizationName" text="Organization name">
+      <Label fx:id="organizationName" text="Organization name" textFill="black">
          <font>
             <Font name="System Bold" size="26.0" />
          </font>
       </Label>
-      <Label fx:id="organizationDescription" prefWidth="300.0" text="Some interesting information about the organization" wrapText="true" />
+      <Label textFill="black" fx:id="organizationDescription" prefWidth="300.0" text="Some interesting information about the organization" wrapText="true" />
       <Region prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
       <HBox alignment="CENTER_LEFT" prefHeight="100.0" prefWidth="200.0" spacing="12.0">
          <children>
diff --git a/helpmehelpapplication/src/main/resources/fxml/frontPage.fxml b/helpmehelpapplication/src/main/resources/fxml/frontPage.fxml
index c08f91d..0ee2404 100644
--- a/helpmehelpapplication/src/main/resources/fxml/frontPage.fxml
+++ b/helpmehelpapplication/src/main/resources/fxml/frontPage.fxml
@@ -1,255 +1,171 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <?import javafx.geometry.Insets?>
-<?import javafx.scene.Cursor?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.CheckBox?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.ScrollPane?>
-<?import javafx.scene.control.TextField?>
 <?import javafx.scene.effect.Blend?>
-<?import javafx.scene.image.Image?>
-<?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.ColumnConstraints?>
 <?import javafx.scene.layout.FlowPane?>
 <?import javafx.scene.layout.GridPane?>
 <?import javafx.scene.layout.HBox?>
-<?import javafx.scene.layout.Region?>
 <?import javafx.scene.layout.RowConstraints?>
 <?import javafx.scene.layout.StackPane?>
 <?import javafx.scene.layout.VBox?>
-<?import javafx.scene.shape.Rectangle?>
 <?import javafx.scene.text.Font?>
 
-<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefWidth="1200.0" xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ntnu.systemutvikling.team6.controller.FrontpageController">
-  <columnConstraints>
-    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-  </columnConstraints>
-  <rowConstraints>
-    <RowConstraints minHeight="10.0" percentHeight="10.0" prefHeight="30.0" valignment="TOP" vgrow="ALWAYS" />
-    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
-    <RowConstraints minHeight="10.0" percentHeight="25.0" prefHeight="30.0" vgrow="SOMETIMES" />
-  </rowConstraints>
+<GridPane maxHeight="-Infinity" maxWidth="-Infinity" style="-fx-background-color: #F5F5F5;" minHeight="-Infinity" minWidth="-Infinity" prefWidth="1200.0" xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ntnu.systemutvikling.team6.controller.FrontpageController">
+   <columnConstraints>
+      <ColumnConstraints hgrow="ALWAYS" percentWidth="100.0" />
+   </columnConstraints>
+   <rowConstraints>
+      <RowConstraints minHeight="70.0" prefHeight="70.0" vgrow="NEVER" />
+      <RowConstraints vgrow="ALWAYS" />
+      <RowConstraints minHeight="180.0" prefHeight="180.0" vgrow="NEVER" />
+   </rowConstraints>
+
    <children>
-      <HBox alignment="CENTER" style="-fx-background-color: #2f8f8b;" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.valignment="CENTER" GridPane.vgrow="ALWAYS">
-         <children>
-            <!-- Pull in the navbar from components with its own controller -->
-            <fx:include fx:id="navbar" source="components/navbar.fxml"/>
-         </children>
-      </HBox>
-      <VBox prefHeight="200.0" prefWidth="100.0" GridPane.rowIndex="1">
-         <children>
-            <HBox prefHeight="100.0" prefWidth="200.0">
-               <children>
-                  <VBox prefHeight="100.0" prefWidth="450.0">
-                     <children>
-                        <Label text="A better way to give" textFill="#10308b">
-                           <font>
-                              <Font name="System Bold" size="32.0" />
-                           </font>
-                           <VBox.margin>
-                              <Insets left="50.0" top="25.0" />
-                           </VBox.margin>
-                        </Label>
-                        <Label text="Featured Organization this week:">
-                           <padding>
-                              <Insets left="50.0" top="20.0" />
-                           </padding>
-                        </Label>
-                     </children>
-                  </VBox>
-                  <VBox alignment="CENTER" prefHeight="54.0" prefWidth="100.0">
-                     <children>
-                        <Label fx:id="Total_Orgnisasjon" text="0">
-                           <font>
-                              <Font size="20.0" />
-                           </font>
-                           <VBox.margin>
-                              <Insets />
-                           </VBox.margin>
-                           <padding>
-                              <Insets top="5.0" />
-                           </padding>
-                        </Label>
-                        <Label text="Organizations" />
-                     </children>
-                  </VBox>
-                  <VBox alignment="CENTER" prefHeight="200.0" prefWidth="100.0">
-                     <children>
-                        <Label fx:id="Total_Donations" text="0">
-                           <font>
-                              <Font size="20.0" />
-                           </font>
-                           <VBox.margin>
-                              <Insets top="5.0" />
-                           </VBox.margin>
-                        </Label>
-                        <Label text="NOK Donated" />
-                     </children>
-                  </VBox>
-                  <VBox alignment="CENTER" prefHeight="200.0" prefWidth="100.0">
-                     <children>
-                        <Label fx:id="PreApproved_Percentage" text="0%">
-                           <font>
-                              <Font size="20.0" />
-                           </font>
-                           <VBox.margin>
-                              <Insets top="5.0" />
-                           </VBox.margin>
-                        </Label>
-                        <Label text="Verified" />
-                     </children>
-                  </VBox>
-               </children>
-            </HBox>
-            <StackPane prefHeight="150.0" prefWidth="1850.0" style="-fx-background-color: rgba(47, 143, 139, 0.5); -fx-background-radius: 35; -fx-border-color: #3f8f90; -fx-border-radius: 35; -fx-border-width: 2; -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.25), 10, 0.2, 0, 4);">
-               <VBox.margin>
-                  <Insets left="20.0" right="20.0" />
-               </VBox.margin>
-               <children>
-                  <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="40.0" StackPane.alignment="CENTER_LEFT">
-                     <padding>
-                        <Insets bottom="20.0" left="30.0" right="30.0" top="20.0" />
-                     </padding>
-                     <children>
-                        <Button mnemonicParsing="false" style="-fx-background-color: transparent; -fx-font-size: 42; -fx-text-fill: black;" text="&lt;">
-                           <font>
-                              <Font size="42.0" />
-                           </font>
-                        </Button>
-                        <Region prefHeight="171.0" prefWidth="252.0" HBox.hgrow="ALWAYS" />
-                        <StackPane prefHeight="171.0" prefWidth="509.0">
-                           <children>
-                              <VBox alignment="TOP_CENTER" fillWidth="false" prefHeight="171.0" prefWidth="228.0" spacing="20.0" StackPane.alignment="CENTER_LEFT">
-                                 <children>
-                                    <Label fx:id="Carosel_Organisasjon" alignment="CENTER" prefHeight="53.0" prefWidth="222.0" text="Organisasjon" textFill="WHITE" VBox.vgrow="ALWAYS">
-                                       <font>
-                                          <Font size="36.0" />
-                                       </font>
-                                    </Label>
-                                    <Label fx:id="Carosel_Beskrivelse" alignment="TOP_CENTER" maxWidth="500.0" prefHeight="32.0" prefWidth="182.0" text="Beskrivelse" textFill="WHITE" wrapText="true" VBox.vgrow="ALWAYS">
-                                       <font>
-                                          <Font size="22.0" />
-                                       </font>
-                                    </Label>
-                                    <HBox alignment="TOP_CENTER" prefHeight="45.0" prefWidth="180.0" style="-fx-background-color: rgba(47, 143, 139, 1); -fx-background-radius: 30; -fx-padding: 10 18 10 18;">
-                                       <children>
-                                          <Label text="✓" textFill="LIME">
-                                             <font>
-                                                <Font size="16.0" />
-                                             </font>
-                                          </Label>
-                                          <Label text="Verified by IK" textFill="WHITE">
-                                             <font>
-                                                <Font size="16.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="5.0" />
-                                             </HBox.margin>
-                                          </Label>
-                                       </children>
-                                    </HBox>
-                                 </children>
-                              </VBox>
-                           </children>
-                        </StackPane>
-                        <Region prefHeight="171.0" prefWidth="16.0" HBox.hgrow="ALWAYS" />
-                        <VBox alignment="CENTER" prefHeight="152.0" prefWidth="301.0" spacing="18.0">
-                           <children>
-                              <Button mnemonicParsing="false" onAction="#switchToDonationPage" style="-fx-background-color: #2E7D32; -fx-text-fill: white; -fx-font-size: 16; -fx-font-weight: bold; -fx-background-radius: 30; -fx-padding: 15 35 15 35; -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 8, 0.2, 0, 3);" text="Donate Now" />
-                              <Button mnemonicParsing="false" onAction="#switchToCharityPage" style="-fx-background-color: #163AA8; -fx-text-fill: white; -fx-font-size: 16; -fx-font-weight: bold; -fx-background-radius: 30; -fx-padding: 15 35 15 35; -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 8, 0.2, 0, 3);" text="View details" />
-                           </children>
-                        </VBox>
-                        <Button alignment="CENTER_RIGHT" contentDisplay="RIGHT" mnemonicParsing="false" prefHeight="58.0" prefWidth="82.0" style="-fx-background-color: transparent; -fx-font-size: 42; -fx-text-fill: black;" text="&gt;">
-                           <font>
-                              <Font size="42.0" />
-                           </font>
-                        </Button>
-                     </children>
-                     <effect>
-                        <Blend />
-                     </effect>
-                  </HBox>
-               </children>
-            </StackPane>
-            <HBox prefWidth="1000.0">
-               <children>
-                  <VBox prefHeight="300.0" prefWidth="150.0" style="-fx-background-color: transparent; -fx-border-color: #2F8F8B; -fx-background-radius: 10; -fx-border-radius: 10; -fx-border-width: 2;">
-                     <HBox.margin>
-                        <Insets left="-10.0" />
-                     </HBox.margin>
-                     <children>
-                        <Label text="Categories: ">
-                           <font>
-                              <Font size="20.0" />
-                           </font>
-                           <VBox.margin>
-                              <Insets left="20.0" />
-                           </VBox.margin>
-                        </Label>
-                        <CheckBox fx:id="verifiedFilter" onAction="#handleCategoryFilterChange"  mnemonicParsing="false" text="Verified by IK">
-                           <font>
-                              <Font size="12.0" />
-                           </font>
-                           <VBox.margin>
-                              <Insets left="20.0" />
-                           </VBox.margin>
-                           <padding>
-                              <Insets top="10.0" />
-                           </padding>
-                        </CheckBox>
-                        <CheckBox fx:id="childrenFilter" onAction="#handleCategoryFilterChange" mnemonicParsing="false" text="Children">
-                           <font>
-                              <Font size="12.0" />
-                           </font>
-                           <padding>
-                              <Insets top="10.0" />
-                           </padding>
-                           <VBox.margin>
-                              <Insets left="20.0" />
-                           </VBox.margin>
-                        </CheckBox>
-                        <CheckBox fx:id="healthFilter" onAction="#handleCategoryFilterChange" mnemonicParsing="false" text="Health">
-                           <font>
-                              <Font size="12.0" />
-                           </font>
-                           <padding>
-                              <Insets top="10.0" />
-                           </padding>
-                           <VBox.margin>
-                              <Insets left="20.0" />
-                           </VBox.margin>
-                        </CheckBox>
-                        <CheckBox fx:id="emergencyAidFilter" onAction="#handleCategoryFilterChange" mnemonicParsing="false" text="Emergency aid">
-                           <font>
-                              <Font size="12.0" />
-                           </font>
-                           <padding>
-                              <Insets top="10.0" />
-                           </padding>
-                           <VBox.margin>
-                              <Insets left="20.0" />
-                           </VBox.margin>
-                        </CheckBox>
-                     </children>
-                  </VBox>
-                  <ScrollPane fitToWidth="true" prefWidth="900.0" HBox.hgrow="ALWAYS">
-                     <content>
-                        <FlowPane fx:id="cardsContainer" hgap="20.0" vgap="20.0">
-                           <padding>
-                              <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
-                           </padding>
-                        </FlowPane>
-                     </content>
-                  </ScrollPane>
-               </children>
-               <padding>
-                  <Insets top="10.0" />
-               </padding>
-            </HBox>
-         </children>
-      </VBox>
-      <!-- Pull in the navbar from components with its own controller -->
-      <fx:include fx:id="footer" source="components/footer.fxml"/>
+      <!-- NAVBAR -->
+      <fx:include fx:id="navbar" source="components/navbar.fxml" GridPane.rowIndex="0" />
+
+      <!-- SCROLLABLE MAIN CONTENT -->
+      <ScrollPane fitToWidth="true" hbarPolicy="NEVER"
+                  style="-fx-background: transparent; -fx-background-color: transparent;"
+                  GridPane.rowIndex="1">
+         <content>
+            <VBox prefWidth="1200.0" style="-fx-background-color: #FFFFFF;">
+
+               <!-- STATS + HEADER ROW -->
+               <HBox prefHeight="100.0" prefWidth="1200.0">
+                  <children>
+                     <VBox prefHeight="100.0" prefWidth="450.0">
+                        <children>
+                           <Label text="A better way to give" textFill="#10308b">
+                              <font><Font name="System Bold" size="32.0" /></font>
+                              <VBox.margin><Insets left="50.0" top="25.0" /></VBox.margin>
+                           </Label>
+                           <Label textFill="black" text="Featured Organization this week:">
+                              <padding><Insets left="50.0" top="20.0" /></padding>
+                           </Label>
+                        </children>
+                     </VBox>
+                     <VBox alignment="CENTER" prefHeight="54.0" prefWidth="100.0">
+                        <children>
+                           <Label fx:id="Total_Orgnisasjon" textFill="black" text="0">
+                              <font><Font size="20.0" /></font>
+                           </Label>
+                           <Label textFill="black" text="Organizations" />
+                        </children>
+                     </VBox>
+                     <VBox alignment="CENTER" prefHeight="200.0" prefWidth="100.0">
+                        <children>
+                           <Label textFill="black" fx:id="Total_Donations" text="0">
+                              <font><Font size="20.0" /></font>
+                           </Label>
+                           <Label textFill="black" text="NOK Donated" />
+                        </children>
+                     </VBox>
+                     <VBox alignment="CENTER" prefHeight="200.0" prefWidth="100.0">
+                        <children>
+                           <Label textFill="black" fx:id="PreApproved_Percentage" text="0%">
+                              <font><Font size="20.0" /></font>
+                           </Label>
+                           <Label textFill="black" text="Verified" />
+                        </children>
+                     </VBox>
+                  </children>
+               </HBox>
+
+               <!-- FEATURED CHARITY CARD -->
+               <StackPane prefHeight="150.0" style="-fx-background-color: rgba(47, 143, 139, 0.5); -fx-background-radius: 35; -fx-border-color: #3f8f90; -fx-border-radius: 35; -fx-border-width: 2;">
+                  <VBox.margin><Insets bottom="20.0" left="20.0" right="20.0" /></VBox.margin>
+                  <children>
+                     <HBox alignment="CENTER_LEFT" prefHeight="100.0" StackPane.alignment="CENTER_LEFT">
+                        <padding><Insets bottom="20.0" left="30.0" right="30.0" top="20.0" /></padding>
+                        <children>
+                           <VBox alignment="CENTER_LEFT" spacing="20.0" prefWidth="540.0">
+                              <children>
+                                 <Label fx:id="Carosel_Organisasjon" text="Organisasjon" textFill="WHITE">
+                                    <font><Font size="36.0" /></font>
+                                 </Label>
+                                 <Label fx:id="Carosel_Beskrivelse" maxWidth="734.0" text="Beskrivelse" textFill="WHITE" wrapText="true">
+                                    <font><Font size="22.0" /></font>
+                                 </Label>
+                                 <HBox style="-fx-background-color: rgba(47,143,139,1); -fx-background-radius: 30; -fx-padding: 10 18 10 18;">
+                                    <children>
+                                       <Label text="✓" textFill="LIME"><font><Font size="16.0" /></font></Label>
+                                       <Label text="Verified by IK" textFill="WHITE">
+                                          <font><Font size="16.0" /></font>
+                                          <HBox.margin><Insets left="5.0" /></HBox.margin>
+                                       </Label>
+                                    </children>
+                                 </HBox>
+                              </children>
+                           </VBox>
+                           <VBox alignment="CENTER_RIGHT" spacing="18.0" HBox.hgrow="ALWAYS">
+                              <children>
+                                 <Button onAction="#switchToDonationPage"
+                                         style="-fx-background-color: #2E7D32; -fx-text-fill: white; -fx-font-size: 16; -fx-font-weight: bold; -fx-background-radius: 30; -fx-padding: 15 35 15 35;"
+                                         text="Donate Now" />
+                                 <Button onAction="#switchToCharityPage"
+                                         style="-fx-background-color: #163AA8; -fx-text-fill: white; -fx-font-size: 16; -fx-font-weight: bold; -fx-background-radius: 30; -fx-padding: 15 35 15 35;"
+                                         text="View details" />
+                              </children>
+                              <HBox.margin><Insets left="80.0" /></HBox.margin>
+                           </VBox>
+                        </children>
+                     </HBox>
+                  </children>
+               </StackPane>
+
+               <!-- FILTERS + CARDS -->
+               <HBox prefWidth="1200.0" VBox.vgrow="ALWAYS">
+                  <padding><Insets top="10.0" /></padding>
+                  <children>
+                     <!-- FILTER SIDEBAR -->
+                     <VBox prefWidth="160.0"
+                           style="-fx-background-color: transparent; -fx-border-color: #2F8F8B; -fx-border-radius: 10; -fx-border-width: 2;">
+                        <children>
+                           <Label textFill="black" text="Categories:">
+                              <font><Font size="20.0" /></font>
+                              <VBox.margin><Insets left="20.0" top="10.0" /></VBox.margin>
+                           </Label>
+                           <CheckBox textFill="black" fx:id="verifiedFilter" onAction="#handleCategoryFilterChange" text="Verified by IK">
+                              <font><Font size="12.0" /></font>
+                              <padding><Insets top="10.0" /></padding>
+                              <VBox.margin><Insets left="20.0" /></VBox.margin>
+                           </CheckBox>
+                           <CheckBox textFill="black" fx:id="childrenFilter" onAction="#handleCategoryFilterChange" text="Children">
+                              <font><Font size="12.0" /></font>
+                              <padding><Insets top="10.0" /></padding>
+                              <VBox.margin><Insets left="20.0" /></VBox.margin>
+                           </CheckBox>
+                           <CheckBox textFill="black" fx:id="healthFilter" onAction="#handleCategoryFilterChange" text="Health">
+                              <font><Font size="12.0" /></font>
+                              <padding><Insets top="10.0" /></padding>
+                              <VBox.margin><Insets left="20.0" /></VBox.margin>
+                           </CheckBox>
+                           <CheckBox textFill="black" fx:id="emergencyAidFilter" onAction="#handleCategoryFilterChange" text="Emergency aid">
+                              <font><Font size="12.0" /></font>
+                              <padding><Insets top="10.0" /></padding>
+                              <VBox.margin><Insets left="20.0" bottom="10.0" /></VBox.margin>
+                           </CheckBox>
+                        </children>
+                     </VBox>
+
+                     <!-- CARDS - no inner ScrollPane needed, outer one handles it -->
+                     <FlowPane fx:id="cardsContainer" hgap="20.0" vgap="20.0" HBox.hgrow="ALWAYS">
+                        <padding><Insets bottom="20.0" left="20.0" right="20.0" top="20.0" /></padding>
+                     </FlowPane>
+                  </children>
+               </HBox>
+
+            </VBox>
+         </content>
+      </ScrollPane>
+
+      <!-- FOOTER -->
+      <fx:include fx:id="footer" source="components/footer.fxml" GridPane.rowIndex="2" />
    </children>
 </GridPane>