Create Home Page

[respp]

📘 Issue Description

Design and develop the new homepage the StellarRent (apps/web/src/app/page.tsx), replacing the current placeholder. This hero page should be visually appealing, functional, and aligned with the MVP goals, allowing users to easily explore properties, understand how the platform works, and drive engagement.

---

🎯 Objectives

• Build a striking Hero Section with a clear value proposition.
• Implement an advanced search bar (location, dates, guests) with autocomplete.
• Display a featured properties grid (with lazy loading if possible).
• Add informative sections: How It Works and Testimonials.
• Include a footer with key navigation links.

---

🔍 Technical Steps

1. Hero Section

   • Create HeroSection.tsx in components/layout/ or components/shared/
   • Message: “Rent properties instantly with cryptocurrency”
   • Background: gradient (from-blue-900 to-white) with subtle tw-animate-css transitions
   • CTA Buttons: "Explore Properties" and "List My Property"
   • Fully responsive and mobile-first design

2. Search Bar

   • Create SearchBar.tsx in components/features/search/
   • Fields:
     • Location (autocomplete)
     • Check-in/out dates (using shadcn/ui DatePicker)
     • Guests count (shadcn/ui Select/Input)
   • Validation with zod
   • Manage search query state globally or locally

3. Featured Properties Grid

   • Create FeaturedProperties.tsx in components/features/properties/
   • Display 6-8 mock properties with:
     • Image, title, price in USDC, location, star rating
     • "View Details" button linking to /property/[id]
   • Lazy load items using React.Suspense or IntersectionObserver
   • Use Lucide-react for icons and clsx for conditional classes

4. How It Works Section

   • Create HowItWorks.tsx in components/shared/
   • 3 clear steps: Explore → Book → Pay with crypto
   • Grid layout with icons and concise copy

5. Testimonials Section

   • Create Testimonials.tsx in components/shared/
   • 2–3 real or dummy testimonials with name, avatar, and feedback
   • Optional: auto-animated slider

6. Footer

   • Create Footer.tsx in components/layout/ or shared/
   • Links: “How It Works”, “FAQs”, “Contact”, and social media

7. Integration

   • Replace content in app/page.tsx with the new layout
   • Use proper modular composition
   • Unified styling with Tailwind, shadcn/ui, and dark/light mode via next-themes

---

✅ Acceptance Criteria

Functionality

• Hero is rendered properly with working CTAs
• Search bar works and validates input
• Featured properties are displayed dynamically
• Informational sections are present and visually distinct
• Footer navigation is functional

Security

• All input fields validated via zod
• No unsafe rendering or direct injection of user input
• Safe autocomplete implementation

UX/UI

• Fully responsive layout
• Mobile-first design
• Smooth, subtle animations
• Clear visual hierarchy and consistent spacing
• Dark/Light Mode Support:
  • Font: Quicksand used across all sections
  • In light mode:
    • Background: #CFF0FF
    • Text color: #182A47
    • CTA buttons should contrast well with the background (e.g., deep blue or dark teal)
  • In dark mode:
    • Background: #0B1D39
    • Text color: #C2F2FF
    • Components (search bar, cards) must adapt using dark: variants in Tailwind
  • Theme switching handled via next-themes

Code Quality

• Logical component separation
• Strict typing via TypeScript
• Linting and code standards followed (ESLint)
• Clean, reusable component structure

---

🧪 Test Scenarios

1. User lands on the homepage and sees the hero section on both mobile and desktop.
2. User types a location and sees autocomplete suggestions.
3. User clicks on a featured property and is redirected to the detail page.
4. User reads and understands the 3-step flow in the "How It Works" section.
5. User navigates using footer links.
6. The layout works flawlessly on different screen sizes and devices.

---

🌎 References

• Airbnb for layout inspiration
• Shadcn UI Components
• Tailwind UI marketing sections

---

🔒 Security Requirements

• All form inputs must be validated via zod
• Never render untrusted strings directly
• Prevent XSS via autocomplete or mock data

---

🛠️ Technologies Used

• Next.js (next)
• TailwindCSS (tailwindcss, @tailwindcss/postcss, tailwind-merge)
• tw-animate-css
• Lucide-react
• Next-themes
• Zod
• @simplewebauthn/browser
• @stellar/stellar-sdk
• base64url, bigint-conversion, cbor-x
• clsx, class-variance-authority
• TypeScript
• ESLint
• shadcn/ui

---

I’ve attached an example of the expected appearance, followed by a visual guide. This document is not purely textual, suggestions for design improvements and creative input are encouraged and appreciated.

[Lynndabel]

Hi! I’d love to be assigned to this homepage redesign issue.

I’m comfortable working with Next.js, Tailwind, TypeScript, and shadcn/ui, and I’m excited to contribute to this project. I’d also be happy to offer suggestions or improvements along the way.

Thanks you

[SudiptaPaul-31]

My name is Sudipta Paul a full stack and blockchain developer with experience of more than two years and also being an active contributor to OD. May I be assigned to this task?

[respp]

the issue is yours @Lynndabel