Offsites pages [WIP]

contents/handbook/company/offsites/2023-aruba.mdx

@@ -0,0 +1,45 @@
+---
+title: "March 2023: Oranjestad, Aruba"
+sidebar: Handbook
+showTitle: false
+hideAnchor: true
+---
+
+<!-- Temp, until it's added correctly below -->
+![](../../../images/offsites/2023-aruba/offsite-badge-2023-aruba.png)
+
+<OffsiteHeader 
+  badge="../../../images/offsites/2023-aruba/offsite-badge-2023-aruba.png"
+  location="Oranjestad, Aruba" 
+  date="March 2023" 
+  team="Whole company" 
+/>
+
+<OffsiteDescription>
+Aruba is one happy island. (Also very windy.) The team stayed at the all-inclusive Renaissance Hotel and enjoyed some R&R on their private island. We enjoyed an afternoon on a catamaran and went snorkeling.
+</OffsiteDescription>
+
+<OffsiteAttendees count="28" />
+
+<OffsitePhotos />
+
+<!-- Temp, until it's added correctly above -->
+![](../../../images/offsites/2023-aruba/photos/PXL_20230327_193403662.MP.jpg)
+
+<OffsiteHackathons>
+  <OffsiteHackathonsItem name="Event-based automations" url="#" />
+  <OffsiteHackathonsItem name="Hedgehog mode for Toolbar" url="#" />
+  <OffsiteHackathonsItem name="Beta feature opt-in" url="#" />
+  <OffsiteHackathonsItem name="Multi-tenant data warehouse" url="#" />
+  <OffsiteHackathonsItem name="AI docs chatbot" url="#" />
+  <OffsiteHackathonsItem name="User-facing bug report portal" url="#" />
+  <OffsiteHackathonsItem name="Dashboard templates" url="#" />
+  <OffsiteHackathonsItem name="ClickHouse manager" url="#" />
+</OffsiteHackathons>
+
+<OffsiteMerch>
+  <OffsiteMerchItem name="Beach towel" image="/contents/images/offsites/2023-aruba/merch/aruba-towel.png" />
+  <OffsiteMerchItem name="Tote bag" image="/contents/images/offsites/2023-aruba/merch/aruba-tote.png" />
+  <OffsiteMerchItem name="Laptop stickers" image="/contents/images/offsites/2023-aruba/merch/aruba-stickers.png" />
+</OffsiteMerch>
+

src/components/.mdxignore

@@ -138,4 +138,4 @@ TestimonialsTable
 Templates
 TemplatesList
 Tutorials
-UserLogosCarouse
+UserLogosCarousel

src/components/OffsiteAttendees/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+interface OffsiteAttendeesProps {
+    count: number
+}
+
+export const OffsiteAttendees = ({ count }: OffsiteAttendeesProps) => {
+    return (
+        <>
+            <h4 className="max-w-2xl mx-auto opacity-70 text-center text-sm font-normal">{count} attendees</h4>
+            <ul className="flex flex-wrap justify-center items-center space-x-1.5 max-w-2xl mx-auto gap-y-2 pb-8">
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+                <span className="bg-gray-accent h-8 w-8 rounded-full"></span>
+            </ul>
+        </>
+    )
+}

src/components/OffsiteDescription/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+interface OffsiteDescriptionProps {
+    children: JSX.Element[]
+}
+
+export const OffsiteDescription = ({ children }: OffsiteDescriptionProps) => {
+    return <p className="max-w-2xl mx-auto pb-4 opacity-70">{children}</p>
+}

src/components/OffsiteHackathons/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface OffsiteHackathonsProps {
+    children: JSX.Element[]
+}
+
+export const OffsiteHackathons = ({ children }: OffsiteHackathonsProps) => {
+    return (
+        <>
+            <h3 className="max-w-4xl text-center mx-auto">Hackathon projects</h3>
+            <div className="grid sm:grid-cols-2 lg:grid-cols-3 text-center items-center max-w-4xl mx-auto gap-1 pb-8">
+                {children}
+            </div>
+        </>
+    )
+}

src/components/OffsiteHackathonsItem/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+interface OffsiteHackathonsItemProps {
+    name: string
+    url?: string
+}
+
+export const OffsiteHackathonsItem = ({ name, url }: OffsiteHackathonsItemProps) => {
+    return (
+        <>
+            {url ? (
+                <a
+                    href={url}
+                    className="block relative px-2 !py-2 rounded hover:!bg-gray-accent-light hover:scale-[1.01] hover:top-[-.5px] active:scale-[1] active:top-[.5px] !bg-none"
+                >
+                    {name}
+                </a>
+            ) : (
+                <>{name}</>
+            )}
+        </>
+    )
+}

src/components/OffsiteHeader/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+interface OffsiteHeaderProps {
+    badge?: string
+    location: string
+    date: string
+    team?: string
+}
+
+export const OffsiteHeader = ({ badge, location, date, team }: OffsiteHeaderProps) => {
+    return (
+        <header className="text-center pb-12">
+            {badge && (
+                <figure>
+                    <img className="mx-auto w-[175px]" alt={`${date} offsite to ${location}`} src={badge} />
+                </figure>
+            )}
+
+            <h1 className="text-5xl">{location}</h1>
+            <div className="opacity-70">
+                {date} {team && <> &bull; {team}</>}
+            </div>
+        </header>
+    )
+}

src/components/OffsiteMerch/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface OffsiteMerchProps {
+    children: JSX.Element[]
+}
+
+export const OffsiteMerch = ({ children }: OffsiteMerchProps) => {
+    return (
+        <>
+            <h3 className="max-w-4xl text-center mx-auto">Limited edition merch</h3>
+            <div className="grid sm:grid-cols-2 lg:grid-cols-3 text-center items-center max-w-4xl mx-auto gap-8 pb-8">
+                {children}
+            </div>
+        </>
+    )
+}

src/components/OffsiteMerchItem/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+interface OffsiteMerchItemProps {
+    name: string
+    image?: string
+}
+
+export const OffsiteMerchItem = ({ name, image }: OffsiteMerchItemProps) => {
+    return (
+        <div>
+            <img src={image} alt="" className="w-full h-full object-contain" />
+            {name}
+        </div>
+    )
+}

src/components/OffsitePhotos/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const OffsitePhotos = () => {
+    return (
+        <section className="pb-6">
+            Photos go here
+            {/* see photos in 2023-aruba folder */}
+        </section>
+    )
+}

src/mdxGlobalComponents.js

@@ -11,6 +11,14 @@ import { GDPRForm } from './components/GDPRForm'
 import { HiddenSection } from './components/HiddenSection'
 import { LPCTA } from './components/LPCTA'
 import { NewsletterTutorial } from './components/NewsletterTutorial'
+import { OffsiteAttendees } from './components/OffsiteAttendees'
+import { OffsiteDescription } from './components/OffsiteDescription'
+import { OffsiteHackathons } from './components/OffsiteHackathons'
+import { OffsiteHackathonsItem } from './components/OffsiteHackathonsItem'
+import { OffsiteHeader } from './components/OffsiteHeader'
+import { OffsiteMerch } from './components/OffsiteMerch'
+import { OffsiteMerchItem } from './components/OffsiteMerchItem'
+import { OffsitePhotos } from './components/OffsitePhotos'
 import { OverflowXSection } from './components/OverflowXSection'
 import { Quote } from './components/Pricing/Quote'
 import { ProductLayout } from './components/ProductLayout'
@@ -30,6 +38,14 @@ export const shortcodes = {
     HiddenSection,
     LPCTA,
     NewsletterTutorial,
+    OffsiteAttendees,
+    OffsiteDescription,
+    OffsiteHackathons,
+    OffsiteHackathonsItem,
+    OffsiteHeader,
+    OffsiteMerch,
+    OffsiteMerchItem,
+    OffsitePhotos,
     OverflowXSection,
     Quote,
     ProductLayout,

src/sidebars/handbook.json

@@ -106,7 +106,17 @@
             },
             {
                 "name": "Offsites",
-                "url": "/handbook/company/offsites"
+                "url": "",
+                "children": [
+                    {
+                        "name": "How we run offsites",
+                        "url": "/handbook/company/offsites"
+                    },
+                    {
+                        "name": "2023: Aruba",
+                        "url": "/handbook/company/offsites/2023-aruba"
+                    }
+                ]
             },
             {
                 "name": "Security",