appfunnel 0.6.0 → 0.7.0

package/templates/default/src/pages/index.tsx

@@ -0,0 +1,37 @@
+import { definePage, useResponse, useNavigation } from '@appfunnel-dev/sdk'
+
+export const page = definePage({
+  name: 'Landing',
+  type: 'default',
+  routes: [{ to: 'loading' }],
+})
+
+export default function Landing() {
+  const [goal, setGoal] = useResponse<string>('goal')
+  const { goToNextPage } = useNavigation()
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="w-full max-w-md space-y-6">
+        <h1 className="text-3xl font-bold text-center">Welcome</h1>
+        <p className="text-center text-gray-500">
+          Tell us about your goal to get started.
+        </p>
+        <input
+          type="text"
+          value={goal}
+          onChange={(e) => setGoal(e.target.value)}
+          placeholder="What's your goal?"
+          className="w-full rounded-xl border p-4 text-lg"
+        />
+        <button
+          onClick={goToNextPage}
+          disabled={!goal.trim()}
+          className="w-full rounded-xl bg-blue-600 py-4 text-lg font-bold text-white disabled:opacity-50"
+        >
+          Continue
+        </button>
+      </div>
+    </div>
+  )
+}

package/templates/default/src/pages/loading.tsx

@@ -0,0 +1,76 @@
+import { definePage, useNavigation } from '@appfunnel-dev/sdk'
+import { ProgressCircle } from '@appfunnel-dev/sdk/elements'
+import { useState } from 'react'
+
+export const page = definePage({
+  name: 'Loading',
+  routes: [{ to: 'result' }],
+})
+
+const STEPS = [
+  'Analyzing your answers',
+  'Preparing your plan',
+  'Finalizing results',
+]
+
+export default function Loading() {
+  const { goToNextPage } = useNavigation()
+  const [progress, setProgress] = useState(0)
+
+  const currentStep = Math.min(Math.floor(progress / 34), STEPS.length - 1)
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-8 p-4">
+      <h1 className="text-2xl font-bold text-center">
+        Preparing your results...
+      </h1>
+
+      <div className="w-40 h-40">
+        <ProgressCircle
+          duration={3000}
+          animation="easeOut"
+          trackColor="#e5e7eb"
+          fillColor="#3b82f6"
+          trackWidth={8}
+          fillWidth={8}
+          autoStart
+          onProgress={setProgress}
+          onComplete={() => setTimeout(goToNextPage, 400)}
+          renderInner={(p) => (
+            <span className="text-2xl font-bold">{p}%</span>
+          )}
+        />
+      </div>
+
+      <div className="flex flex-col gap-3 w-full max-w-xs">
+        {STEPS.map((step, i) => (
+          <div key={i} className="flex items-center gap-3">
+            <div
+              className={`w-5 h-5 rounded-full flex items-center justify-center shrink-0 ${
+                i <= currentStep ? 'bg-blue-600' : 'bg-gray-200'
+              }`}
+            >
+              {i <= currentStep && (
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="white"
+                  strokeWidth="2.5"
+                >
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              )}
+            </div>
+            <span
+              className={`text-sm ${i <= currentStep ? 'text-gray-900' : 'text-gray-400'}`}
+            >
+              {step}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/templates/default/src/pages/result.tsx

@@ -0,0 +1,38 @@
+import { definePage, useResponse } from '@appfunnel-dev/sdk'
+import { CountUp } from '@appfunnel-dev/sdk/elements'
+
+export const page = definePage({
+  name: 'Result',
+  routes: [],
+})
+
+export default function Result() {
+  const [goal] = useResponse<string>('goal')
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-8 p-4">
+      <h1 className="text-3xl font-bold text-center">
+        Your plan is ready!
+      </h1>
+
+      <p className="text-gray-500 text-center max-w-md">
+        Based on your goal "{goal}", here's what we found:
+      </p>
+
+      <div className="flex gap-6">
+        <div className="flex flex-col items-center gap-2 rounded-xl bg-gray-50 p-6">
+          <CountUp from={0} to={94} duration={1500} suffix="%" />
+          <span className="text-sm text-gray-500">Match score</span>
+        </div>
+        <div className="flex flex-col items-center gap-2 rounded-xl bg-gray-50 p-6">
+          <CountUp from={0} to={12} duration={1500} suffix=" days" />
+          <span className="text-sm text-gray-500">Estimated time</span>
+        </div>
+      </div>
+
+      <button className="w-full max-w-md rounded-xl bg-blue-600 py-4 text-lg font-bold text-white">
+        Get Started
+      </button>
+    </div>
+  )
+}

package/templates/default/template.json

@@ -0,0 +1,10 @@
+{
+  "name": "Default",
+  "description": "Simple 3-page funnel with loading screen and results",
+  "products": [
+    { "id": "plan_1", "label": "Plan 1", "description": "The cheapest plan — typically a short-term or weekly option" },
+    { "id": "plan_2", "label": "Plan 2", "description": "Mid-tier plan — typically monthly, best balance of value and price" },
+    { "id": "plan_3", "label": "Plan 3", "description": "Premium plan — typically quarterly or annual, highest value" },
+    { "id": "upsell_1", "label": "Upsell", "description": "One-time or add-on offer shown after the main purchase" }
+  ]
+}

package/templates/default/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "baseUrl": "."
+  },
+  "include": ["src"]
+}