Expand Barcamp homepage FAQ

src/components/BarcampPage.astro

@@ -107,19 +107,16 @@ const trackScheduleGroups = {
       <section class="barcamp-section barcamp-section--intro">
         <div>
           <p class="eyebrow">What is a Barcamp?</p>
-          <h2>The room makes the program.</h2>
+          <h2>An un-conference for people who want to participate.</h2>
         </div>
         <div class="barcamp-section__copy">
           <p>
-            A Barcamp is an open, participatory unconference. Instead of arriving to a
+            Barcamp is an un-conference that anybody can attend and where anybody can
-            fully fixed speaker list, participants help create the agenda by proposing
+            speak about anything.
-            sessions, joining conversations, and moving toward the rooms where they can
-            learn or contribute the most.
           </p>
           <p>
-            Sessions can be talks, demos, teach-ins, open discussions, problem clinics,
+            There are no attendees. Only participants. If you are not talking, you are
-            reading circles, or small workshops. The common thread is simple: everyone
+            helping out one way or another.
-            has permission to shape the day.
           </p>
         </div>
       </section>
@@ -128,55 +125,229 @@ const trackScheduleGroups = {
         <article>
           <span aria-hidden="true">01</span>
           <h3>Propose a session</h3>
-          <p>Share an idea, a question, a demo, a problem, or a work-in-progress before the event.</p>
+          <p>
+            Add your name to the participation list, then add your topic and a brief
+            description to the talk list in the shared document.
+          </p>
         </article>
         <article>
           <span aria-hidden="true">02</span>
-          <h3>Show up early</h3>
+          <h3>Claim slots on the day</h3>
-          <p>Time slots open in person on the day, first come first served.</p>
+          <p>
+            The session wiki opens at the venue. Speakers show up and add their names
+            to an available room and slot.
+          </p>
         </article>
         <article>
           <span aria-hidden="true">03</span>
           <h3>Move freely</h3>
-          <p>Find the conversations that are useful to you, and leave room for serendipity.</p>
+          <p>
+            This is not a captive audience. Everybody is free to move out of any talk
+            at any time.
+          </p>
         </article>
       </section>
 
-      <section class="barcamp-section">
+      <section class="barcamp-faq" aria-labelledby="barcamp-faq-heading">
+        <div class="barcamp-faq__head">
           <div>
-          <p class="eyebrow">Who should come?</p>
+            <p class="eyebrow">Barcamp basics</p>
-          <h2>Curious people with something to share.</h2>
+            <h2 id="barcamp-faq-heading">Questions people usually ask.</h2>
+          </div>
+          <div class="hero-actions">
+            <a
+              class="button button--barcamp"
+              href={barcampProposalDocUrl}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Add your topic
+            </a>
+            <a class="button button--secondary" href={barcampRegistrationUrl}>Register</a>
+          </div>
+        </div>
+
+        <div class="barcamp-qa-grid">
+          <article class="barcamp-qa">
+            <h3>Anything?</h3>
+            <p>
+              For all practical purposes, yes. If we think you are trying to start a riot,
+              or if we think your talk would lead to any crowd control issues, we will not
+              be able to host your session.
+            </p>
+          </article>
+          <article class="barcamp-qa">
+            <h3>But what should I talk about?</h3>
+            <p>
+              Preferably something that other people find interesting. This is not a captive
+              audience; everybody is free to move out of any talk at any time.
+            </p>
+          </article>
+          <article class="barcamp-qa">
+            <h3>Nice, I would like to talk. How do I sign up?</h3>
+            <p>
+              First, add your name to the
+              <a href={barcampProposalDocUrl} target="_blank" rel="noreferrer">
+                participation list
+              </a>.
+              Then add your topic and a brief description to the talk list in the second
+              tab on the same document.
+            </p>
+          </article>
+          <article class="barcamp-qa">
+            <h3>I would just like to attend. How do I sign up?</h3>
+            <p>
+              You do not. There are no attendees. Only participants. If you are not
+              talking, you are helping out one way or another. <a href={barcampRegistrationUrl}>Register here</a>.
+            </p>
+          </article>
+          <article class="barcamp-qa">
+            <h3>What do I pay to participate?</h3>
+            <p>
+              Nothing. But we will not begrudge you bringing in some swag. We are suckers
+              for freebies.
+            </p>
+          </article>
+          <article class="barcamp-qa">
+            <h3>Can I do my sales pitch here?</h3>
+            <p>
+              Sure, but you are going to be talking to a bunch of people who are likely to
+              get annoyed and leave once they figure out this is a sales pitch. So you have
+              no incentive to do this.
+            </p>
+          </article>
+        </div>
+      </section>
+
+      <section class="barcamp-section barcamp-section--schedule">
+        <div>
+          <p class="eyebrow">Schedule</p>
+          <h2>The session wiki decides the day.</h2>
         </div>
         <div class="barcamp-section__copy">
           <p>
-            Students, researchers, teachers, builders, designers, writers, organizers,
+            There will be three rooms at the venue. Each room is a track. We set up a
-            artists, engineers, and curious local participants are all welcome. The day
+            whiteboard with time slots for each track; this is called the session wiki.
-            is strongest when the room has different kinds of expertise and different
+            Speakers show up and add their names to a room and slot of their choice that
-            kinds of questions.
+            is available.
+          </p>
+          <p>
+            Each time slot is 20 minutes long, with 10 minutes after the slot for
+            switch-over. Time slots are strictly enforced; there are no exceptions.
+          </p>
+          <p>
+            There are also informal areas: staircases, verandahs, hallways, and other
+            nearby spaces. These are BoF sessions. Speakers can note these on the session
+            wiki as well. There are no time limits for these, but please do not be a
+            crowd-control headache. We will nudge you out, or ask you to find another
+            place to talk.
+          </p>
+          <p>
+            Want to host a talk for longer than 20 minutes? Keep it short. Seriously. If
+            somehow you are able to convince people to listen beyond 20 minutes, go host a
+            BoF session.
           </p>
-          <div class="barcamp-topic-strip" aria-label="Possible session themes">
-            <span>computing</span>
-            <span>education</span>
-            <span>games</span>
-            <span>math</span>
-            <span>design</span>
-            <span>civic tech</span>
-            <span>science</span>
-            <span>culture</span>
         </div>
+      </section>
+
+      <section class="barcamp-faq barcamp-faq--practical" aria-labelledby="barcamp-practical-heading">
+        <div class="barcamp-faq__head">
+          <div>
+            <p class="eyebrow">Practicalities</p>
+            <h2 id="barcamp-practical-heading">Food, stay, sponsorship, and what next.</h2>
+          </div>
+        </div>
+
+        <div class="barcamp-qa-grid">
+          <article class="barcamp-qa barcamp-qa--wide">
+            <h3>This is cool. Whom do I discuss with for sponsorship slots?</h3>
+            <p>
+              Due to the very open and liberal nature of this event, we do not do classical
+              sponsorships. Sponsorships come with expectations around sponsored talks,
+              stalls, and audience lists, all of which participants tend to avoid.
+            </p>
+            <p>
+              Regardless, if you would like to put in some money with no strings attached,
+              or perhaps pay for travel or stay for some participants or buy some food
+              during the event, please email
+              <a href="mailto:neeldhara.misra@gmail.com">neeldhara.misra@gmail.com</a>
+              or DM at <a href="https://wa.me/919712990170">+91 9712990170 on WhatsApp</a>.
+            </p>
+          </article>
+          <article class="barcamp-qa barcamp-qa--wide">
+            <h3>I am coming in from outside the city. Where do I stay?</h3>
+            <p>
+              There are some hotels nearby: Fortune Haveli Inn, GIFT City Club, Grand
+              Mercure, and The Fern.
+            </p>
+            <p>
+              If you would like to be hosted at the campus guest house, please indicate as
+              much when you register. A limited number of slots will be available and they
+              will be prioritized for speakers and organizers. Names added to the waitlist
+              on a given day will be batched and sent for reservations the next day, so
+              confirmations should come quickly.
+            </p>
+            <p>
+              If you stay near the venue and are happy to host a Barcamper or two, please
+              email <a href="mailto:neeldhara.misra@gmail.com">neeldhara.misra@gmail.com</a>
+              or DM at <a href="https://wa.me/919712990170">+91 9712990170 on WhatsApp</a>.
+            </p>
+          </article>
+          <article class="barcamp-qa">
+            <h3>Where do I get food?</h3>
+            <p>
+              There are canteens close to the venue, there is a student mess where you can
+              walk in, and you can Zomato or Swiggy some grub as well.
+            </p>
+          </article>
+          <article class="barcamp-qa">
+            <h3>How many people are going to show up?</h3>
+            <p>
+              This is not a classical corporate or academic event with a ton of planning.
+              We are generally happy for a few dozen people to show up. Due to venue
+              capacity limits, registrations will close at 200 participants.
+            </p>
+          </article>
+          <article class="barcamp-qa">
+            <h3>I have something interesting to talk about, but I have stage fright.</h3>
+            <p>
+              Do not worry; talk to an organizer. We are mostly a bunch of introverted
+              nerds. We will try to pair you up with someone you can go tandem with or set
+              you up on a fireside chat.
+            </p>
+          </article>
+          <article class="barcamp-qa">
+            <h3>What next?</h3>
+            <p>
+              Join the WhatsApp groups: broadcast for announcements only, and watercooler
+              for interactions. Invite interesting people to attend and share a link to
+              this page with them.
+            </p>
+          </article>
         </div>
       </section>
 
       <section class="barcamp-cta">
         <div>
           <p class="eyebrow">Registration</p>
-          <h2>Let us know you are coming.</h2>
+          <h2>Register, propose, and show up early.</h2>
           <p>
-            Registration helps us plan lunch, room capacity, campus entry, and the
+            Registration helps us plan room capacity, campus entry, and participant
-            participant updates for the day.
+            updates. Session slots are claimed on the day, so arrive early if you really
+            want to talk.
           </p>
         </div>
+        <div class="barcamp-cta__actions">
           <a class="button button--barcamp" href={barcampRegistrationUrl}>Register now</a>
+          <a
+            class="button button--secondary"
+            href={barcampProposalDocUrl}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Propose a session
+          </a>
+        </div>
       </section>
     </div>
   )}

src/styles/global.css

@@ -1362,6 +1362,65 @@ button.event-badge::before {
   color: color-mix(in oklch, var(--foreground) 76%, white);
 }
 
+.barcamp-faq {
+  display: grid;
+  gap: 1rem;
+}
+
+.barcamp-faq__head {
+  display: grid;
+  grid-template-columns: minmax(220px, 0.72fr) auto;
+  gap: 1.2rem;
+  align-items: end;
+  border-bottom: var(--border-hairline) solid var(--border);
+  padding-bottom: 1rem;
+}
+
+.barcamp-faq__head .hero-actions {
+  justify-content: end;
+}
+
+.barcamp-qa-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.85rem;
+}
+
+.barcamp-qa {
+  display: grid;
+  gap: 0.65rem;
+  align-content: start;
+  border-radius: 8px;
+  background: color-mix(in oklch, var(--card) 92%, #fff6df);
+  box-shadow: 0 0 0 1px rgba(39, 33, 26, 0.08);
+  padding: 1.2rem;
+}
+
+.barcamp-qa--wide {
+  grid-column: span 2;
+}
+
+.barcamp-qa h3 {
+  font-size: 1.28rem;
+  line-height: 1.22;
+}
+
+.barcamp-qa p {
+  color: var(--muted);
+}
+
+.barcamp-qa p + p {
+  margin-top: 0.1rem;
+}
+
+.barcamp-qa a {
+  color: color-mix(in oklch, var(--foreground) 76%, var(--primary));
+  font-weight: 700;
+  text-decoration: underline;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.16em;
+}
+
 .barcamp-card-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1421,6 +1480,13 @@ button.event-badge::before {
   justify-self: end;
 }
 
+.barcamp-cta__actions {
+  display: flex;
+  gap: 0.7rem;
+  justify-content: end;
+  flex-wrap: wrap;
+}
+
 .event-page-heading--barcamp {
   max-width: 1180px;
   width: min(1180px, calc(100% - 2rem));
@@ -1781,6 +1847,7 @@ button.event-badge::before {
   .barcamp-hero,
   .barcamp-section,
   .barcamp-cta,
+  .barcamp-faq__head,
   .barcamp-schedule__head,
   .barcamp-proposal-callout {
     grid-template-columns: 1fr;
@@ -1826,6 +1893,11 @@ button.event-badge::before {
     justify-self: start;
   }
 
+  .barcamp-cta__actions,
+  .barcamp-faq__head .hero-actions {
+    justify-content: start;
+  }
+
   .barcamp-proposal-callout .button {
     justify-self: start;
   }
@@ -1924,6 +1996,7 @@ button.event-badge::before {
 
   .barcamp-facts dl,
   .barcamp-card-grid,
+  .barcamp-qa-grid,
   .barcamp-participant-grid,
   .barcamp-tablist,
   .barcamp-slot,
@@ -1956,8 +2029,10 @@ button.event-badge::before {
   }
 
   .barcamp-card-grid article,
-  .barcamp-card-grid article:nth-child(n) {
+  .barcamp-card-grid article:nth-child(n),
+  .barcamp-qa--wide {
     min-height: auto;
+    grid-column: auto;
   }
 
   .barcamp-slot-group__head {