diff --git a/app/assets/image1.png b/app/assets/image1.png index 6d94efe..334e9b9 100644 Binary files a/app/assets/image1.png and b/app/assets/image1.png differ diff --git a/app/components/footer.tsx b/app/components/footer.tsx index ca0a8a7..059195b 100644 --- a/app/components/footer.tsx +++ b/app/components/footer.tsx @@ -1,16 +1,32 @@ +import { useEffect, useState } from "react"; import { Link } from "react-router"; import location from "../assets/icons/location.svg"; import mail from "../assets/icons/mail.svg"; export default function Footer() { + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + setIsMobile(window.innerWidth < 870); + const handleResize = () => { + const newIsMobile = window.innerWidth < 870; + setIsMobile(newIsMobile); + }; + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + const footerStyle = { width: "100%", backgroundColor: "#05326C", - padding: "60px 80px", + padding: isMobile ? "32px 20px" : "60px 80px", display: "flex", - justifyContent: "space-between", + flexDirection: isMobile ? "column" : "row", + justifyContent: isMobile ? "center" : "space-between", alignItems: "center", boxSizing: "border-box", + flexWrap: "wrap", + gap: "32px", } as const; const leftSection = { @@ -33,8 +49,9 @@ export default function Footer() { const rightSection = { display: "flex", flexDirection: "column", - alignItems: "flex-end", + alignItems: isMobile ? "center" : "flex-end", gap: "32px", + width: isMobile ? "100%" : "auto", } as const; const logoStyle = { @@ -48,6 +65,8 @@ export default function Footer() { flexDirection: "row", gap: "20px", alignItems: "center", + flexWrap: "wrap", + justifyContent: "center", } as const; const circleStyle = { @@ -69,8 +88,12 @@ export default function Footer() { const navStyle = { display: "flex", - gap: "40px", + flexDirection: isMobile ? "column" : "row", + flexWrap: isMobile ? "nowrap" : "wrap", + gap: isMobile ? "12px" : "40px", color: "white", + justifyContent: isMobile ? "center" : "flex-end", + alignItems: isMobile ? "center" : "flex-end", fontSize: "1rem", textTransform: "none", } as const; @@ -182,7 +205,7 @@ export default function Footer() { Who We Are - Research + Resources Data diff --git a/app/components/planCard.tsx b/app/components/planCard.tsx index cc5906c..0e26b49 100644 --- a/app/components/planCard.tsx +++ b/app/components/planCard.tsx @@ -16,24 +16,16 @@ export default function PlanCard({ }: PlanCardProps) { return (
-
-
-

- {title} - Strategic Plan Icon -

+

+ {title} + Strategic Plan Icon +

-

- {summary} -

-
-
+

{summary}

); } diff --git a/app/root.tsx b/app/root.tsx index 3ce97b8..0fdd5a7 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -9,7 +9,6 @@ import { import type { Route } from "./+types/root"; import "./app.css"; -import Footer from "./components/footer"; export const links: Route.LinksFunction = () => [ { rel: "preconnect", href: "https://fonts.googleapis.com" }, @@ -40,7 +39,6 @@ export function Layout({ children }: { children: React.ReactNode }) { {children} -