Add faq section

Author: luzrain

src/components/LandingPage/index.js

@@ -7,7 +7,7 @@ import LogoImg from '@site/static/img/phpss-banner.svg';
 import CodeExample from './CodeExample';
 import Terminal from './Terminal';
 import styles from './index.module.css';
-import { Code, Cpu, Globe, RefreshCw, CalendarClock, SquareTerminal, Logs, ChartNoAxesCombined, FolderSync, Puzzle, TriangleAlert } from 'lucide-react';
+import { Code, Cpu, Globe, RefreshCw, CalendarClock, SquareTerminal, Logs, ChartNoAxesCombined, FolderSync, Puzzle, TriangleAlert, ChevronDown } from 'lucide-react';
 
 const features = [
     {
@@ -62,6 +62,42 @@ const features = [
     },
 ];
 
+const faqItems = [
+    {
+        question: 'How is it different from PHP-FPM?',
+        answer: 'Your application remains loaded between requests instead of starting again for every request, reducing repeated startup work.',
+    },
+    {
+        question: 'Can I run an existing PHP application?',
+        answer: 'Not always without changes. Applications must be designed for an always-in-memory runtime rather than assuming a fresh start for every request.',
+    },
+    {
+        question: 'Does my application need to be asynchronous?',
+        answer: 'No. Applications can remain synchronous when running on PHPStreamServer.',
+    },
+    {
+        question: 'Can I use asynchronous PHP in my application?',
+        answer: 'Yes. PHPStreamServer is built around the Revolt event loop and AMPHP, so building asynchronous PHP applications is the most natural way to use it.',
+    },
+
+    {
+        question: 'How is PHPStreamServer installed?',
+        answer: 'Composer is all you need to install PHPStreamServer. There is no separate server binary or additional service to set up; you configure and launch it with PHP.',
+    },
+    {
+        question: 'Do I need Nginx or PHP-FPM?',
+        answer: 'You do not need PHP-FPM. PHPStreamServer keeps your application running and serves requests directly. Nginx is also optional, although you may still choose to use it as a reverse proxy.',
+    },
+    {
+        question: 'Can it replace Cron and Supervisor?',
+        answer: 'PHPStreamServer includes a scheduler for recurring tasks and a process supervisor for PHP workers and external commands, so separate Cron or Supervisor services are not required.',
+    },
+    {
+        question: 'How do code changes take effect during development?',
+        answer: 'Because application code stays in memory between requests, changes require a worker reload. The optional file monitor automatically reloads workers when monitored files change.',
+    },
+];
+
 export default function LandingPage() {
     const {siteConfig} = useDocusaurusContext();
 
@@ -183,6 +219,29 @@ export default function LandingPage() {
                         </div>
                     </div>
                 </section>
+
+                <section className={`${styles.faqSection} py-8 lg:py-12`}>
+                    <div className="container">
+                        <div className={`${styles.sectionHeading} mb-6 lg:mb-10`}>
+                            <h2>FAQ</h2>
+                            <span/>
+                        </div>
+
+                        <div className={styles.faqList}>
+                            {faqItems.map((item) => (
+                                <details key={item.question} className={styles.faqItem}>
+                                    <summary className={styles.faqQuestion}>
+                                        <span>{item.question}</span>
+                                        <ChevronDown aria-hidden="true" />
+                                    </summary>
+                                    <div className={styles.faqAnswer}>
+                                        <p>{item.answer}</p>
+                                    </div>
+                                </details>
+                            ))}
+                        </div>
+                    </div>
+                </section>
             </main>
         </Layout>
     );

src/components/LandingPage/index.module.css

@@ -284,6 +284,11 @@
     border-top: 1px solid var(--page-border);
 }
 
+.faqSection {
+    background: var(--page-background);
+    border-top: 1px solid var(--page-border);
+}
+
 .sectionHeading {
     position: relative;
 }
@@ -404,6 +409,73 @@
     line-height: 1.5;
 }
 
+.faqList {
+    @apply flex flex-col gap-3;
+}
+
+.faqItem {
+    @apply rounded-xl shadow-xs;
+    background: var(--page-surface);
+    border: 1px solid var(--page-border);
+    overflow: hidden;
+    transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+
+.faqItem[open] {
+    border-color: color-mix(in srgb, var(--page-accent), var(--page-border) 56%);
+}
+
+.faqQuestion {
+    @apply p-4 min-h-4;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 1em;
+    color: inherit;
+    cursor: pointer;
+    font-weight: 700;
+    line-height: 1.4;
+    list-style: none;
+}
+
+.faqQuestion::-webkit-details-marker {
+    display: none;
+}
+
+.faqQuestion:hover {
+    color: var(--page-accent-dark);
+}
+
+.faqQuestion:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--page-accent), transparent 58%);
+    outline-offset: -3px;
+}
+
+.faqQuestion svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--page-muted);
+    transition: color 160ms ease, transform 180ms ease;
+}
+
+.faqItem[open] .faqQuestion svg {
+    color: var(--page-accent);
+    transform: rotate(180deg);
+}
+
+.faqAnswer {
+    @apply px-4 pb-4;
+    padding: 0 1.1rem 1rem;
+    color: var(--page-muted);
+    font-size: 0.94rem;
+    line-height: 1.65;
+}
+
+.faqAnswer p {
+    @apply pt-4 m-0;
+    border-top: 1px solid var(--page-border);
+}
+
 .commandStep :global(.theme-code-block) {
     margin: 0;
 }
@@ -471,7 +543,9 @@
 @media (prefers-reduced-motion: reduce) {
     .primaryButton,
     .secondaryButton,
-    .secondaryButton svg {
+    .secondaryButton svg,
+    .faqItem,
+    .faqQuestion svg {
         transition: none;
     }
 }