chore: added toggles for faq
e94e9e5d
1 file(s) · +140 −11
| 21 | 21 | <meta name="twitter:title" content=""> |
|
| 22 | 22 | <meta name="twitter:description" content=""> |
|
| 23 | 23 | <meta name="twitter:image" content="/og.png"> |
|
| 24 | + | <style> |
|
| 25 | + | details[open] summary svg { |
|
| 26 | + | transform: rotate(90deg); |
|
| 27 | + | } |
|
| 28 | + | </style> |
|
| 24 | 29 | </head> |
|
| 25 | - | <body class="overflow-x-auto"> |
|
| 26 | - | <div class="flex snap-x snap-mandatory overflow-x-scroll"> |
|
| 30 | + | <body class="overflow-hidden p-0 m-0 h-screen"> |
|
| 31 | + | <!-- Navigation Buttons --> |
|
| 32 | + | <button id="prevBtn" class="fixed left-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/20 hover:bg-black/40 text-white p-3 rounded-full transition-all duration-300 backdrop-blur-sm"> |
|
| 33 | + | <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
| 34 | + | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path> |
|
| 35 | + | </svg> |
|
| 36 | + | </button> |
|
| 37 | + | ||
| 38 | + | <button id="nextBtn" class="fixed right-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/20 hover:bg-black/40 text-white p-3 rounded-full transition-all duration-300 backdrop-blur-sm"> |
|
| 39 | + | <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
| 40 | + | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> |
|
| 41 | + | </svg> |
|
| 42 | + | </button> |
|
| 43 | + | ||
| 44 | + | <div id="scrollContainer" class="flex snap-x snap-mandatory overflow-x-scroll"> |
|
| 27 | 45 | <section class="min-h-screen w-screen flex-shrink-0 flex flex-col gap-12 justify-center items-center px-8 snap-center"> |
|
| 28 | 46 | <div class="max-w-4xl space-y-4"> |
|
| 29 | 47 | <p>Do you kinda hate social media?</p> |
|
| 113 | 131 | </div> |
|
| 114 | 132 | </section> |
|
| 115 | 133 | ||
| 116 | - | <section class="min-h-screen w-screen flex-shrink-0 flex flex-col justify-center items-center px-8 snap-center"> |
|
| 117 | - | <div class="max-w-xl space-y-4"> |
|
| 134 | + | <section class="min-h-screen w-screen flex-shrink-0 flex flex-col justify-center items-start px-8 snap-center"> |
|
| 135 | + | <div class="max-w-xl space-y-4 w-full mx-auto"> |
|
| 118 | 136 | <h2 class="text-4xl font-bold">FAQ</h2> |
|
| 119 | 137 | ||
| 120 | - | <ul class="list-disc pl-4 text-md font-semibold"> |
|
| 121 | - | <li>Where do I sign up?</li> |
|
| 122 | - | <li>How much does Blog Feeds cost?</li> |
|
| 123 | - | <li>Does this replace social media?</li> |
|
| 124 | - | <li>What about monetization?</li> |
|
| 125 | - | <li>What about comments or dialogue?</li> |
|
| 126 | - | </ul> |
|
| 138 | + | <div class="space-y-6 w-full"> |
|
| 139 | + | <details class="w-full"> |
|
| 140 | + | <summary class="cursor-pointer text-lg font-semibold flex items-center"> |
|
| 141 | + | <svg class="w-4 h-4 mr-3 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
| 142 | + | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> |
|
| 143 | + | </svg> |
|
| 144 | + | Where do I sign up? |
|
| 145 | + | </summary> |
|
| 146 | + | <div class="mt-2 text-gray-700 pl-7"> |
|
| 147 | + | You don't! Just make a blog, get an RSS reader, and share a feeds page. |
|
| 148 | + | </div> |
|
| 149 | + | </details> |
|
| 150 | + | ||
| 151 | + | <details class="w-full"> |
|
| 152 | + | <summary class="cursor-pointer text-lg font-semibold flex items-center"> |
|
| 153 | + | <svg class="w-4 h-4 mr-3 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
| 154 | + | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> |
|
| 155 | + | </svg> |
|
| 156 | + | How much does Blog Feeds cost? |
|
| 157 | + | </summary> |
|
| 158 | + | <div class="mt-2 text-gray-700 pl-7"> |
|
| 159 | + | Nothing! Of course you can pay for premium plans for blogging platforms or readers, but there are plenty of free options out there. |
|
| 160 | + | </div> |
|
| 161 | + | </details> |
|
| 162 | + | ||
| 163 | + | <details class="w-full"> |
|
| 164 | + | <summary class="cursor-pointer text-lg font-semibold flex items-center"> |
|
| 165 | + | <svg class="w-4 h-4 mr-3 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
| 166 | + | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> |
|
| 167 | + | </svg> |
|
| 168 | + | Does this replace social media? |
|
| 169 | + | </summary> |
|
| 170 | + | <div class="mt-2 text-gray-700 pl-7"> |
|
| 171 | + | Not necessarily! Most people have already ditched social media, and the way Blog Feeds operates doesn't act like a drop in replacement. It's a different style of interacting with people on the web. It's slower, more personal, and has much different incentives. Everyone is different so choose what works best for you; we just ask you give Blog Feeds a shot! |
|
| 172 | + | </div> |
|
| 173 | + | </details> |
|
| 174 | + | ||
| 175 | + | <details class="w-full"> |
|
| 176 | + | <summary class="cursor-pointer text-lg font-semibold flex items-center"> |
|
| 177 | + | <svg class="w-4 h-4 mr-3 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
| 178 | + | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> |
|
| 179 | + | </svg> |
|
| 180 | + | What about monetization? |
|
| 181 | + | </summary> |
|
| 182 | + | <div class="mt-2 text-gray-700 pl-7"> |
|
| 183 | + | You certainly can try to find ways to monetize through platforms like Substack, it's truly up to you. The key is building a network of people who want to talk together! |
|
| 184 | + | </div> |
|
| 185 | + | </details> |
|
| 186 | + | ||
| 187 | + | <details class="w-full"> |
|
| 188 | + | <summary class="cursor-pointer text-lg font-semibold flex items-center"> |
|
| 189 | + | <svg class="w-4 h-4 mr-3 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
| 190 | + | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> |
|
| 191 | + | </svg> |
|
| 192 | + | What about comments or dialogue? |
|
| 193 | + | </summary> |
|
| 194 | + | <div class="mt-2 text-gray-700 pl-7"> |
|
| 195 | + | Most blogs have comments available if you wish to use them, or you could go even further on a technical level and incorporate platforms like BlueSky to have comments. Another approach is just letting people email you so you can discuss on a more personal level. Choose what fits you and your nearby community best! |
|
| 196 | + | </div> |
|
| 197 | + | </details> |
|
| 198 | + | </div> |
|
| 127 | 199 | </div> |
|
| 128 | 200 | </section> |
|
| 129 | 201 | </div> |
|
| 202 | + | ||
| 203 | + | <script> |
|
| 204 | + | const scrollContainer = document.getElementById('scrollContainer'); |
|
| 205 | + | const prevBtn = document.getElementById('prevBtn'); |
|
| 206 | + | const nextBtn = document.getElementById('nextBtn'); |
|
| 207 | + | ||
| 208 | + | let currentSection = 0; |
|
| 209 | + | const totalSections = scrollContainer.children.length; |
|
| 210 | + | ||
| 211 | + | function updateButtons() { |
|
| 212 | + | // Hide/show buttons based on current position |
|
| 213 | + | prevBtn.style.display = currentSection === 0 ? 'none' : 'block'; |
|
| 214 | + | nextBtn.style.display = currentSection === totalSections - 1 ? 'none' : 'block'; |
|
| 215 | + | } |
|
| 216 | + | ||
| 217 | + | function scrollToSection(index) { |
|
| 218 | + | if (index >= 0 && index < totalSections) { |
|
| 219 | + | const sectionWidth = window.innerWidth; |
|
| 220 | + | scrollContainer.scrollTo({ |
|
| 221 | + | left: index * sectionWidth, |
|
| 222 | + | behavior: 'smooth' |
|
| 223 | + | }); |
|
| 224 | + | currentSection = index; |
|
| 225 | + | updateButtons(); |
|
| 226 | + | } |
|
| 227 | + | } |
|
| 228 | + | ||
| 229 | + | prevBtn.addEventListener('click', () => { |
|
| 230 | + | scrollToSection(currentSection - 1); |
|
| 231 | + | }); |
|
| 232 | + | ||
| 233 | + | nextBtn.addEventListener('click', () => { |
|
| 234 | + | scrollToSection(currentSection + 1); |
|
| 235 | + | }); |
|
| 236 | + | ||
| 237 | + | // Update current section when user manually scrolls |
|
| 238 | + | scrollContainer.addEventListener('scroll', () => { |
|
| 239 | + | const sectionWidth = window.innerWidth; |
|
| 240 | + | const newSection = Math.round(scrollContainer.scrollLeft / sectionWidth); |
|
| 241 | + | if (newSection !== currentSection) { |
|
| 242 | + | currentSection = newSection; |
|
| 243 | + | updateButtons(); |
|
| 244 | + | } |
|
| 245 | + | }); |
|
| 246 | + | ||
| 247 | + | // Initialize buttons |
|
| 248 | + | updateButtons(); |
|
| 249 | + | ||
| 250 | + | // Handle keyboard navigation |
|
| 251 | + | document.addEventListener('keydown', (e) => { |
|
| 252 | + | if (e.key === 'ArrowLeft') { |
|
| 253 | + | scrollToSection(currentSection - 1); |
|
| 254 | + | } else if (e.key === 'ArrowRight') { |
|
| 255 | + | scrollToSection(currentSection + 1); |
|
| 256 | + | } |
|
| 257 | + | }); |
|
| 258 | + | </script> |
|
| 130 | 259 | </body> |
|
| 131 | 260 | </html> |
|