Created (STEP 1) of Spherre Dapp Onboarding Page

frontend/app/onboarding/step1/page.tsx

@@ -0,0 +1,11 @@
+import Nav from '@/components/onboarding/Nav'
+import StepOne from '@/components/onboarding/StepOne'
+
+export default function UserOnBoarding() {
+  return (
+    <main className="w-full lg:px-[50px] md:px-6 px-4 md:py-[50px] py-4 overflow-x-hidden">
+      <Nav />
+      <StepOne />
+    </main>
+  )
+}

frontend/app/page.tsx

@@ -1,8 +1,8 @@
-import Welcome from './components/welcome'
+import Welcome from '../components/welcome'
 
 export default function Home() {
   return (
-    <div className="">
+    <div className="w-full">
       <Welcome />
     </div>
   )

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() {

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 (
+        <header className="w-full flex justify-between items-center">
+            {/* Logo */}
+            <Logo href={'/'} className='md:w-[50px] w-[40px]' image={spherreLogo} />
+
+            {/* Links */}
+            <ul className="md:flex hidden items-center gap-6">
+                {
+                    navlinks.map((link, index) => (
+                        <li key={index} className="text-base font-medium text-white">
+                            <Link href={link.href}>{link.name}</Link>
+                        </li>
+                    ))
+                }
+            </ul>
+
+            {/* Connect button & Hamburger Menu Button */}
+            <div className="flex items-center gap-4">
+                {/* Connected wallet */}
+                <WalletConnected address='0x5B8ecaB7096F8aBED873D246629ef9f05f467605' />
+
+                {/* Hamburger Menu */}
+                <button type="button" className='md:hidden block text-3xl text-white' onClick={handleToggle}>
+                    <IoMdMenu />
+                </button>
+            </div>
+
+            <div className={`fixed top-0 z-[99] w-full h-screen bg-[#101213]/60 transition-all duration-[500ms] ease-[cubic-bezier(0.86,0,0.07,1)] lg:hidden flex justify-end ${openMenu ? "left-0" : "left-[100%]"}`}>
+                <div className={`w-[80%] h-full bg-[#101213] border-l border-gray-900 flex flex-col gap-10 transition-all duration-[500ms] ease-[cubic-bezier(0.86,0,0.07,1)] px-6 py-8 delay-300 ${openMenu ? "translate-x-0" : "translate-x-full"}`}>
+                    <header className="flex justify-between items-center w-full">
+                        {/* Logo */}
+                        <Logo href={'/'} className='md:w-[50px] w-[40px]' image={spherreLogo} />
+                        {/* Close Menu Button*/}
+                        <button type="button" className='text-3xl text-white' onClick={handleToggle}>
+                            <IoClose />
+                        </button>
+                    </header>
+
+
+                    <ul className="flex flex-col mt-6 items-start gap-6">
+                        {
+                            navlinks.map((link, index) => (
+                                <li key={index} className="text-lg font-medium text-white">
+                                    <Link href={link.href}>{link.name}</Link>
+                                </li>
+                            ))
+                        }
+                    </ul>
+                </div>
+            </div>
+        </header>
+    )
+}
+
+export default Nav

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 (
+        <section className="max-w-2xl mx-auto md:mt-28 mt-20">
+            <main className='w-full flex flex-col items-center gap-6'>
+                {/* Step Indicators */}
+                <div className="w-full flex justify-between items-center md:px-8 relative">
+                    {/* Horizontal Lines */}
+                    <div className="absolute top-[22.5px] md:left-[18%] left-[23%] w-[15%] md:w-[25%] h-[1px] bg-[#8E9BAE]"></div>
+                    <div className="absolute top-[22.5px] md:right-[18%] right-[23%] w-[15%] md:w-[25%] h-[1px] bg-[#8E9BAE]"></div>
+
+                    {/* Step 1 */}
+                    <div className="flex flex-col items-center gap-8 relative">
+                        <div className="flex justify-center items-center w-[45px] h-[45px] rounded-full bg-[#6F2FCE] text-white font-[700] text-lg z-10">
+                            1
+                        </div>
+                        <h4 className="text-white text-sm text-center font-[400]">Account Details</h4>
+                    </div>
+
+                    {/* Step 2 */}
+                    <div className="flex flex-col items-center gap-8 relative">
+                        <div className="flex justify-center items-center w-[45px] h-[45px] rounded-full bg-[#1C1D1F] text-[#8E9BAE] font-[700] text-lg z-10">
+                            2
+                        </div>
+                        <h4 className="text-[#8E9BAE] text-sm text-center font-[400]">Members & Threshold</h4>
+                    </div>
+
+                    {/* Step 3 */}
+                    <div className="flex flex-col items-center gap-8 relative">
+                        <div className="flex justify-center items-center w-[45px] h-[45px] rounded-full bg-[#1C1D1F] text-[#8E9BAE] font-[700] text-lg z-10">
+                            3
+                        </div>
+                        <h4 className="text-[#8E9BAE] text-sm text-center font-[400]">Confirm & Setup</h4>
+                    </div>
+                </div>
+
+                {/* Writeup */}
+                <div className='max-w-sm my-12'>
+                    <h1 className='text-center text-white font-[700] text-[40px] leading-[47.42px]'>Secure Your Digital Assets Seamlessly</h1>
+                    <p className='font-[400] text-[16px] leading-[25px] text-center text-[#8E9BAE] lg:px-8 mt-3'>Name your Spherre account, Spherre ensures seamless integration, giving you full control over your digital assets.</p>
+                </div>
+
+
+                {/* form */}
+                <div className='rounded-[10px] bg-[#1C1D1F] w-full overflow-hidden'>
+                    <div className='bg-[#272729] py-[18px] md:px-[26px] px-4 w-full h-[62px]'>
+                        <h4 className="text-white font-[700] text-xl">Create Account</h4>
+                    </div>
+
+                    {/* Inputs */}
+                    <form onSubmit={handleSubmitStepOne} className='w-full flex flex-col gap-6 py-4 md:px-[26px] px-4'>
+                        {/* Account name */}
+                        <div className='w-full'>
+                            <label htmlFor="accountName" className='font-[400] text-[14px]leading-[24px] text-white mb-1 block'>Spherre Account Name</label>
+                            <input
+                                type='text'
+                                name='accountName'
+                                id='accountName'
+                                value={accountName}
+                                onChange={(e) => setAccountName(e.target.value)}
+                                className='w-full border border-[#292929] rounded-[7px] placeholder:text-[#8E9BAE] px-4 py-3 bg-transparent outline-none'
+                                placeholder='Enter a team name'
+                                required />
+                        </div>
+
+                        {/* Description */}
+                        <div className='w-full'>
+                            <label htmlFor="description" className='font-[400] text-[14px]leading-[24px] text-white mb-1 block'>Spherre Description</label>
+                            <textarea
+                                name='description'
+                                id="description"
+                                value={desc}
+                                onChange={(e) => setDesc(e.target.value)}
+                                className='w-full h-[100px] border border-[#292929] rounded-[7px] placeholder:text-[#8E9BAE] px-4 py-3 bg-transparent outline-none resize-y shadow-[0px_1.08px_2.16px_0px_#1018280A]'
+                                placeholder='Write here...'
+                                required></textarea>
+                        </div>
+
+                        {/* Button */}
+                        <button type='submit' className='w-full h-[50px] flex justify-center items-center bg-white shadow-[0px_1.08px_2.16px_0px_#1018280A] text-[#101213] font-[500] text-base rounded-[7px]'>Continue</button>
+                    </form>
+                </div>
+            </main>
+        </section>
+    )
+}
+
+export default StepOne

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
+        <Link href={href} className="flex items-center gap-2">
+            <Image src={image} alt="Logo" className={className} width={148} height={148} priority quality={100} />
+            <span className='text-xl font-semibold'>Spherre</span>
+        </Link>
+    )
+}
+
+export default Logo

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 (
+        <button type='button' className='flex justify-center items-center gap-2 md:w-[188px] md:h-[50px] rounded-[50px] border-[1px] border-white bg-[#101213] font-[600] text-base text-white py-1.5 px-2.5 md:px-0 md:py-0'>
+            <Image src={avatar} alt='avatar' width={36} height={36} quality={100} priority />
+            <span className='text-sm md:text-base'>{address.slice(0, 6)}...{address.slice(-4)}</span>
+        </button>
+    )
+}
+
+export default WalletConnected

frontend/app/components/welcome.tsx → 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 (
     <div className="flex flex-col lg:flex-row">
       {/* Left Section with Image */}
@@ -18,10 +24,8 @@ const Welcome = () => {
       {/* Right Section */}
       <div className="flex-1 flex flex-col justify-between p-4 lg:p-14">
         {/* Logo and Title */}
-        <div className="flex items-center gap-2">
-          <Image src={logo} height={50} width={50} alt={''} />
-          <p className="text-xl font-semibold">Spherre</p>
-        </div>
+        <Logo className='w-[50px]' href='/' image={logo} />
+
 
         {/* Centered Content */}
         <div className="flex flex-col justify-center items-center flex-1 gap-4">
@@ -33,14 +37,14 @@ const Welcome = () => {
             </p>
 
             {/* Responsive Button */}
-            <button className="bg-white w-full sm:w-72 flex items-center justify-center gap-1 px-6 py-2 rounded-lg mx-auto my-3">
+            <button onClick={() => router.push("/onboarding/step1")} className="bg-white w-full sm:w-72 flex items-center justify-center gap-1 px-6 py-2 rounded-lg mx-auto my-3">
               <Image src={add} height={30} width={24} alt={'add'} />
               <p className="text-black">Create Spherre</p>
             </button>
           </div>
         </div>
       </div>
-    </div>
+    </div >
   )
 }
 

frontend/package.json

@@ -13,7 +13,8 @@
     "next": "15.1.6",
     "prettier": "^3.4.2",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",