Add city banner on index

src/config.ts

@@ -1,11 +1,31 @@
 import UbuntuIndiaLogo from "@assets/UbuntuIndia.svg"
+import JaipurPhoto from "@assets/jaipur.jpg"
 
 export const config = {
     siteTitle: "UbuCon Asia 2024",
     blog: {
         rssFeedUrl: "https://blog.ubucon.asia/tags/uca24/index.xml",
         viewMoreUrl: "https://blog.ubucon.asia/tags/uca24"
     },
+    cityBanner: {
+        title: "Let's meet in the pink city of innovation!",
+        description: 'Learn about the Jaipur, India the city where UbuCon Asia 2024 will be held. And plan your trip today!',
+        image: JaipurPhoto.src,
+        buttons: [
+            {
+                label: 'Venue & Safety',
+                url: '/venue-and-travel/venue-and-safety'
+            },
+            {
+                label: 'Getting to the city',
+                url: '/venue-and-travel/getting-to-city'
+            },
+            {
+                label: 'Exploring the city',
+                url: '/venue-and-travel/explore-city'
+            },
+        ]
+    },
     footer: {
         copyright: "© 2024-Present UbuCon Asia Committee. Ubuntu and Canonical are registered trademarks of Canonical Ltd. Unless otherwise noted, content licensed under CC BY 4.0 source code under MIT.",
         contactUs: "mailto:[email protected]",

src/pages/index.astro

@@ -2,7 +2,7 @@
 import Shell from "@layouts/Shell.astro";
 import BlogFeed from "@components/BlogFeed.astro";
 import { config } from "../config";
-import { Strip, Col, Row  } from "@canonical/react-components";
+import { Strip, Col, Row, Card, Button } from "@canonical/react-components";
 import uca24logo from "@assets/logo.svg";
 import logoPlaceHolder from "@assets/logo_placeholder.svg";
 ---
@@ -44,7 +44,7 @@ import logoPlaceHolder from "@assets/logo_placeholder.svg";
             </Col>
         </Row>
     </Strip>
-    <BlogFeed/>
+    <BlogFeed />
     <Strip bordered>
         <h4>Featured speakers</h4>
         <Row>
@@ -151,6 +151,29 @@ import logoPlaceHolder from "@assets/logo_placeholder.svg";
             </Col>
         </Row>
     </Strip>
+    <section
+        class="p-strip--image is-light"
+        style={{
+            backgroundImage: `url('${config.cityBanner.image}') `,
+            backgroundSize: "cover",
+            backgroundPosition: "center center"
+        }}
+    >
+        <Row>
+            <Col size={6} emptyLarge={7}>
+                <Card title={config.cityBanner.title} overlay>
+                    <p>{config.cityBanner.description}</p>
+                    {
+                        config.cityBanner.buttons.map((item) => (
+                            <Button element="a" href={item.url}>
+                                {item.label}
+                            </Button>
+                        ))
+                    }
+                </Card>
+            </Col>
+        </Row>
+    </section>
     <Strip type="light">
         <h2>Sponsors</h2>
         <Row>