diff --git a/src/App.tsx b/src/App.tsx index 885564f..a2c3302 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,7 @@ import { Contact } from "@/routes/Contact" import { Board } from "./routes/Board" import { Inbox } from "./routes/Inbox" import { Presentations } from "./routes/Presentations" +import { Resilience } from "./routes/Resilience" import { createRoot } from "react-dom/client" import { DailyProvider } from "@daily-co/daily-react" import Daily from "@daily-co/daily-js" @@ -25,6 +26,7 @@ function App() { } /> } /> } /> + } /> diff --git a/src/css/style.css b/src/css/style.css index 4a59c0d..429f403 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -539,4 +539,97 @@ p:has(+ ol) { .presentation-embed iframe { height: 400px; } +} + +/* Resilience page styles */ +.presentation-info { + margin-bottom: 3rem; + padding: 2rem; + background-color: #f8f9fa; + border-radius: 8px; + border-left: 4px solid #0366d6; +} + +.presentation-info h1 { + margin-bottom: 1rem; + color: #24292e; +} + +.presentation-info p { + margin-bottom: 1rem; + line-height: 1.6; +} + +.video-clips { + margin-top: 3rem; +} + +.video-clips h2 { + margin-bottom: 2rem; + color: #24292e; +} + +.video-section { + margin-bottom: 3rem; +} + +.video-section h3 { + margin-bottom: 1rem; + color: #24292e; + font-size: 1.2rem; +} + +.video-container { + position: relative; + width: 100%; + max-width: 560px; + margin: 0 auto; +} + +.video-container iframe { + width: 100%; + height: 315px; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.presentation-embed h2 { + margin-bottom: 1rem; + color: #24292e; +} + +.presentation-meta { + margin-top: 3rem; + padding: 2rem; + background-color: #f8f9fa; + border-radius: 8px; + border-top: 4px solid #0366d6; +} + +.presentation-meta p { + margin-bottom: 1rem; + line-height: 1.6; +} + +.presentation-meta a { + color: #0366d6; + text-decoration: none; + font-weight: 500; +} + +.presentation-meta a:hover { + text-decoration: underline; +} + +@media (max-width: 768px) { + .video-container iframe { + height: 200px; + } + + .presentation-info, + .presentation-meta { + padding: 1rem; + margin-left: -1rem; + margin-right: -1rem; + } } \ No newline at end of file diff --git a/src/routes/Presentations.tsx b/src/routes/Presentations.tsx index 2ed24aa..d331974 100644 --- a/src/routes/Presentations.tsx +++ b/src/routes/Presentations.tsx @@ -261,6 +261,31 @@ export function Presentations() { Video coming soon + +
+

Building Community Resilience in an Age of Crisis

+

Internet outages during crises, such as wars or environmental disasters, can disrupt communication, education, and access to vital information. Preparing for such disruptions is essential for communities and organizations operating in challenging environments.

+
+
+