feat: added pages

packages/nextjs/app/login/page.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+import { X } from "lucide-react"
+import { LoginForm } from "~~/components/auth/login-form"
+
+export const metadata: Metadata = {
+  title: "Login | BrickChain",
+  description: "Sign in to your BrickChain account",
+}
+
+export default function LoginPage() {
+  return (
+    <div className="min-h-screen bg-white flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="relative bg-white border border-gray-200 rounded-2xl p-8 shadow-sm">
+
+
+          {/* Header */}
+          <div className="text-center mb-8">
+            <h1 className="text-3xl font-bold text-gray-900 mb-2">Welcome Back</h1>
+            <p className="text-gray-600">Sign in to your BrickChain account</p>
+          </div>
+
+          {/* Form */}
+          <LoginForm />
+
+          {/* Sign up link */}
+          <p className="text-center text-sm text-gray-600 mt-6">
+            Don't have an account?{" "}
+            <Link href="/onboarding" className="text-emerald-600 hover:text-emerald-700 font-medium">
+              Sign up
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/nextjs/app/onboarding/page.tsx

@@ -0,0 +1,122 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+import { Users, Building2, CheckCircle2, Briefcase, Building } from "lucide-react"
+
+export const metadata: Metadata = {
+  title: "Choose Your Path | BrickChain",
+  description: "Select how you'd like to join the BrickChain ecosystem",
+}
+
+export default function OnboardingPage() {
+  return (
+    <div className="min-h-screen bg-white flex items-center justify-center p-4">
+      <div className="w-full max-w-5xl">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold text-gray-900 mb-3">Choose Your Path</h1>
+          <p className="text-lg text-gray-600">Select how you'd like to join the BrickChain ecosystem</p>
+        </div>
+
+        {/* Cards */}
+        <div className="grid md:grid-cols-2 gap-6 mb-8">
+          {/* Investor Card */}
+          <Link
+            href="/signup?type=investor"
+            className="group relative bg-white border-2 border-gray-200 rounded-2xl p-8 hover:border-emerald-500 hover:shadow-lg transition-all"
+          >
+            {/* Icon */}
+            <div className="flex justify-center mb-6">
+              <div className="w-20 h-20 rounded-full bg-emerald-500 flex items-center justify-center group-hover:scale-110 transition-transform">
+                <Users className="w-10 h-10 text-white" />
+              </div>
+            </div>
+
+            {/* Title */}
+            <div className="text-center mb-4">
+              <div className="flex items-center justify-center gap-2 mb-2">
+                <Briefcase className="w-5 h-5 text-gray-700" />
+                <h2 className="text-2xl font-bold text-gray-900">I'm an Investor</h2>
+              </div>
+              <span className="inline-block px-3 py-1 bg-emerald-100 text-emerald-700 text-sm font-medium rounded-full">
+                Most Popular
+              </span>
+            </div>
+
+            {/* Description */}
+            <p className="text-center text-gray-600 mb-6">
+              Start investing in premium real estate with as little as 10,000 STRK
+            </p>
+
+            {/* Features */}
+            <div className="space-y-3">
+              <div className="flex items-center gap-3">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500 shrink-0" />
+                <span className="text-gray-700">Low minimum investment</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500 shrink-0" />
+                <span className="text-gray-700">Instant liquidity</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500 shrink-0" />
+                <span className="text-gray-700">Passive income</span>
+              </div>
+            </div>
+          </Link>
+
+          {/* Realtor Card */}
+          <Link
+            href="/signup?type=realtor"
+            className="group relative bg-white border-2 border-gray-200 rounded-2xl p-8 hover:border-blue-500 hover:shadow-lg transition-all"
+          >
+            {/* Icon */}
+            <div className="flex justify-center mb-6">
+              <div className="w-20 h-20 rounded-full bg-blue-500 flex items-center justify-center group-hover:scale-110 transition-transform">
+                <Building2 className="w-10 h-10 text-white" />
+              </div>
+            </div>
+
+            {/* Title */}
+            <div className="text-center mb-4">
+              <div className="flex items-center justify-center gap-2 mb-2">
+                <Building className="w-5 h-5 text-gray-700" />
+                <h2 className="text-2xl font-bold text-gray-900">I'm a Realtor</h2>
+              </div>
+              <span className="inline-block px-3 py-1 bg-blue-100 text-blue-700 text-sm font-medium rounded-full">
+                Professional
+              </span>
+            </div>
+
+            {/* Description */}
+            <p className="text-center text-gray-600 mb-6">
+              List and tokenize your properties on our blockchain platform
+            </p>
+
+            {/* Features */}
+            <div className="space-y-3">
+              <div className="flex items-center gap-3">
+                <CheckCircle2 className="w-5 h-5 text-blue-500 shrink-0" />
+                <span className="text-gray-700">List properties</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <CheckCircle2 className="w-5 h-5 text-blue-500 shrink-0" />
+                <span className="text-gray-700">Earn commissions</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <CheckCircle2 className="w-5 h-5 text-blue-500 shrink-0" />
+                <span className="text-gray-700">Manage listings</span>
+              </div>
+            </div>
+          </Link>
+        </div>
+
+        {/* Back to home */}
+        <div className="text-center">
+          <Link href="/" className="text-gray-600 hover:text-gray-900 text-sm">
+            ← Back to home
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/nextjs/app/page.tsx

@@ -1,18 +1,24 @@
-import { FeaturesSection } from "~~/components/veri-ai/features-section";
-import { Footer } from "~~/components/veri-ai/footer";
-import { Header } from "~~/components/veri-ai/header";
-import { HeroSection } from "~~/components/veri-ai/hero-section";
+import { BuiltForNigeria } from "~~/components/landing/built-for-nigeria";
+import { CTA } from "~~/components/landing/cta";
+import { Features } from "~~/components/landing/features";
+import { Footer } from "~~/components/landing/footer";
+import { Header } from "~~/components/landing/header";
+import { Hero } from "~~/components/landing/hero";
+import { Listings } from "~~/components/landing/listings";
+import { Process } from "~~/components/landing/process";
 
 
 export default function Home() {
   return (
-    <div className="min-h-screen bg-background">
+    <main className="min-h-screen bg-white">
       <Header />
-      <main>
-        <HeroSection />
-        <FeaturesSection />
-      </main>
+      <Hero/>
+      <Features />
+      <Listings />
+      <BuiltForNigeria />
+      <Process />
+      <CTA />
       <Footer />
-    </div>
+    </main>
   )
 }

packages/nextjs/app/properties/page.tsx

@@ -0,0 +1,31 @@
+
+import { Footer } from "~~/components/landing/footer"
+import { Header } from "~~/components/landing/header"
+import { PropertiesList } from "~~/components/landing/properties-list"
+
+export default function PropertiesPage() {
+  return (
+    <main className="min-h-screen bg-white">
+      <Header />
+
+      {/* Page Header */}
+      <section className="bg-white px-4 py-4 sm:px-6 lg:px-8 border-b border-gray-200">
+        <div className="mx-auto max-w-7xl">
+          <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 mb-4 text-balance">Browse All Properties</h1>
+          <p className="text-lg text-gray-600 mb-8">
+            Discover premium real estate investment opportunities on Starknet
+          </p>
+        </div>
+      </section>
+
+      {/* Properties Section */}
+      <section className="bg-white px-4 py-12 sm:px-6 lg:px-8">
+        <div className="mx-auto max-w-7xl">
+          <PropertiesList />
+        </div>
+      </section>
+
+      <Footer />
+    </main>
+  )
+}

packages/nextjs/app/signup/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+import { X } from "lucide-react"
+import { RealtorSignupForm } from "~~/components/auth/realtor-signup-form"
+import { InvestorSignupForm } from "~~/components/auth/investor-signup-form"
+
+
+export const metadata: Metadata = {
+  title: "Sign Up | BrickChain",
+  description: "Create your BrickChain account",
+}
+
+type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>
+
+export default async function SignupPage(props: { searchParams: SearchParams }) {
+  const searchParams = await props.searchParams
+  const type = searchParams.type as string | undefined
+  const isRealtor = type === "realtor"
+
+  return (
+    <div className="min-h-screen bg-white flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="relative bg-white border border-gray-200 rounded-2xl p-8 shadow-sm">
+
+
+          {/* Header */}
+          <div className="text-center mb-8">
+            <h1 className="text-3xl font-bold text-gray-900 mb-2">
+              {isRealtor ? "Register as realtor" : "Create Account"}
+            </h1>
+            <p className="text-gray-600">
+              {isRealtor ? "Fill in your details to get started" : "Join BrickChain and start investing"}
+            </p>
+          </div>
+
+          {/* Form */}
+          {isRealtor ? <RealtorSignupForm /> : <InvestorSignupForm />}
+        </div>
+      </div>
+    </div>
+  )
+}