Update

src/lib/config.js

@@ -17,5 +17,9 @@ export default {
         { title: 'Network states (with a privacy focus)' },
         { title: 'Solarpunk vs Lunarpunk' },
         { title: 'Veksl' }
-    ]
+    ],
+    tickets: [
+        { title: 'Conference ticket' },
+        { title: 'Party ticket' }
+    ],
 }

src/routes/+layout.svelte

@@ -3,11 +3,11 @@
   export let data;
 
   const menu = [
-    { title: 'About', url: '/#about' },
-    { title: 'Speakers', url: '/#speakers' },
-    { title: 'Program', url: '/#program' },
-    { title: 'Sponsors', url: '/#sponsors' },
-    { title: 'Ticket', url: '/#ticket', class: 'button' }
+    { title: 'About', url: '#about' },
+    { title: 'Speakers', url: '#speakers' },
+    { title: 'Program', url: '#program' },
+    { title: 'Sponsors', url: '#sponsors' },
+    { title: 'Ticket', url: '#ticket', class: 'button' }
   ]
 
 </script>

src/routes/+page.svelte

@@ -6,7 +6,7 @@
     <title>{data.config.title}</title>
 </svelte:head>
 
-<div class="bg-black">
+<div class="bg-black" id="about">
     <div class="middle-pane-medium pb-20 text-xl text-center mx-auto">
         <div class="py-32 w-1/2 mx-auto">
             For the first time in the internet’s history, web3 has made meaningful ownership of our own data possible. DeData Salon will bring 18th Century salons up to speed, inviting leaders in the space to discuss what data ownership will mean in the Web3 economy.
@@ -24,8 +24,34 @@
     </div>
 </div>
 
-<div class="">
+<div class="" id="speakers">
     <div class="middle-pane-medium pt-20 text-xl text-center mx-auto">
         <div class="section-header">Speakers</div>
+        <div class="h-screen"></div>
+    </div>
+</div>
+
+<div class="" id="program">
+    <div class="middle-pane-medium pt-20 text-xl text-center mx-auto">
+        <div class="section-header">Program</div>
+    </div>
+</div>
+
+<div class="" id="sponsors">
+    <div class="middle-pane-medium pt-20 text-xl text-center mx-auto">
+        <div class="section-header">Sponsors</div>
+    </div>
+</div>
+
+<div class="" id="ticket">
+    <div class="middle-pane-medium pt-20 text-xl text-center mx-auto">
+        <div class="section-header">Ticket</div>
+        <div class="grid grid-cols-2 mb-48 gap-10 w-2/3 mx-auto">
+            {#each data.config.tickets as tt}
+                <div class="border px-3 py-10">
+                    <div class="text-2xl">{tt.title}</div>
+                </div>
+            {/each}
+        </div>
     </div>
 </div>