From e002079723178f9e90c3a42eec32e21f146097f9 Mon Sep 17 00:00:00 2001
From: aoi-dev-0411 <aoikabu12@gmail.com>
Date: Sat, 11 Apr 2026 06:32:02 +0900
Subject: [PATCH] feat: implement Account Type Selection screen #21

---
 src/app/create-account/page.tsx      | 118 +++++++++++++++++++++++++++
 src/components/account-type-card.tsx |  49 +++++++++++
 2 files changed, 167 insertions(+)
 create mode 100644 src/app/create-account/page.tsx
 create mode 100644 src/components/account-type-card.tsx

diff --git a/src/app/create-account/page.tsx b/src/app/create-account/page.tsx
new file mode 100644
index 0000000..01c3c32
--- /dev/null
+++ b/src/app/create-account/page.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { motion } from "framer-motion";
+import AccountTypeCard from "@/components/account-type-card";
+
+type AccountType = "creator" | "respondent" | null;
+
+export default function CreateAccountPage() {
+  const [selected, setSelected] = useState<AccountType>(null);
+  const router = useRouter();
+
+  const handleContinue = () => {
+    if (selected === "creator") {
+      router.push("/create-account/surveys");
+    } else if (selected === "respondent") {
+      router.push("/create-account/respondent");
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-bg-dark px-4 py-12">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="w-full max-w-3xl"
+      >
+        <div className="mb-10 text-center">
+          <h1 className="mb-3 text-3xl font-bold text-text-light md:text-4xl">
+            Choose Your Account Type
+          </h1>
+          <p className="text-text-gray">
+            Select how you&apos;d like to use Survexa
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
+            <AccountTypeCard
+              title="Create Surveys & Get Insights"
+              description="Design and publish surveys, analyze responses, and gain valuable insights from your audience."
+              selected={selected === "creator"}
+              onClick={() => setSelected("creator")}
+              icon={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="28"
+                  height="28"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M12 20h9" />
+                  <path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z" />
+                </svg>
+              }
+            />
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
+            <AccountTypeCard
+              title="Take Surveys & Earn Money"
+              description="Participate in surveys, share your opinions, and earn rewards for your valuable feedback."
+              selected={selected === "respondent"}
+              onClick={() => setSelected("respondent")}
+              icon={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="28"
+                  height="28"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8" />
+                  <path d="M12 18V6" />
+                </svg>
+              }
+            />
+          </motion.div>
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5, delay: 0.4 }}
+          className="mt-10 flex justify-center"
+        >
+          <button
+            type="button"
+            onClick={handleContinue}
+            disabled={!selected}
+            className="rounded-full bg-primary-purple px-10 py-3 text-base font-semibold text-white transition-all duration-300 hover:bg-primary-purple-light disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            Continue
+          </button>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/src/components/account-type-card.tsx b/src/components/account-type-card.tsx
new file mode 100644
index 0000000..79d8fb2
--- /dev/null
+++ b/src/components/account-type-card.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface AccountTypeCardProps {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  selected: boolean;
+  onClick: () => void;
+}
+
+export default function AccountTypeCard({
+  title,
+  description,
+  icon,
+  selected,
+  onClick,
+}: AccountTypeCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "group relative flex flex-col items-center gap-4 rounded-2xl border p-8 text-center transition-all duration-300 cursor-pointer",
+        "hover:border-primary-purple/60 hover:shadow-[0_0_30px_rgba(144,17,255,0.15)]",
+        "md:p-10 lg:p-12",
+        selected
+          ? "border-primary-purple bg-primary-purple/10 shadow-[0_0_40px_rgba(144,17,255,0.2)]"
+          : "border-border-gray bg-bg-card/50"
+      )}
+    >
+      <div
+        className={cn(
+          "flex h-16 w-16 items-center justify-center rounded-full transition-colors duration-300",
+          selected
+            ? "bg-primary-purple text-white"
+            : "bg-bg-card text-primary-purple-light group-hover:bg-primary-purple/20"
+        )}
+      >
+        {icon}
+      </div>
+      <h3 className="text-xl font-semibold text-text-light md:text-2xl">
+        {title}
+      </h3>
+      <p className="text-sm text-text-gray md:text-base">{description}</p>
+    </button>
+  );
+}