diff --git a/app/account_type/page.tsx b/app/account_type/page.tsx new file mode 100644 index 0000000..8d81d25 --- /dev/null +++ b/app/account_type/page.tsx @@ -0,0 +1,18 @@ +"use client"; + +import AccountTypePage from "@/components/AccountTypePage"; +import React from "react"; + +const page = () => { + const // + handleUserClick = () => {}, + handleProtocolClick = () => {}; + return ( + + ); +}; + +export default page; diff --git a/components/AccountTypePage.tsx b/components/AccountTypePage.tsx new file mode 100644 index 0000000..d59ed01 --- /dev/null +++ b/components/AccountTypePage.tsx @@ -0,0 +1,77 @@ +"use client"; +import Image from "next/image"; +import React from "react"; + +interface AccountOptionProps { + icon: React.ReactNode; + title: string; + description: string; + onClick: () => void; +} + +const AccountOption: React.FC = ({ + icon, + title, + description, + onClick, +}) => { + return ( + + ); +}; + +interface AccountTypePageProps { + onUserClick: () => void; + onProtocolClick: () => void; +} + +const AccountTypePage: React.FC = ({ + onUserClick, + onProtocolClick, +}) => { + return ( +
+
+

+ Select your account type +

+
+ + } + title="User" + description="Join campaigns, earn rewards and view campaign progress in real time." + onClick={onUserClick} + /> + + } + title="Protocol" + description="Create campaigns, build loyalty, and give out rewards to users." + onClick={onProtocolClick} + /> +
+
+
+ ); +}; + +export default AccountTypePage; diff --git a/public/protocol.svg b/public/protocol.svg new file mode 100644 index 0000000..9206597 --- /dev/null +++ b/public/protocol.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/user.svg b/public/user.svg new file mode 100644 index 0000000..2642463 --- /dev/null +++ b/public/user.svg @@ -0,0 +1,4 @@ + + + +