+
)
diff --git a/frontend/app/step4/page.tsx b/frontend/app/step4/page.tsx
index 0c0071cd..f6e4078c 100644
--- a/frontend/app/step4/page.tsx
+++ b/frontend/app/step4/page.tsx
@@ -1,4 +1,4 @@
-import ConfirmationFooter from '../components/ConfirmationFooter'
+import ConfirmationFooter from '../../components/ConfirmationFooter'
import ReviewAccount from './ReviewAccount'
export default function Page() {
diff --git a/frontend/app/components/ConfirmationFooter.tsx b/frontend/components/ConfirmationFooter.tsx
similarity index 100%
rename from frontend/app/components/ConfirmationFooter.tsx
rename to frontend/components/ConfirmationFooter.tsx
diff --git a/frontend/components/onboarding/Nav.tsx b/frontend/components/onboarding/Nav.tsx
new file mode 100644
index 00000000..582af147
--- /dev/null
+++ b/frontend/components/onboarding/Nav.tsx
@@ -0,0 +1,87 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+import Logo from '../shared/Logo'
+import spherreLogo from '../../public/Images/spherrelogo.png'
+import Link from 'next/link'
+import WalletConnected from '../shared/WalletConnected'
+import { IoMdMenu } from 'react-icons/io'
+import { IoClose } from 'react-icons/io5'
+
+const Nav = () => {
+
+ const [openMenu, setOpenMenu] = useState(false);
+
+ const handleToggle = () => {
+ setOpenMenu(!openMenu);
+ }
+
+ // to avoid body scroll on menu open
+ useEffect(() => {
+ if (openMenu) {
+ document.body.style.overflow = "hidden";
+ } else {
+ document.body.style.overflow = "unset";
+ }
+ })
+
+ // Navigation links
+ const navlinks: { name: string, href: string }[] = [
+ { name: "Docs", href: "/" },
+ { name: "Telegram", href: "/" },
+ { name: "Twitter", href: "/" }
+ ]
+ return (
+
+ )
+}
+
+export default Nav
\ No newline at end of file
diff --git a/frontend/components/onboarding/StepOne.tsx b/frontend/components/onboarding/StepOne.tsx
new file mode 100644
index 00000000..d092e1e3
--- /dev/null
+++ b/frontend/components/onboarding/StepOne.tsx
@@ -0,0 +1,117 @@
+'use client'
+import { useRouter } from 'next/navigation'
+import React, { useState } from 'react'
+
+const StepOne = () => {
+ const [accountName, setAccountName] = useState("")
+ const [desc, setDesc] = useState("")
+
+ const router = useRouter()
+
+ /**
+ * Handles form submission for Step 1 of the onboarding process.
+ * Checks if both the account name and description inputs are not empty.
+ * If not, it throws an error.
+ * If valid, logs the inputs to console and navigates to Step 2.
+ * If an error occurs during navigation, it's logged to console.
+ */
+ const handleSubmitStepOne = async () => {
+ if (!accountName && !desc) {
+ throw Error("Inputs are required");
+ }
+
+ try {
+ console.log({ accountName, description: desc });
+ // Necessay submit logic
+ router.push("/onboarding/step2");
+ } catch (error) {
+ console.error(error)
+ }
+ }
+
+ return (
+
+
+ {/* Step Indicators */}
+
+ {/* Horizontal Lines */}
+
+
+
+ {/* Step 1 */}
+
+
+ 1
+
+
Account Details
+
+
+ {/* Step 2 */}
+
+
+ 2
+
+
Members & Threshold
+
+
+ {/* Step 3 */}
+
+
+ 3
+
+
Confirm & Setup
+
+
+
Secure Your Digital Assets Seamlessly
+
Name your Spherre account, Spherre ensures seamless integration, giving you full control over your digital assets.
+
+
+
Create Account
+
+
+ {/* Inputs */}
+
+
+ )
+}
+
+export default StepOne
\ No newline at end of file
diff --git a/frontend/components/shared/Logo.tsx b/frontend/components/shared/Logo.tsx
new file mode 100644
index 00000000..f7192c5c
--- /dev/null
+++ b/frontend/components/shared/Logo.tsx
@@ -0,0 +1,16 @@
+import Image, { StaticImageData } from 'next/image'
+import Link from 'next/link'
+import React from "react"
+
+
+const Logo = ({ className, image, href }: { className: string, image: StaticImageData, href: string }) => {
+ return (
+ // A reuseable component for rendering Logo
+
+
+
Spherre
+
+ )
+}
+
+export default Logo
\ No newline at end of file
diff --git a/frontend/components/shared/WalletConnected.tsx b/frontend/components/shared/WalletConnected.tsx
new file mode 100644
index 00000000..b71a9d0b
--- /dev/null
+++ b/frontend/components/shared/WalletConnected.tsx
@@ -0,0 +1,14 @@
+import Image from 'next/image'
+import React from 'react'
+import avatar from "../../public/Images/avatar.png"
+
+const WalletConnected = ({ address }: { address: string }) => {
+ return (
+
+ )
+}
+
+export default WalletConnected
\ No newline at end of file
diff --git a/frontend/app/components/welcome.tsx b/frontend/components/welcome.tsx
similarity index 68%
rename from frontend/app/components/welcome.tsx
rename to frontend/components/welcome.tsx
index c7ee77cb..883bfed2 100644
--- a/frontend/app/components/welcome.tsx
+++ b/frontend/components/welcome.tsx
@@ -1,9 +1,15 @@
+'use client'
import Image from 'next/image'
-import logo from '../../public/Images/spherrelogo.png'
-import wall from '../../public/Images/wall.png'
-import add from '../../public/Images/Add.png'
+import logo from '../public/Images/spherrelogo.png'
+import wall from '../public/Images/wall.png'
+import add from '../public/Images/Add.png'
+import Logo from './shared/Logo'
+import { useRouter } from 'next/navigation'
const Welcome = () => {
+ // for navigation
+ const router = useRouter()
+
return (
{/* Left Section with Image */}
@@ -18,10 +24,8 @@ const Welcome = () => {
{/* Right Section */}
{/* Logo and Title */}
-
+
+
{/* Centered Content */}
@@ -33,14 +37,14 @@ const Welcome = () => {
{/* Responsive Button */}
-
-