@extends('layouts.app')

@section('title', 'adf')

@section('content')

<!DOCTYPE html>

<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            "colors": {
                    "on-secondary-fixed": "#002113",
                    "on-surface": "#191c1e",
                    "primary-fixed": "#dae2fd",
                    "surface-container-low": "#f2f4f6",
                    "tertiary": "#000000",
                    "error-container": "#ffdad6",
                    "outline-variant": "#c6c6cd",
                    "surface-tint": "#565e74",
                    "tertiary-container": "#0d1c2f",
                    "surface-container-high": "#e6e8ea",
                    "on-tertiary-container": "#76859b",
                    "surface-container-highest": "#e0e3e5",
                    "on-tertiary-fixed": "#0d1c2f",
                    "on-tertiary": "#ffffff",
                    "on-primary-fixed": "#131b2e",
                    "on-background": "#191c1e",
                    "surface-container": "#eceef0",
                    "on-primary-container": "#7c839b",
                    "outline": "#76777d",
                    "primary": "#000000",
                    "tertiary-fixed-dim": "#b9c7e0",
                    "inverse-surface": "#2d3133",
                    "primary-container": "#131b2e",
                    "surface-container-lowest": "#ffffff",
                    "secondary-fixed-dim": "#4edea3",
                    "secondary-fixed": "#6ffbbe",
                    "tertiary-fixed": "#d5e3fd",
                    "on-surface-variant": "#45464d",
                    "on-tertiary-fixed-variant": "#3a485c",
                    "on-primary-fixed-variant": "#3f465c",
                    "on-error": "#ffffff",
                    "on-secondary": "#ffffff",
                    "primary-fixed-dim": "#bec6e0",
                    "surface-variant": "#e0e3e5",
                    "inverse-on-surface": "#eff1f3",
                    "on-secondary-fixed-variant": "#005236",
                    "secondary-container": "#6cf8bb",
                    "surface-dim": "#d8dadc",
                    "surface-bright": "#f7f9fb",
                    "error": "#ba1a1a",
                    "on-primary": "#ffffff",
                    "surface": "#f7f9fb",
                    "background": "#f7f9fb",
                    "secondary": "#006c49",
                    "on-secondary-container": "#00714d",
                    "inverse-primary": "#bec6e0",
                    "on-error-container": "#93000a"
            },
            "borderRadius": {
                    "DEFAULT": "0.125rem",
                    "lg": "0.25rem",
                    "xl": "0.5rem",
                    "full": "0.75rem"
            },
            "spacing": {
                    "xl": "80px",
                    "base": "8px",
                    "lg": "48px",
                    "gutter": "24px",
                    "md": "24px",
                    "sm": "12px",
                    "xs": "4px",
                    "container-max": "1280px"
            },
            "fontFamily": {
                    "micro-copy": ["Inter"],
                    "label-sm": ["Inter"],
                    "label-bold": ["Inter"],
                    "headline-md": ["Manrope"],
                    "headline-lg": ["Manrope"],
                    "body-md": ["Inter"],
                    "body-lg": ["Inter"]
            },
            "fontSize": {
                    "micro-copy": ["13px", {"lineHeight": "1.4", "fontWeight": "400"}],
                    "label-sm": ["12px", {"lineHeight": "1.2", "fontWeight": "500"}],
                    "label-bold": ["14px", {"lineHeight": "1.2", "letterSpacing": "0.01em", "fontWeight": "600"}],
                    "headline-md": ["24px", {"lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "600"}],
                    "headline-lg": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "700"}],
                    "body-md": ["16px", {"lineHeight": "1.5", "fontWeight": "400"}],
                    "body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}]
            }
          },
        },
      }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            vertical-align: middle;
        }
        body { background-color: #f7f9fb; }
    </style>
</head>
<body class="font-body-md text-on-surface">
<!-- TopAppBar -->
<nav class="bg-white sticky top-0 z-50 border-b border-slate-200">
<div class="flex justify-between items-center h-16 px-4 md:px-8 max-w-[1280px] mx-auto">
<div class="text-xl font-bold text-slate-900 tracking-tight font-headline-md">
                LendFlow Institutional
            </div>
<div class="flex items-center gap-6">
<div class="hidden md:flex gap-8">
<a class="text-emerald-600 font-semibold border-b-2 border-emerald-600 font-manrope text-sm h-16 flex items-center" href="#">Application Guide</a>
<a class="text-slate-500 font-manrope text-sm h-16 flex items-center hover:text-slate-900 transition-colors" href="#">Loan Terms</a>
<a class="text-slate-500 font-manrope text-sm h-16 flex items-center hover:text-slate-900 transition-colors" href="#">Security Policy</a>
</div>
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-slate-500 cursor-pointer" data-icon="help">help</span>
<span class="material-symbols-outlined text-slate-500 cursor-pointer" data-icon="notifications">notifications</span>
<button class="bg-secondary text-white px-md py-xs rounded font-label-bold text-label-bold hover:opacity-90 transition-all">Save Progress</button>
</div>
</div>
</div>
</nav>
<div class="max-w-[1280px] mx-auto flex min-h-[calc(100vh-128px)]">
<!-- SideNavBar -->
<aside class="hidden lg:flex flex-col w-64 border-r border-slate-200 bg-slate-50 p-6 sticky top-16 h-[calc(100vh-64px)]">
<div class="mb-8">
<div class="flex items-center gap-3 mb-2">
<div class="w-10 h-10 bg-primary-container rounded-lg flex items-center justify-center">
<span class="material-symbols-outlined text-white" data-icon="account_balance">account_balance</span>
</div>
<div>
<div class="text-lg font-bold text-slate-900 font-headline-md">Resource Center</div>
<div class="text-xs text-slate-500 font-micro-copy">Loan Application Support</div>
</div>
</div>
</div>
<nav class="space-y-1 flex-1">
<a class="flex items-center gap-3 px-4 py-3 bg-white text-emerald-600 font-bold shadow-sm rounded-lg font-manrope text-sm transition-transform active:scale-[0.98]" href="#">
<span class="material-symbols-outlined" data-icon="info">info</span>
                    Application Guide
                </a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 rounded-lg font-manrope text-sm transition-all" href="#">
<span class="material-symbols-outlined" data-icon="description">description</span>
                    Loan Terms
                </a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 rounded-lg font-manrope text-sm transition-all" href="#">
<span class="material-symbols-outlined" data-icon="verified_user">verified_user</span>
                    Security Policy
                </a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 rounded-lg font-manrope text-sm transition-all" href="#">
<span class="material-symbols-outlined" data-icon="quiz">quiz</span>
                    FAQs
                </a>
</nav>
<button class="mt-auto w-full bg-secondary text-white py-3 rounded-lg font-label-bold flex items-center justify-center gap-2 hover:opacity-90">
<span class="material-symbols-outlined text-sm" data-icon="support_agent">support_agent</span>
                Speak to an Agent
            </button>
</aside>
<!-- Main Content Area -->
<main class="flex-1 p-4 md:p-12 overflow-y-auto">
<div class="max-w-3xl mx-auto">
<!-- Progress Stepper -->
<div class="mb-12">
<div class="flex items-center justify-between relative">
<div class="absolute top-1/2 left-0 w-full h-0.5 bg-slate-200 -z-10 -translate-y-1/2"></div>
<!-- Step 1 -->
<div class="flex flex-col items-center gap-2">
<div class="w-10 h-10 rounded-full bg-secondary text-white flex items-center justify-center font-bold shadow-sm">1</div>
<span class="text-xs font-label-bold text-on-surface">Personal</span>
</div>
<!-- Step 2 -->
<div class="flex flex-col items-center gap-2">
<div class="w-10 h-10 rounded-full bg-white border-2 border-secondary text-secondary flex items-center justify-center font-bold">2</div>
<span class="text-xs font-label-bold text-on-surface">Loan Details</span>
</div>
<!-- Step 3 -->
<div class="flex flex-col items-center gap-2">
<div class="w-10 h-10 rounded-full bg-slate-100 border-2 border-slate-200 text-slate-400 flex items-center justify-center font-bold">3</div>
<span class="text-xs font-label-bold text-slate-400">Financial</span>
</div>
<!-- Step 4 -->
<div class="flex flex-col items-center gap-2">
<div class="w-10 h-10 rounded-full bg-slate-100 border-2 border-slate-200 text-slate-400 flex items-center justify-center font-bold">4</div>
<span class="text-xs font-label-bold text-slate-400">Review</span>
</div>
</div>
</div>
<!-- Form Card -->
<div class="bg-white border border-outline-variant rounded-xl p-8 shadow-sm">
<header class="mb-8">
<h1 class="font-headline-lg text-headline-lg text-slate-900 mb-2">Personal Information</h1>
<p class="text-body-md text-slate-500">Please provide your legal details as they appear on your government-issued ID.</p>
</header>
<form class="space-y-6">
<!-- Two Column Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
<div class="space-y-1">
<label class="block font-label-bold text-label-bold text-slate-700">Full Legal Name</label>
<input class="w-full h-12 px-4 rounded-lg border border-outline focus:border-primary-container focus:ring-1 focus:ring-primary-container transition-all text-body-md" placeholder="Johnathan Doe" type="text"/>
<p class="text-micro-copy text-slate-400">Include middle name if applicable.</p>
</div>
<div class="space-y-1">
<label class="block font-label-bold text-label-bold text-slate-700">Date of Birth</label>
<input class="w-full h-12 px-4 rounded-lg border border-outline focus:border-primary-container focus:ring-1 focus:ring-primary-container transition-all text-body-md" type="date"/>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
<div class="space-y-1 relative">
<label class="block font-label-bold text-label-bold text-slate-700">Social Security Number</label>
<div class="relative">
<input class="w-full h-12 px-4 rounded-lg border border-outline focus:border-primary-container focus:ring-1 focus:ring-primary-container transition-all text-body-md" placeholder="XXX-XX-XXXX" type="password"/>
<span class="material-symbols-outlined absolute right-3 top-3 text-slate-400 cursor-pointer" data-icon="visibility">visibility</span>
</div>
<p class="text-micro-copy text-slate-400">Encrypted and masked for your security.</p>
</div>
<div class="space-y-1">
<label class="block font-label-bold text-label-bold text-slate-700">Phone Number</label>
<input class="w-full h-12 px-4 rounded-lg border border-outline focus:border-primary-container focus:ring-1 focus:ring-primary-container transition-all text-body-md" placeholder="+1 (555) 000-0000" type="tel"/>
</div>
</div>
<div class="space-y-1">
<label class="block font-label-bold text-label-bold text-slate-700">Email Address</label>
<input class="w-full h-12 px-4 rounded-lg border border-outline focus:border-primary-container focus:ring-1 focus:ring-primary-container transition-all text-body-md" placeholder="j.doe@example.com" type="email"/>
</div>
<div class="pt-8 flex justify-between items-center border-t border-slate-100">
<button class="text-slate-600 font-label-bold px-6 py-3 rounded-lg hover:bg-slate-50 transition-colors" type="button">Cancel</button>
<button class="bg-secondary text-white font-label-bold px-10 py-3 rounded-lg shadow-sm hover:opacity-90 transition-all" type="submit">Continue to Loan Details</button>
</div>
</form>
</div>
<!-- Informational Section (Bento Style) -->
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-2 bg-primary-container rounded-xl p-8 text-white relative overflow-hidden">
<div class="relative z-10">
<h3 class="font-headline-md text-headline-md mb-2">Institutional Security</h3>
<p class="text-body-md opacity-80 mb-6">Your data is protected by bank-grade AES-256 encryption. We never sell your personal information to third parties.</p>
<div class="flex items-center gap-2 text-secondary-fixed">
<span class="material-symbols-outlined" data-icon="verified">verified</span>
<span class="font-label-bold">SOC2 Type II Compliant</span>
</div>
</div>
<div class="absolute -right-10 -bottom-10 opacity-10">
<span class="material-symbols-outlined text-[160px]" data-icon="lock">lock</span>
</div>
</div>
<div class="bg-white border border-outline-variant rounded-xl p-8 flex flex-col items-center justify-center text-center">
<span class="material-symbols-outlined text-secondary text-4xl mb-4" data-icon="bolt">bolt</span>
<h4 class="font-headline-sm text-lg font-bold mb-1">Fast Approval</h4>
<p class="text-xs text-slate-500">90% of applicants receive a decision in under 24 hours.</p>
</div>
</div>
</div>
</main>
</div>
<!-- Footer -->
<footer class="bg-white border-t border-slate-200">
<div class="w-full py-8 px-4 md:px-8 max-w-[1280px] mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex flex-col md:flex-row items-center gap-6">
<span class="font-bold text-slate-900 font-manrope">LendFlow Financial Systems</span>
<div class="flex gap-4">
<a class="font-manrope text-xs text-slate-500 hover:text-emerald-600 transition-colors" href="#">Privacy Policy</a>
<a class="font-manrope text-xs text-slate-500 hover:text-emerald-600 transition-colors" href="#">Terms of Service</a>
<a class="font-manrope text-xs text-slate-500 hover:text-emerald-600 transition-colors" href="#">Security Disclosure</a>
<a class="font-manrope text-xs text-slate-500 hover:text-emerald-600 transition-colors" href="#">Contact Us</a>
</div>
</div>
<p class="font-manrope text-xs text-slate-500">© 2024 LendFlow Financial Systems. All rights reserved. Member FDIC. Equal Housing Lender.</p>
</div>
</footer>
<!-- Illustrative Background Element -->
<div class="fixed bottom-0 right-0 -z-50 w-1/3 h-1/2 opacity-5 pointer-events-none">
<img alt="Financial Abstract" class="w-full h-full object-cover" data-alt="A sophisticated abstract background featuring clean architectural lines and soft glass-like textures. The scene is illuminated by gentle morning light, creating subtle gradients of cool grays and crisp whites. Minimalist shapes suggest a modern financial institution's interior, evoking feelings of transparency, stability, and high-end professional reliability in a light-mode aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDIi7OP69p0O_1A79w9T6s_sTJchtbn4JUZpAlyoWdz8pDKJCEcSLbcUWueZuiOZKIxSkrS-5B-WzFZMzPO1tCZ6JFbg_HrQAw0O2Wel9RjRIvfES9lmuXzFgIQu1Po_7cAuhFQna1t7kizgpACe-VeQwqujr40zhBL3UeL1vKxlu_JvUaxZlm9vPpvtgWFhlOronEDxwiTMOjffb13-3mK5Vtu5yYIIpPORRSaUX8JGNrkHJzHV3HvlVmOYATiz7cs8Cy6iUclCzY5"/>
</div>
</body></html>

@endsection
