chore: Additional pages

2025-12-19 19:20:30 +01:00
parent 2fb588357a
commit 996852a506
11 changed files with 2510 additions and 2 deletions
@@ -0,0 +1,32 @@
+import {motion} from 'framer-motion';
+import React from 'react';
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  title?: string;
+}
+
+/**
+ * Reusable code block component with syntax highlighting styling
+ */
+export function CodeBlock({code, language = 'javascript', title}: CodeBlockProps) {
+  return (
+    <motion.div
+      initial={{opacity: 0, y: 20}}
+      whileInView={{opacity: 1, y: 0}}
+      viewport={{once: true}}
+      transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+      className={'overflow-hidden rounded-xl border border-neutral-200 bg-neutral-50'}
+    >
+      {title && (
+        <div className={'border-b border-neutral-200 bg-white px-6 py-3'}>
+          <span className={'text-sm font-medium text-neutral-900'}>{title}</span>
+        </div>
+      )}
+      <pre className={'overflow-x-auto p-6'}>
+        <code className={'font-mono text-sm text-neutral-900'}>{code}</code>
+      </pre>
+    </motion.div>
+  );
+}
@@ -0,0 +1,80 @@
+import {Check, X} from 'lucide-react';
+import {motion} from 'framer-motion';
+import React from 'react';
+
+export interface ComparisonRow {
+  feature: string;
+  plunk: boolean | string;
+  competitor: boolean | string;
+}
+
+interface ComparisonTableProps {
+  competitorName: string;
+  rows: ComparisonRow[];
+}
+
+/**
+ * Reusable comparison table component for competitor pages
+ */
+export function ComparisonTable({competitorName, rows}: ComparisonTableProps) {
+  return (
+    <div className={'overflow-hidden rounded-xl border border-neutral-200'}>
+      {/* Header */}
+      <div className={'grid grid-cols-3 gap-px bg-neutral-200'}>
+        <div className={'bg-white p-6'}>
+          <span className={'text-sm font-semibold text-neutral-900'}>Feature</span>
+        </div>
+        <div className={'bg-white p-6 text-center'}>
+          <span className={'text-sm font-semibold text-neutral-900'}>Plunk</span>
+        </div>
+        <div className={'bg-white p-6 text-center'}>
+          <span className={'text-sm font-semibold text-neutral-900'}>{competitorName}</span>
+        </div>
+      </div>
+
+      {/* Rows */}
+      <div className={'grid gap-px bg-neutral-200'}>
+        {rows.map((row, index) => (
+          <motion.div
+            key={row.feature}
+            initial={{opacity: 0, y: 10}}
+            whileInView={{opacity: 1, y: 0}}
+            viewport={{once: true}}
+            transition={{duration: 0.5, delay: index * 0.05, ease: [0.22, 1, 0.36, 1]}}
+            className={'grid grid-cols-3 gap-px bg-neutral-200'}
+          >
+            <div className={'bg-white p-6'}>
+              <span className={'text-sm text-neutral-600'}>{row.feature}</span>
+            </div>
+            <div className={'bg-white p-6'}>
+              <div className={'flex justify-center'}>
+                {typeof row.plunk === 'boolean' ? (
+                  row.plunk ? (
+                    <Check className="h-5 w-5 text-neutral-900" strokeWidth={2} />
+                  ) : (
+                    <X className="h-5 w-5 text-neutral-400" strokeWidth={2} />
+                  )
+                ) : (
+                  <span className={'text-sm text-neutral-900'}>{row.plunk}</span>
+                )}
+              </div>
+            </div>
+            <div className={'bg-white p-6'}>
+              <div className={'flex justify-center'}>
+                {typeof row.competitor === 'boolean' ? (
+                  row.competitor ? (
+                    <Check className="h-5 w-5 text-neutral-900" strokeWidth={2} />
+                  ) : (
+                    <X className="h-5 w-5 text-neutral-400" strokeWidth={2} />
+                  )
+                ) : (
+                  <span className={'text-sm text-neutral-900'}>{row.competitor}</span>
+                )}
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,71 @@
+import {motion} from 'framer-motion';
+import Script from 'next/script';
+import React from 'react';
+
+export interface FAQ {
+  question: string;
+  answer: string;
+}
+
+interface FAQSectionProps {
+  faqs: FAQ[];
+  schemaId?: string;
+}
+
+/**
+ * Reusable FAQ section component with structured data support
+ */
+export function FAQSection({faqs, schemaId = 'faq-schema'}: FAQSectionProps) {
+  return (
+    <>
+      <Script
+        id={schemaId}
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            '@context': 'https://schema.org',
+            '@type': 'FAQPage',
+            'mainEntity': faqs.map((faq) => ({
+              '@type': 'Question',
+              'name': faq.question,
+              'acceptedAnswer': {
+                '@type': 'Answer',
+                'text': faq.answer,
+              },
+            })),
+          }),
+        }}
+      />
+
+      <section className={'py-32'}>
+        <motion.div
+          initial={{opacity: 0, y: 20}}
+          whileInView={{opacity: 1, y: 0}}
+          viewport={{once: true}}
+          transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+          className={'mx-auto max-w-4xl'}
+        >
+          <h2 className={'mb-16 text-center text-5xl font-bold tracking-tight text-neutral-900'}>
+            Frequently asked questions
+          </h2>
+
+          <div className={'space-y-8'}>
+            {faqs.map((faq, index) => (
+              <motion.div
+                key={index}
+                initial={{opacity: 0, y: 20}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.5, delay: index * 0.1, ease: [0.22, 1, 0.36, 1]}}
+                className={'border-b border-neutral-200 pb-8 last:border-b-0'}
+              >
+                <h3 className={'text-xl font-semibold text-neutral-900'}>{faq.question}</h3>
+                <p className={'mt-4 leading-relaxed text-neutral-600'}>{faq.answer}</p>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </section>
+    </>
+  );
+}
@@ -0,0 +1,111 @@
+import {motion} from 'framer-motion';
+import React, {useState} from 'react';
+
+interface PricingData {
+  name: string;
+  calculatePrice: (emails: number) => number;
+  color?: string;
+}
+
+interface PricingCalculatorProps {
+  competitors: PricingData[];
+  defaultVolume?: number;
+}
+
+const volumeOptions = [
+  {label: '10K emails/month', value: 10000},
+  {label: '100K emails/month', value: 100000},
+  {label: '500K emails/month', value: 500000},
+  {label: '1M emails/month', value: 1000000},
+];
+
+/**
+ * Interactive pricing calculator comparing Plunk with competitors
+ */
+export function PricingCalculator({competitors, defaultVolume = 100000}: PricingCalculatorProps) {
+  const [volume, setVolume] = useState(defaultVolume);
+
+  const plunkPrice = volume * 0.001;
+
+  return (
+    <motion.div
+      initial={{opacity: 0, y: 20}}
+      whileInView={{opacity: 1, y: 0}}
+      viewport={{once: true}}
+      transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
+      className={'overflow-hidden rounded-xl border border-neutral-200 bg-white'}
+    >
+      {/* Header */}
+      <div className={'border-b border-neutral-200 bg-neutral-50 p-8'}>
+        <h3 className={'text-2xl font-bold text-neutral-900'}>Pricing Calculator</h3>
+        <p className={'mt-2 text-sm text-neutral-600'}>
+          Compare costs across platforms at different email volumes
+        </p>
+      </div>
+
+      {/* Volume Selector */}
+      <div className={'p-8'}>
+        <label className={'block text-sm font-semibold text-neutral-900'}>Monthly Email Volume</label>
+        <div className={'mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4'}>
+          {volumeOptions.map((option) => (
+            <button
+              key={option.value}
+              onClick={() => setVolume(option.value)}
+              className={`rounded-lg border px-4 py-3 text-sm font-medium transition ${
+                volume === option.value
+                  ? 'border-neutral-900 bg-neutral-900 text-white'
+                  : 'border-neutral-300 bg-white text-neutral-900 hover:border-neutral-400'
+              }`}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Results */}
+      <div className={'space-y-4 p-8 pt-0'}>
+        {/* Plunk */}
+        <div className={'rounded-lg border border-neutral-900 bg-neutral-50 p-6'}>
+          <div className={'flex items-center justify-between'}>
+            <div>
+              <span className={'text-lg font-bold text-neutral-900'}>Plunk</span>
+              <span className={'ml-3 rounded-full bg-neutral-900 px-3 py-1 text-xs font-medium text-white'}>
+                Cheapest
+              </span>
+            </div>
+            <div className={'text-right'}>
+              <div className={'text-3xl font-bold text-neutral-900'}>${plunkPrice.toFixed(2)}</div>
+              <div className={'text-sm text-neutral-600'}>per month</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Competitors */}
+        {competitors.map((competitor, index) => {
+          const price = competitor.calculatePrice(volume);
+          const savings = ((price - plunkPrice) / price) * 100;
+
+          return (
+            <div key={competitor.name} className={'rounded-lg border border-neutral-200 bg-white p-6'}>
+              <div className={'flex items-center justify-between'}>
+                <div>
+                  <span className={'text-lg font-semibold text-neutral-900'}>{competitor.name}</span>
+                </div>
+                <div className={'text-right'}>
+                  <div className={'text-3xl font-bold text-neutral-900'}>${price.toFixed(2)}</div>
+                  <div className={'text-sm text-neutral-600'}>per month</div>
+                </div>
+              </div>
+              {savings > 0 && (
+                <div className={'mt-3 text-sm text-neutral-600'}>
+                  Save <span className={'font-semibold text-neutral-900'}>{savings.toFixed(0)}%</span> with Plunk
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </motion.div>
+  );
+}
@@ -1,2 +1,6 @@
 export * from './Navbar';
 export * from './Footer';
+export * from './ComparisonTable';
+export * from './FAQSection';
+export * from './CodeBlock';
+export * from './PricingCalculator';