1.

Backend Setup

1. Database Setup
o Create MongoDB Atlas cluster or local MongoDB instance
o Define schemas:
 User (email, password, role, wallet data)
 Transaction (deposit/withdraw details)
 Raffle (ticket price, participants, winner)
 Notification (content, type, timestamp)
2. API Routes
o Auth routes: /api/auth/login, /api/auth/register
o Wallet routes: /api/wallet/deposit, /api/wallet/withdraw
o Admin routes: /api/admin/users, /api/admin/transactions
3. Security & Validation
o Add input validation for all API requests
o Implement rate limiting for public endpoints
o Set up HTTPS for production

2. Frontend Setup

1. Folder Structure
o src/components/ (reusable UI components)
o src/pages/ (Home, Account, Raffle, Admin)
o src/store/ (Redux actions, reducers)
o src/utils/ (API config, auth helpers)
2. Integrate Backend API
o Configure Axios to connect to backend endpoints
o Set up JWT token handling (localStorage/cookies)
3. Authentication Flow
o Protected routes for authenticated users
o Admin role-based access control
4. UI/UX Implementation
o Responsive navbar with login/logout
o Wallet balance display with animations
o Slider component for daily tasks
o Notification system with real-time updates

3. Admin Panel Setup

1. Admin-Specific Routes
o /admin/dashboard (Analytics overview)
o /admin/users (User management table)
o /admin/transactions (Approve/reject withdrawals)
o /admin/raffles (Create/manage raffles)
2. Admin Features
o Bulk actions (ban users, approve transactions)
o Image upload to Cloudinary (QR codes, banners)
o Notification broadcast system
3. Security
o IP whitelisting for admin routes
 o 2FA for critical actions (balance adjustments)

4. Database & Services Integration

1. MongoDB Configuration
o Enable authentication and user roles
o Set up automated backups

### **Phase 2: Component Architecture**

#### **Core Components**

1. **Navbar**:

- Login/Register buttons (conditional rendering)

- Notification icon with badge counter

- Responsive mobile menu

- User profile dropdown

2. **Notification System**:

- Popover/Modal display

- Real-time updates via WebSocket/polling

#### **Page Components**

1. **Home Page**:

- Hero section with image slider (3 cards)

- Card 1: "Earn by RH" → Button linking to RH system

 - Card 2: "Lucky Draw" → Button to raffle page

- Card 3: "Account Details" → Button to account page

2. **Account Page**:

- Wallet Balance display (animated numbers)

- Earnings Dashboard (Today/Total) with icons

- Interactive Slider (A-to-B motion with cooldown timer)

- Deposit/Withdraw buttons → Link to sub-pages

3. **Deposit Page**:

- Display blockchain address + QR code

- Transaction history table

4. **Withdraw Page**:

- Address input field with validation

- Amount selector with fee calculator

5. **Referral Page**:

- Unique referral code display

- Copy-to-clipboard functionality
 - Referral earnings tracker

5. Lucky draw

---

### **Phase 3: State Management**

1. Redux Store Structure:

- User Session (auth status, JWT)

- Wallet Data (balance, earnings)

- Notifications (list, unread count)

- Raffle System (active/past raffles)

2. Async Actions:

- API calls for balance updates

- Slider completion tracking

- Raffle participation

---

### **Phase 4: UI/UX Implementation**

1. Responsive Layout System

2. Theme Configuration:

- Color schemes matching brand

- Consistent typography

3. Animation System:

- Slider transitions

- Balance update effects

- Notification alerts

---

### **Phase 5: Integration**

1. API Connection:

- Axios interceptors for JWT

- Error handling (401/403/500 responses)

2. External Services:

- Cloudinary for image uploads

- Blockchain explorers for TX verification

---
### **Phase 6: Security**

1. Protected Routes:

- Auth guards for account pages

- Admin route protection

2. Input Sanitization:

- Address validation

- Amount checks (min/max)

---

### **Phase 7: Admin Panel**

1. Dashboard Layout:

- User management table

- Transaction approval interface

2. Admin Features:

- Raffle creation form

- Notification broadcast system

- Image upload manager

---

### **Phase 8: Testing**

1. Unit Testing:

- Form validations

- Redux actions

2. User Flow Testing:

- Deposit/Withdraw process

- Raffle participation

- Referral system

---

### **Phase 9: Optimization**

1. Performance:

- Code splitting

- Lazy loading

2. Caching:

- API response caching

- Local storage for session data

1. Admin Panel Structure
Navigation Layout

 Sidebar Menu:
o Dashboard
o User Management
o Transaction Approvals
o Raffle Control
o Notifications
o Media Library
o Settings
 Role-Based Access:
o Visible only to users with isAdmin: true
o Protected routes with JWT validation

2. Core Admin Features

Dashboard

1. Analytics Widgets:
o Total Users
o Active Raffles
o Pending Transactions
o Daily Revenue
2. Charts:
o Earnings Trend (7/30 days)
o User Growth
3. Quick Actions:
o Create Raffle
o Broadcast Notification
o Adjust Balances

User Management

1. User List Table:

o Search/Pagination
o Columns: Email, Balance, Join Date, Status
2. User Actions:
o Ban/Unban
o Manual Balance Adjustment
 o View Transaction History
3. Referral Tracking:
o Display referral chains
o Export referral data

Transaction Management

1. Deposit/Withdraw Approval:
o Filter by status (Pending/Approved/Rejected)
o Bulk approval/rejection
o Blockchain TX verification tool
2. Address Whitelisting:
o Add/edit deposit addresses
o Upload QR codes via Cloudinary

Raffle Control

1. Raffle Creator:
o Form fields: Title, Ticket Price, End Time
o Preview mode
2. Active Raffles:
o Live participant counter
o Force-end raffle button
3. Winner Selection:
o Manual/Auto draw options
o Winner announcement panel

Notification System

1. Broadcast Center:
o Rich text editor
o Target selection (All/Group/Individual)
2. History Log:
o Sort by date/type
o Delete outdated notifications

Media Library

1. Image Uploader:
o Drag-and-drop interface
o Cloudinary integration
o Folder organization
2. Asset Management:
o Bulk delete
o Tagging system
o Usage analytics (e.g., QR code views)

3. UI/UX Requirements
1. Theme:
 o Dark mode preferred for admin workflows
o Customizable dashboard widgets
2. Responsiveness:
o Optimized for desktop (primary) and tablets
3. Security UI:
o Session timeout warnings
o 2FA enforcement for critical actions
4. Audit Trail:
o Action history log (Who did what and when)

4. Integration Steps
1. API Connections:
o Admin-specific endpoints (e.g., /api/admin/approve-txn)
o Real-time updates via WebSocket
2. Third-Party Services:
o Cloudinary for image storage
o reCAPTCHA for sensitive operations

2. Third-Party Services
o Cloudinary: Image storage for QR codes/banners
o Email Service (e.g., SendGrid): For OTP/notifications
o Blockchain Explorer: Verify deposit transactions
3. Cron Jobs
o Reset daily task slider every 23 hours
o Daily earnings calculation at midnight

5. Security Protocols
1. Access Control:
o IP whitelisting for admin login
o Session encryption
2. Input Validation:
o Sanitize all form fields
o Anti-XSS measures

6. Testing Checklist
1. Functional Tests:
o Bulk user banning
 o Raffle emergency stop
o Balance adjustment accuracy
2. Stress Tests:
o 500+ user pagination
o Concurrent transaction approvals

Phase 1: Project Setup

1. Initialize Node.js project with npm init
2. Install core dependencies:
o Express.js (Server framework)
o Mongoose (MongoDB ODM)
o JWT (Authentication)
o Cron (Scheduled tasks)
o Cloudinary SDK (Image uploads)
3. Configure server:
o Set up Express middleware (CORS, body-parser)
o Create .env for environment variables
o Establish MongoDB connection

Phase 2: Database Design

1. Create MongoDB schemas:
o User: email, password, role, walletBalance, lastSlideTime
o Wallet: userId, balance, totalProfit, dailyEarnings
o Transaction: userId, amount, type (deposit/withdraw), status
o Raffle: title, ticketPrice, participants, winner, endTime
o Notification: content, type, createdAt
o AdminWallet: network, address, qrCode
Phase 3: Authentication System
1. Implement JWT-based authentication:
o Admin/user login endpoints
o Password hashing with bcrypt
2. Create middleware:
o Admin role verification
o Token validation

Phase 4: Core Features Implementation

Daily Task Slider

1. Create endpoint to track slider completion

2. Add 23-hour cooldown logic
3. Update wallet balance on successful slide

Wallet & Earnings

1. Develop balance update system:

o Add/Subtract funds on deposits/withdrawals
2. Track daily earnings with auto-reset (cron job)
3. Calculate total profit from all sources

Deposit/Withdraw System

1. Integrate blockchain address validation

2. Process transactions:
o Verify minimum amounts
o Apply service fees
3. Add admin approval workflow for withdrawals

Raffle System

1. Create raffle management endpoints:

o Start/End raffles
o Handle ticket purchases
o Select winners automatically
2. Deduct ticket costs from user balances

Notifications

1. Build CRUD endpoints for notifications

2. Implement real-time updates using WebSockets

Phase 5: Admin-Specific Features

 1. Admin dashboard endpoints:
o Adjust user balances manually
o Approve/Reject transactions
o Manage deposit addresses (add/edit/disable)
2. Image upload system:
o Configure Cloudinary integration
o Store image URLs in database
3. Audit logging:
o Track all admin actions

Phase 6: Security Implementation

1. Add middleware for:
o Rate limiting (prevent API abuse)
o Input validation/sanitization
o IP whitelisting (for admin routes)
2. Implement encryption for sensitive data

Phase 7: Scheduled Tasks

1. Configure cron jobs for:
o Daily earnings reset (00:00 UTC)
o Raffle expiration checks (every 30 mins)
o Cooldown period refreshes

Phase 8: API Documentation

1. Create Swagger/Postman documentation
2. Define all endpoints with:
o Request/Response formats
o Error codes
o Authentication requirements
Navbar rafrance code needs this like navbar
import { useState } from 'react';

const Navbar = () => {

const [mobileNavOpen, setMobileNavOpen] =
useState(false);
const [isDropdownOpen, setIsDropdownOpen] =
useState(false);

return (
<nav className="relative py-6 bg-transparent">
<div className="container px-4 mx-auto">
<div className="flex items-center">
{/* Logo */}
<a className="inline-block text-lg font-bold"
href="#">
<img className="h-10"
src="/saturn-assets/logos/logo-saturn-dark.svg" alt="Saturn
Logo" width="auto"/>
</a>

{/* Mobile Menu Button */}

<div className="lg:hidden ml-auto">
<button
onClick={() => setMobileNavOpen(!mobileNavOpen)}
 className="flex w-12 h-12 items-center justify-
center bg-gray-100 hover:bg-gray-200 rounded-md
transition duration-200"
>
<svg width="24" height="24" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12H21" stroke="black"
strokeWidth="2" strokeLinecap="round"
strokeLinejoin="round"/>
<path d="M3 6H21" stroke="black"
strokeWidth="2" strokeLinecap="round"
strokeLinejoin="round"/>
<path d="M3 18H21" stroke="black"
strokeWidth="2" strokeLinecap="round"
strokeLinejoin="round"/>
</svg>
</button>
</div>

{/* Desktop Navigation */}

<div className="hidden lg:flex ml-14 lg:w-auto
lg:space-x-12">
<div
className="relative group"
onMouseEnter={() => setIsDropdownOpen(true)}
onMouseLeave={() => setIsDropdownOpen(false)}
>
 <button className="text-sm text-gray-900
hover:text-orange-900 font-medium">
Featured
</button>

{isDropdownOpen && (
<div className="absolute top-full left-0 min-w-max
max-w-xs p-4 z-30">
<div className="w-full max-w-xs bg-white border
border-gray-100 rounded-3xl pt-4 pb-4 px-4">
<div className="pb-3 mb-3 border-b border-
gray-100">
<a className="block py-3 px-4 text-sm
hover:bg-orange-50 rounded-lg" href="#">Featured</a>
<a className="block py-3 px-4 text-sm
hover:bg-orange-50 rounded-lg" href="#">Solutions</a>
</div>
<div className="pb-3 mb-3 border-b border-
gray-100">
<a className="flex items-center py-3 px-4 text-
sm hover:bg-orange-50 rounded-lg" href="#">
<img
src="/saturn-assets/images/headers/icon-download.svg"
alt=""/>
<span className="ml-3">Download</span>
</a>
<a className="flex items-center py-3 px-4 text-
sm hover:bg-orange-50 rounded-lg" href="#">
 <img
src="/saturn-assets/images/headers/icon-slack.svg" alt=""/>
<span className="ml-3">Community</span>
</a>
<a className="flex items-center py-3 px-4 text-
sm hover:bg-orange-50 rounded-lg" href="#">
<img
src="/saturn-assets/images/headers/icon-help.svg" alt=""/>
<span className="ml-3">Help</span>
</a>
</div>
<div className="flex items-center pb-3 mb-3
border-b border-gray-100">
<a className="px-4 py-3 mr-6 text-sm font-
semibold text-orange-900 hover:text-gray-900"
href="#">Sign In</a>
<a className="py-3 px-4 text-sm font-semibold
text-orange-900 hover:text-white border border-gray-200
hover:border-orange-600 hover:bg-orange-900 rounded-md
transition duration-200" href="#">
Create an account
</a>
</div>
<div className="flex items-center">
<div className="flex w-10 h-10 items-center
justify-center bg-orange-50 rounded-full">
 <img
src="/saturn-assets/images/headers/icon-email-me.svg"
alt=""/>
</div>
<div className="ml-3">
<span className="block text-xs text-gray-
500">Drop us a line</span>
<a className="text-sm font-semibold
hover:text-orange-900" href="#">hello@shuffle.dev</a>
</div>
</div>
</div>
</div>
)}
</div>

{/* Navigation Links */}

{['Solutions', 'Products', 'Articles'].map((item) => (
<a key={item} className="text-sm text-gray-900
hover:text-orange-900 font-medium" href="#">
{item}
</a>
))}
</div>

{/* Desktop Auth Buttons */}

<div className="hidden lg:block ml-auto">
<div className="flex items-center">
 <a className="inline-block mr-9 text-sm font-
semibold text-orange-900 hover:text-gray-900" href="#">
Sign In
</a>
<a className="relative group inline-block py-3 px-4
text-sm font-semibold text-orange-900 hover:text-white
border border-gray-200 rounded-md overflow-hidden
transition duration-300" href="#">
<div className="absolute top-0 right-full w-full h-
full bg-orange-900 transform group-hover:translate-x-full
group-hover:scale-102 transition duration-500"/>
<span className="relative">Create an
account</span>
</a>
</div>
</div>
</div>
</div>

{/* Mobile Navigation */}

{mobileNavOpen && (
<div className="fixed inset-0 z-50">
<div
className="fixed inset-0 bg-gray-800 opacity-25"
onClick={() => setMobileNavOpen(false)}
/>
<nav className="relative flex flex-col py-6 px-10 w-
5/6 max-w-md h-full bg-white border-r overflow-y-auto">
 <div className="flex items-center mb-16">
<a className="mr-auto text-2xl font-medium
leading-none" href="#">
<img className="h-10"
src="/saturn-assets/logos/logo-saturn-dark.svg" alt="Saturn
Logo" width="auto"/>
</a>
<button onClick={() => setMobileNavOpen(false)}>
<svg className="h-6 w-6 text-gray-500 cursor-
pointer hover:text-gray-500" fill="none" viewBox="0 0 24
24" stroke="currentColor">
<path strokeLinecap="round"
strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6
6l12 12"/>
</svg>
</button>
</div>

<div>
<ul className="mb-2">
{['About Us', 'Featured', 'Solutions', 'Products',
'Articles'].map((item) => (
<li key={item}>
<a className="block py-4 px-5 text-gray-900
hover:bg-orange-50 rounded-lg" href="#">
{item}
</a>
</li>
))}
 </ul>

<div className="py-8 px-6 mb-6 border-t border-b

border-gray-200">
<a className="flex items-center text-sm font-
semibold text-orange-900 hover:text-orange-600" href="#">
<svg width="18" height="16" viewBox="0 0 18 16"
fill="currentColor">
<path d="M17.3337 6.05833C17.2811 5.9059
17.1854 5.77202 17.0582 5.67292C16.931 5.57381 16.7777
5.51374 16.617 5.5L11.8754 4.80833L9.75038
0.499999C9.68215 0.359106 9.5756 0.240284 9.44296
0.157143C9.31031 0.074003 9.15693 0.0299072 9.00039
0.0299072C8.84384 0.0299072 8.69046 0.074003 8.55781
0.157143C8.42517 0.240284 8.31862 0.359106 8.25039
0.499999L6.12539 4.8L1.38372 5.5C1.22949 5.52192
1.08449 5.58663 0.96518 5.6868C0.845868 5.78696
0.757021 5.91856 0.708721 6.06666C0.664509 6.21139
0.660541 6.36543 0.697245 6.51224C0.733948 6.65905
0.809936 6.7931 0.917055 6.9L4.35872 10.2333L3.52539
14.9667C3.49564 15.1229 3.51121 15.2844 3.57028
15.432C3.62935 15.5797 3.72943 15.7074 3.85872
15.8C3.98474 15.8901 4.13337 15.9433 4.28793
15.9536C4.44249 15.9639 4.59686 15.9309 4.73372
15.8583L9.00039 13.6333L13.2504 15.8667C13.3673
15.9326 13.4994 15.9671 13.6337 15.9667C13.8102 15.9673
13.9824 15.9118 14.1254 15.8083C14.2547 15.7157 14.3548
15.588 14.4138 15.4404C14.4729 15.2927 14.4885 15.1312
14.4587 14.975L13.6254 10.2417L17.067 6.90833C17.1874
6.8064 17.2763 6.67242 17.3235 6.52195C17.3707 6.37149
17.3742 6.21073 17.3337 6.05833ZM12.2087
9.39166C12.111 9.48619 12.0379 9.6032 11.9957
9.73247C11.9536 9.86175 11.9438 9.99937 11.9671
10.1333L12.5671 13.625L9.43372 11.9583C9.31315 11.8941
9.17865 11.8605 9.04205 11.8605C8.90546 11.8605 8.77095
11.8941 8.65039 11.9583L5.51705 13.625L6.11705
10.1333C6.14033 9.99937 6.13048 9.86175 6.08836
9.73247C6.04623 9.6032 5.97312 9.48619 5.87539
9.39166L3.37539 6.89166L6.88372 6.38333C7.01872
6.36455 7.14705 6.31295 7.25747 6.23304C7.36789 6.15313
7.45702 6.04736 7.51705 5.925L9.00039 2.75L10.5671
5.93333C10.6271 6.0557 10.7162 6.16147 10.8266
6.24137C10.9371 6.32128 11.0654 6.37289 11.2004
6.39166L14.7087 6.9L12.2087 9.39166Z"/>
</svg>
<span className="ml-3">Upgrade to
Premium</span>
</a>
</div>

<div className="flex px-6 mb-16 items-center">

<a className="inline-block mr-9 text-sm font-
semibold text-orange-900 hover:text-gray-900" href="#">
Sign In
</a>
<a className="inline-block py-3 px-4 text-sm font-
semibold text-orange-900 hover:text-white border border-
gray-300 hover:border-orange-600 hover:bg-orange-900
rounded-md transition duration-200" href="#">
Create an account
</a>
</div>

<div>
<div className="flex w-20 h-20 mb-6 items-center
justify-center bg-orange-50 rounded-full">
<svg width="29" height="28" viewBox="0 0 29 28"
fill="black">
<path d="M25.3333 16.6667C24.9797 16.6667
24.6406 16.8072 24.3905 17.0572C24.1405 17.3073 24
17.6464 24 18V23.3334C24 23.687 23.8595 24.0261 23.6095
24.2762C23.3594 24.5262 23.0203 24.6667 22.6667
24.6667H4C3.64638 24.6667 3.30724 24.5262 3.05719
24.2762C2.80714 24.0261 2.66667 23.687 2.66667
23.3334V10.5467L10.5067 18.4C11.2567 19.1491 12.2733
19.5698 13.3333 19.5698C14.3933 19.5698 15.41 19.1491
16.16 18.4L18.3467 16.2134C18.5977 15.9623 18.7388
15.6218 18.7388 15.2667C18.7388 14.9116 18.5977 14.5711
18.3467 14.32C18.0956 14.069 17.7551 13.9279 17.4
13.9279C17.0449 13.9279 16.7044 14.069 16.4533
14.32L14.2667 16.5067C14.0174 16.751 13.6823 16.8878
13.3333 16.8878C12.9843 16.8878 12.6492 16.751 12.4
16.5067L4.54667 8.66669H13.3333C13.687 8.66669
14.0261 8.52622 14.2761 8.27617C14.5262 8.02612 14.6667
7.68698 14.6667 7.33336C14.6667 6.97974 14.5262 6.6406
14.2761 6.39055C14.0261 6.1405 13.687 6.00002 13.3333
6.00002H4C2.93913 6.00002 1.92172 6.42145 1.17157
7.1716C0.421427 7.92174 0 8.93916 0 10V23.3334C0
24.3942 0.421427 25.4116 1.17157 26.1618C1.92172
26.9119 2.93913 27.3334 4 27.3334H22.6667C23.7275
27.3334 24.7449 26.9119 25.4951 26.1618C26.2452 25.4116
26.6667 24.3942 26.6667 23.3334V18C26.6667 17.6464
26.5262 17.3073 26.2761 17.0572C26.0261 16.8072 25.687
16.6667 25.3333 16.6667ZM27.6133 5.05336L23.6133
1.05336C23.4865 0.93197 23.337 0.836817 23.1733
0.773358C22.8487 0.64 22.4846 0.64 22.16
0.773358C21.9963 0.836817 21.8468 0.93197 21.72
1.05336L17.72 5.05336C17.4689 5.30443 17.3279 5.64496
17.3279 6.00002C17.3279 6.35509 17.4689 6.69562 17.72
(Due to technical issues, the search service is temporarily
unavailable.)

Here's the simplified React component containing only the

navbar code (both desktop and mobile):

```jsx
import { useState } from 'react';

const Navbar = () => {

const [mobileNavOpen, setMobileNavOpen] =
useState(false);

return (
<nav className="relative py-6 bg-transparent">
 <div className="container px-4 mx-auto">
<div className="flex items-center">
{/* Logo */}
<a className="inline-block text-lg font-bold"
href="#">
<img className="h-10"
src="/saturn-assets/logos/logo-saturn-dark.svg" alt="Saturn
Logo" width="auto"/>
</a>

{/* Mobile Menu Button */}

<div className="lg:hidden ml-auto">
<button
onClick={() => setMobileNavOpen(!mobileNavOpen)}
className="flex w-12 h-12 items-center justify-
center bg-gray-100 hover:bg-gray-200 rounded-md
transition duration-200"
>
<svg width="24" height="24" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12H21" stroke="black"
strokeWidth="2" strokeLinecap="round"
strokeLinejoin="round"/>
<path d="M3 6H21" stroke="black"
strokeWidth="2" strokeLinecap="round"
strokeLinejoin="round"/>
<path d="M3 18H21" stroke="black"
strokeWidth="2" strokeLinecap="round"
strokeLinejoin="round"/>
 </svg>
</button>
</div>

{/* Desktop Navigation */}

<ul className="hidden lg:flex ml-14 lg:w-auto
lg:space-x-12">
{['Featured', 'Solutions', 'Products',
'Articles'].map((item) => (
<li key={item}>
<a className="text-sm text-gray-900 hover:text-
orange-900 font-medium" href="#">
{item}
</a>
</li>
))}
</ul>

{/* Desktop Auth Buttons */}

<div className="hidden lg:block ml-auto">
<div className="flex items-center">
<a className="inline-block mr-9 text-sm font-
semibold text-orange-900 hover:text-gray-900" href="#">
Sign In
</a>
<a className="relative group inline-block py-3 px-4
text-sm font-semibold text-orange-900 hover:text-white
border border-gray-200 rounded-md overflow-hidden
transition duration-300" href="#">
<div className="absolute top-0 right-full w-full h-
full bg-orange-900 transform group-hover:translate-x-full
group-hover:scale-102 transition duration-500"/>
<span className="relative">Create an
account</span>
</a>
</div>
</div>
</div>
</div>

{/* Mobile Navigation */}

<div className={`fixed inset-0 z-50 ${mobileNavOpen ?
'block' : 'hidden'}`}>
<div
onClick={() => setMobileNavOpen(false)}
className="fixed inset-0 bg-gray-800 opacity-25"
/>
<nav className="relative flex flex-col py-6 px-10 w-5/6
max-w-md h-full bg-white border-r overflow-y-auto">
<div className="flex items-center mb-16">
<a className="mr-auto" href="#">
<img className="h-10"
src="/saturn-assets/logos/logo-saturn-dark.svg" alt="Saturn
Logo" width="auto"/>
</a>
 <button onClick={() => setMobileNavOpen(false)}>
<svg className="h-6 w-6 text-gray-500 hover:text-
gray-700" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round"
strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6
6l12 12"/>
</svg>
</button>
</div>

{/* Mobile Menu Items */}

<ul className="mb-2">
{['About Us', 'Featured', 'Solutions', 'Products',
'Articles'].map((item) => (
<li key={item}>
<a className="block py-4 px-5 text-gray-900
hover:bg-orange-50 rounded-lg" href="#">
{item}
</a>
</li>
))}
</ul>

{/* Mobile Auth Section */}

<div className="py-8 px-6 mb-6 border-t border-b
border-gray-200">
<a className="flex items-center text-sm font-
semibold text-orange-900 hover:text-orange-600" href="#">
 <svg width="18" height="16" viewBox="0 0 18 16"
fill="currentColor" className="mr-3">
<path d="M17.3337 6.05833C17.2811 5.9059
17.1854 5.77202 17.0582 5.67292C16.931 5.57381 16.7777
5.51374 16.617 5.5L11.8754 4.80833L9.75038
0.499999C9.68215 0.359106 9.5756 0.240284 9.44296
0.157143C9.31031 0.074003 9.15693 0.0299072 9.00039
0.0299072C8.84384 0.0299072 8.69046 0.074003 8.55781
0.157143C8.42517 0.240284 8.31862 0.359106 8.25039
0.499999L6.12539 4.8L1.38372 5.5C1.22949 5.52192
1.08449 5.58663 0.96518 5.6868C0.845868 5.78696
0.757021 5.91856 0.708721 6.06666C0.664509 6.21139
0.660541 6.36543 0.697245 6.51224C0.733948 6.65905
0.809936 6.7931 0.917055 6.9L4.35872 10.2333L3.52539
14.9667C3.49564 15.1229 3.51121 15.2844 3.57028
15.432C3.62935 15.5797 3.72943 15.7074 3.85872
15.8C3.98474 15.8901 4.13337 15.9433 4.28793
15.9536C4.44249 15.9639 4.59686 15.9309 4.73372
15.8583L9.00039 13.6333L13.2504 15.8667C13.3673
15.9326 13.4994 15.9671 13.6337 15.9667C13.8102 15.9673
13.9824 15.9118 14.1254 15.8083C14.2547 15.7157 14.3548
15.588 14.4138 15.4404C14.4729 15.2927 14.4885 15.1312
14.4587 14.975L13.6254 10.2417L17.067 6.90833C17.1874
6.8064 17.2763 6.67242 17.3235 6.52195C17.3707 6.37149
17.3742 6.21073 17.3337 6.05833ZM12.2087
9.39166C12.111 9.48619 12.0379 9.6032 11.9957
9.73247C11.9536 9.86175 11.9438 9.99937 11.9671
10.1333L12.5671 13.625L9.43372 11.9583C9.31315 11.8941
9.17865 11.8605 9.04205 11.8605C8.90546 11.8605 8.77095
11.8941 8.65039 11.9583L5.51705 13.625L6.11705
10.1333C6.14033 9.99937 6.13048 9.86175 6.08836
9.73247C6.04623 9.6032 5.97312 9.48619 5.87539
9.39166L3.37539 6.89166L6.88372 6.38333C7.01872
6.36455 7.14705 6.31295 7.25747 6.23304C7.36789 6.15313
7.45702 6.04736 7.51705 5.925L9.00039 2.75L10.5671
5.93333C10.6271 6.0557 10.7162 6.16147 10.8266
6.24137C10.9371 6.32128 11.0654 6.37289 11.2004
6.39166L14.7087 6.9L12.2087 9.39166Z"/>
</svg>
Upgrade to Premium
</a>
</div>

<div className="flex px-6 mb-16 items-center">

<a className="inline-block mr-9 text-sm font-
semibold text-orange-900 hover:text-gray-900" href="#">
Sign In
</a>
<a className="inline-block py-3 px-4 text-sm font-
semibold text-orange-900 hover:text-white border border-
gray-300 hover:border-orange-600 hover:bg-orange-900
rounded-md transition duration-200" href="#">
Create an account
</a>
</div>
 <div className="mt-auto">
<div className="flex w-20 h-20 mb-6 items-center
justify-center bg-orange-50 rounded-full">
<img src="/saturn-assets/images/headers/icon-
email-me.svg" alt="Contact"/>
</div>
<span className="block mb-3 text-sm text-gray-
500">Drop us a line</span>
<a className="font-semibold text-black hover:text-
orange-900" href="mailto:hello@shuffle.dev">
hello@shuffle.dev
</a>
</div>
</nav>
</div>
</nav>
);
};

export default Navbar;

const Header = () => {
return (
<section className="relative pb-20 overflow-hidden">
{/* Background images */}
<img className="absolute top-0 right-0 w-52 md:w-auto" src="saturn-
assets/images/headers/star-background-header.png" alt=""/>
<img className="absolute top-0 right-0 mt-10 mr-10"
src="saturn-assets/images/headers/light-orange-blue-1.png" alt=""/>
<img className="absolute top-0 right-0 mt-64 sm:mt-80 lg:mt-64 w-2/5
animate-moveHand" src="saturn-assets/images/headers/robot-hand-
header.png" alt=""/>

{/* Hero content */}

<div className="relative container px-4 mx-auto">
<div className="max-w-xl xl:max-w-4xl">
<h1 className="font-heading text-5xl xs:text-6xl md:text-8xl xl:text-10xl
font-bold text-gray-900 mb-8 sm:mb-14">
<span>World Best Tech Startup</span>
<span className="font-serif italic">Ever</span>
</h1>
<div className="md:flex mb-14 max-w-xs sm:max-w-sm md:max-w-
none">
<div className="mb-6 md:mb-0 md:mr-8 pt-3">
<svg width="84" height="10" viewBox="0 0 84 10" fill="none">
<path d="M1 4.25C0.585786 4.25 0.25 4.58579 0.25 5C0.25 5.41421
0.585786 5.75 1 5.75L1 4.25ZM84 5.00001L76.5 0.669879L76.5 9.33013L84
5.00001ZM1 5.75L77.25 5.75001L77.25 4.25001L1 4.25L1 5.75Z"
fill="#1E254C"/>
</svg>
</div>
<div className="max-w-md">
<p className="md:text-xl text-gray-900 font-semibold">
Saturn is a startup that's making the world a better place! We've been
working on our mission since 2021
</p>
</div>
 </div>
<a className="relative group inline-block w-full sm:w-auto py-4 px-6 mb-
24 text-white font-semibold rounded-md bg-orange-900 overflow-hidden"
href="#">
<div className="absolute top-0 right-full w-full h-full bg-gray-900
transform group-hover:translate-x-full group-hover:scale-102 transition
duration-500"/>
<div className="relative flex items-center justify-center">
<span className="mr-4">Meet The Expert</span>
<svg width="8" height="12" viewBox="0 0 8 12" fill="none">
<path d="M6.83 5.29L2.59 1.05C2.49704 0.956274 2.38644 0.881879
2.26458 0.83111C2.14272 0.780342 2.01202 0.754204 1.88 0.754204C1.74799
0.754204 1.61729 0.780342 1.49543 0.83111C1.37357 0.881879 1.26297
0.956274 1.17 1.05C0.983753 1.23736 0.879211 1.49082 0.879211
1.755C0.879211 2.01919 0.983753 2.27264 1.17 2.46L4.71 6L1.17
9.54C0.983753 9.72736 0.879211 9.98082 0.879211 10.245C0.879211 10.5092
0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961
11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207
11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83
6.71C6.92373 6.61704 6.99813 6.50644 7.04889 6.38458C7.09966 6.26272
7.1258 6.13201 7.1258 6C7.1258 5.86799 7.09966 5.73728 7.04889
5.61543C6.99813 5.49357 6.92373 5.38297 6.83 5.29Z" fill="#FFF2EE"/>
</svg>
</div>
</a>
</div>
</div>
</section>
);
};

export default Header;

Login from
import { useState, useRef, useEffect } from 'react';

const AuthSection = () => {

const [activeSlide, setActiveSlide] = useState(0);
const [slideWidth, setSlideWidth] = useState(0);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [rememberMe, setRememberMe] = useState(false);
const [showPassword, setShowPassword] = useState(false);

const slideRefs = [
useRef(null),
useRef(null),
useRef(null)
];

useEffect(() => {
const updateSlideWidth = () => {
if (slideRefs[activeSlide].current) {

setSlideWidth(slideRefs[activeSlide].current.offsetWidth);
}
};

updateSlideWidth();
window.addEventListener('resize', updateSlideWidth);
 return () => window.removeEventListener('resize',
updateSlideWidth);
}, [activeSlide]);

return (
<section className="relative py-20 lg:py-10 overflow-
hidden">
<div className="container px-4 mx-auto">
<div className="max-w-7xl mx-auto">
<div className="flex flex-wrap -mx-4 xl:items-
center">
{/* Testimonial Slider */}
<div className="w-full lg:w-1/2 xl:w-3/5 px-4 order-
last lg:order-first">
<div className="relative max-w-xl mx-auto lg:mx-0
lg:max-w-3xl h-full">
<img className="block w-full h-166 lg:h-full object-
cover rounded-3xl"
src="saturn-assets/images/sign-up/image-
face.png" alt=""/>

<div className="absolute bottom-0 w-full left-0 p-

4 sm:p-6">
<div className="p-6 sm:p-10 backdrop-blur-md
backdrop-filter bg-black bg-opacity-30 rounded-5xl">
<div className="overflow-hidden">
<div
className="flex transition-transform duration-
500 ease-in-out -m-5"
 style={{
transform: `translateX(-${slideWidth *
activeSlide}px)`,
width: `${slideWidth * 3}px`
}}
>
{[0, 1, 2].map((index) => (
<div
key={index}
ref={slideRefs[index]}
className="flex-shrink-0 h-full w-full p-5"
>
{/* Slide content */}
</div>
))}
</div>
</div>

<div className="flex">
{[0, 1, 2].map((index) => (
<button
key={index}
onClick={() => setActiveSlide(index)}
className={`inline-block mr-2 h-1 w-5
rounded-full cursor-pointer ${
activeSlide === index
? 'bg-blue-900'
: 'bg-white hover:bg-blue-100'
}`}
 />
))}
</div>
</div>
</div>
</div>
</div>

{/* Sign In Form */}

<div className="w-full lg:w-1/2 xl:w-2/5 px-4 mb-16
lg:mb-0">
<div className="max-w-md lg:py-20 mx-auto lg:mr-
0">
<h3 className="font-heading text-4xl text-gray-
900 font-semibold mb-4">
Sign in to your account
</h3>

<form onSubmit={(e) => e.preventDefault()}>

{/* Form fields */}
<div className="mb-6">
<label className="block mb-1.5 text-sm text-
gray-900 font-semibold">
Email
</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
 className="w-full py-3 px-4 text-sm
placeholder-gray-400 border border-gray-200 rounded-lg"
placeholder="pat@saturn.dev"
/>
</div>

<div className="mb-7">
<div className="flex mb-1.5 items-center justify-
between">
<label className="block text-sm text-gray-900
font-semibold">
Password
</label>
<a href="#" className="text-xs font-semibold
text-orange-900 hover:text-gray-900">
Forgot password?
</a>
</div>
<div className="relative">
<input
type={showPassword ? 'text' : 'password'}
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full py-3 px-4 text-sm
placeholder-gray-400 border border-gray-200 rounded-lg"
placeholder="Enter your password"
/>
<button
 type="button"
onClick={() => setShowPassword(!
showPassword)}
className="absolute top-1/2 right-3 transform
-translate-y-1/2"
>
<img src="saturn-assets/images/sign-up/icon-
eye.svg" alt="Toggle visibility"/>
</button>
</div>
</div>

<div className="flex mb-6 items-center">

<input
type="checkbox"
checked={rememberMe}
onChange={(e) =>
setRememberMe(e.target.checked)}
className="form-checkbox"
/>
<label className="ml-2 text-xs text-gray-800">
Remember for 30 days
</label>
</div>

<button
type="submit"
 className="relative group block w-full mb-6 py-3
px-5 text-sm font-semibold text-orange-50 bg-orange-900
rounded-full overflow-hidden"
>
Login
</button>
</form>

<p className="text-xs font-semibold text-gray-

900">
Don’t have an account?{' '}
<a href="#" className="text-orange-900
hover:text-orange-700">
Sign up
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
);
};

export default AuthSection;