355 lines
22 KiB
HTML
355 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Edit Customer - AfterSales CRM</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"outline": "#727785",
|
|
"on-tertiary-fixed": "#311400",
|
|
"on-tertiary": "#ffffff",
|
|
"primary": "#0058be",
|
|
"surface-container-highest": "#e1e2ec",
|
|
"error": "#ba1a1a",
|
|
"surface-container": "#ecedf7",
|
|
"secondary-container": "#dce2f3",
|
|
"on-tertiary-fixed-variant": "#723600",
|
|
"secondary-fixed": "#dce2f3",
|
|
"tertiary-fixed": "#ffdcc6",
|
|
"on-primary-fixed": "#001a42",
|
|
"surface-variant": "#e1e2ec",
|
|
"inverse-on-surface": "#eff0fa",
|
|
"background": "#f9f9ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-bright": "#f9f9ff",
|
|
"surface": "#f9f9ff",
|
|
"on-tertiary-container": "#fffbff",
|
|
"surface-container-high": "#e6e7f2",
|
|
"on-primary": "#ffffff",
|
|
"outline-variant": "#c2c6d6",
|
|
"on-background": "#191b23",
|
|
"inverse-surface": "#2e3038",
|
|
"surface-dim": "#d8d9e3",
|
|
"on-error": "#ffffff",
|
|
"inverse-primary": "#adc6ff",
|
|
"primary-fixed-dim": "#adc6ff",
|
|
"on-secondary-fixed": "#151c27",
|
|
"on-secondary-container": "#5e6572",
|
|
"on-primary-container": "#fefcff",
|
|
"tertiary-container": "#b75b00",
|
|
"surface-tint": "#005ac2",
|
|
"on-primary-fixed-variant": "#004395",
|
|
"on-secondary-fixed-variant": "#404754",
|
|
"on-error-container": "#93000a",
|
|
"primary-fixed": "#d8e2ff",
|
|
"on-surface": "#191b23",
|
|
"on-secondary": "#ffffff",
|
|
"tertiary-fixed-dim": "#ffb786",
|
|
"surface-container-low": "#f2f3fd",
|
|
"tertiary": "#924700",
|
|
"secondary": "#585f6c",
|
|
"on-surface-variant": "#424754",
|
|
"error-container": "#ffdad6",
|
|
"secondary-fixed-dim": "#c0c7d6",
|
|
"primary-container": "#2170e4"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"nav-height": "56px",
|
|
"margin-x": "1.5rem",
|
|
"gutter": "1rem",
|
|
"container-max": "1280px",
|
|
"grid-columns-desktop": "12",
|
|
"stack-gap": "1.5rem",
|
|
"form-gap": "1.25rem"
|
|
},
|
|
"fontFamily": {
|
|
"h1": ["Manrope"],
|
|
"body-base": ["Inter"],
|
|
"h2": ["Manrope"],
|
|
"button": ["Inter"],
|
|
"body-sm": ["Inter"],
|
|
"label-semibold": ["Inter"],
|
|
"h3": ["Manrope"]
|
|
},
|
|
"fontSize": {
|
|
"h1": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
|
|
"body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
|
|
"h2": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
|
|
"button": ["14px", { "lineHeight": "20px", "fontWeight": "500" }],
|
|
"body-sm": ["12px", { "lineHeight": "16px", "fontWeight": "400" }],
|
|
"label-semibold": ["14px", { "lineHeight": "20px", "fontWeight": "600" }],
|
|
"h3": ["18px", { "lineHeight": "24px", "fontWeight": "600" }]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.material-symbols-outlined.fill {
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body-base min-h-screen flex flex-col">
|
|
<!-- TopNavBar -->
|
|
<header class="bg-white dark:bg-gray-900 font-manrope text-sm font-medium docked full-width top-0 border-b border-b border-gray-200 dark:border-gray-800 shadow-sm sticky top-0 z-50 flex items-center justify-between w-full h-14 px-6 max-w-[1280px] mx-auto">
|
|
<div class="flex items-center gap-8">
|
|
<div class="text-xl font-bold text-blue-600 dark:text-blue-400">AfterSales CRM</div>
|
|
<nav class="hidden md:flex gap-6 items-center h-full">
|
|
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full pt-1" href="#">Feedback</a>
|
|
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full pt-1" href="#">Products</a>
|
|
<a class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 pb-1 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full pt-1" href="#">Customers</a>
|
|
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full pt-1" href="#">Channels</a>
|
|
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full pt-1" href="#">Tags</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center justify-center w-8 h-8 rounded-full">
|
|
<span class="material-symbols-outlined text-[20px]">notifications</span>
|
|
</button>
|
|
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center justify-center w-8 h-8 rounded-full">
|
|
<span class="material-symbols-outlined text-[20px]">settings</span>
|
|
</button>
|
|
<div class="w-8 h-8 rounded-full bg-surface-container overflow-hidden border border-outline-variant flex-shrink-0 ml-2">
|
|
<img alt="User profile" class="w-full h-full object-cover" data-alt="close up portrait of a professional man in a modern office environment with soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBO4yq_Aan0j2nuVXjQc-EslHqkxgUACCMlmngyoq8rMbOWTx31dbPPXxV4dPegkdtZLScBNW08dJlKE7FwENp0TjvR1K78ixpYqglg56lpC0lucZiHATRe7LZanaoBuBvh8InaMSSsJyF4QBWdKelBXmR4h4KEkv8G8YYGMC5rr9_aaGkczYPk24EMqFPqIZ1P2A5j17ps_REz3LhWI8MKOLhQPrm7QrnX-MySCLWAnu9u0uFxeEABjOX4VXKnI0h0_dBlUC06VT8"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Canvas -->
|
|
<main class="flex-1 w-full max-w-[1280px] mx-auto px-margin-x py-8 flex flex-col gap-stack-gap">
|
|
<!-- Header Section -->
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
|
<div>
|
|
<div class="flex items-center gap-2 text-on-surface-variant font-body-sm text-body-sm mb-1">
|
|
<a class="hover:text-primary transition-colors" href="#">Customers</a>
|
|
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
|
<span class="text-on-surface">Alex Mercer</span>
|
|
</div>
|
|
<h1 class="font-h1 text-h1 text-on-background flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded bg-primary-fixed text-on-primary-fixed flex items-center justify-center font-bold text-lg">AM</div>
|
|
Edit Customer Profile
|
|
</h1>
|
|
</div>
|
|
<div class="flex items-center gap-3 w-full md:w-auto">
|
|
<button class="flex-1 md:flex-none bg-surface-container-lowest text-on-surface border border-outline-variant font-button text-button rounded-lg px-4 py-2 hover:bg-surface-container transition-colors focus:ring-2 focus:ring-primary/20 outline-none" type="button">Cancel</button>
|
|
<button class="flex-1 md:flex-none bg-primary text-on-primary font-button text-button rounded-lg px-4 py-2 hover:bg-surface-tint transition-colors shadow-sm focus:ring-2 focus:ring-primary/20 outline-none flex items-center justify-center gap-2" type="button">
|
|
<span class="material-symbols-outlined text-[18px]">save</span>
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
|
<!-- Left Column: Form -->
|
|
<div class="lg:col-span-4 flex flex-col gap-6">
|
|
<!-- Contact Info Card -->
|
|
<div class="bg-surface-container-lowest shadow-sm rounded-xl border border-outline-variant overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-outline-variant bg-surface-bright flex items-center justify-between">
|
|
<h2 class="font-h3 text-h3 text-on-surface">Contact Information</h2>
|
|
</div>
|
|
<div class="p-6 flex flex-col gap-form-gap">
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Full Name</label>
|
|
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" type="text" value="Alex Mercer"/>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Email Address</label>
|
|
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" type="email" value="alex.mercer@example.com"/>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Phone Number</label>
|
|
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" type="tel" value="+1 (555) 019-2834"/>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Account Status</label>
|
|
<div class="flex items-center gap-3">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input checked="" class="w-4 h-4 text-primary bg-surface-container-lowest border-outline-variant focus:ring-primary" name="status" type="radio" value="active"/>
|
|
<span class="font-body-base text-body-base text-on-surface">Active</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input class="w-4 h-4 text-primary bg-surface-container-lowest border-outline-variant focus:ring-primary" name="status" type="radio" value="inactive"/>
|
|
<span class="font-body-base text-body-base text-on-surface">Inactive</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Owned Products Card -->
|
|
<div class="bg-surface-container-lowest shadow-sm rounded-xl border border-outline-variant overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-outline-variant bg-surface-bright flex items-center justify-between">
|
|
<h2 class="font-h3 text-h3 text-on-surface">Owned Products</h2>
|
|
<button class="text-primary hover:text-surface-tint flex items-center gap-1 font-button text-button transition-colors" type="button">
|
|
<span class="material-symbols-outlined text-[18px]">add</span>
|
|
Add
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex flex-wrap gap-2">
|
|
<div class="inline-flex items-center gap-1.5 bg-secondary-container text-on-secondary-container font-body-sm text-body-sm px-2.5 py-1.5 rounded-lg border border-outline-variant/30">
|
|
<span>Pro Series Router AC3200</span>
|
|
<button class="hover:text-error transition-colors flex items-center justify-center rounded-full p-0.5 hover:bg-white/50"><span class="material-symbols-outlined text-[14px]">close</span></button>
|
|
</div>
|
|
<div class="inline-flex items-center gap-1.5 bg-secondary-container text-on-secondary-container font-body-sm text-body-sm px-2.5 py-1.5 rounded-lg border border-outline-variant/30">
|
|
<span>Mesh Wi-Fi Node (Gen 2)</span>
|
|
<button class="hover:text-error transition-colors flex items-center justify-center rounded-full p-0.5 hover:bg-white/50"><span class="material-symbols-outlined text-[14px]">close</span></button>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 relative">
|
|
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg pl-9 pr-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" placeholder="Search products..." type="text"/>
|
|
<span class="material-symbols-outlined absolute left-3 top-2.5 text-on-surface-variant text-[18px]">search</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column: Tabs & Table -->
|
|
<div class="lg:col-span-8 flex flex-col gap-6">
|
|
<!-- Address Card (Span full width of right col) -->
|
|
<div class="bg-surface-container-lowest shadow-sm rounded-xl border border-outline-variant overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-outline-variant bg-surface-bright">
|
|
<h2 class="font-h3 text-h3 text-on-surface">Billing Address</h2>
|
|
</div>
|
|
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-form-gap">
|
|
<div class="flex flex-col gap-1.5 md:col-span-2">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Street Address</label>
|
|
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" type="text" value="1234 Silicon Valley Blvd, Suite 200"/>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">City</label>
|
|
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" type="text" value="San Jose"/>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">State/Province</label>
|
|
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" type="text" value="CA"/>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">ZIP/Postal Code</label>
|
|
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" type="text" value="95129"/>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Country</label>
|
|
<select class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow appearance-none">
|
|
<option selected="" value="US">United States</option>
|
|
<option value="CA">Canada</option>
|
|
<option value="UK">United Kingdom</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Tabs Section -->
|
|
<div class="bg-surface-container-lowest shadow-sm rounded-xl border border-outline-variant overflow-hidden flex flex-col h-full min-h-[400px]">
|
|
<div class="px-6 border-b border-outline-variant bg-surface-bright flex items-center gap-6 overflow-x-auto">
|
|
<button class="py-4 text-on-surface-variant hover:text-on-surface font-label-semibold text-label-semibold transition-colors border-b-2 border-transparent whitespace-nowrap">Activity Log</button>
|
|
<button class="py-4 text-primary border-b-2 border-primary font-label-semibold text-label-semibold transition-colors whitespace-nowrap">Feedback History</button>
|
|
<button class="py-4 text-on-surface-variant hover:text-on-surface font-label-semibold text-label-semibold transition-colors border-b-2 border-transparent whitespace-nowrap">Service Tickets</button>
|
|
</div>
|
|
<!-- Table Container -->
|
|
<div class="overflow-x-auto flex-1">
|
|
<table class="w-full text-left border-collapse min-w-[800px]">
|
|
<thead>
|
|
<tr class="bg-surface-container-lowest border-b border-outline-variant">
|
|
<th class="py-3 px-6 font-label-semibold text-body-sm text-on-surface-variant font-medium">Title</th>
|
|
<th class="py-3 px-6 font-label-semibold text-body-sm text-on-surface-variant font-medium">Product</th>
|
|
<th class="py-3 px-6 font-label-semibold text-body-sm text-on-surface-variant font-medium">Status</th>
|
|
<th class="py-3 px-6 font-label-semibold text-body-sm text-on-surface-variant font-medium">Tags</th>
|
|
<th class="py-3 px-6 font-label-semibold text-body-sm text-on-surface-variant font-medium">Channel</th>
|
|
<th class="py-3 px-6 font-label-semibold text-body-sm text-on-surface-variant font-medium text-right">Interactions</th>
|
|
<th class="py-3 px-6 font-label-semibold text-body-sm text-on-surface-variant font-medium text-right">Created</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="font-body-base text-body-base text-on-surface divide-y divide-outline-variant/50">
|
|
<tr class="hover:bg-surface-container-low transition-colors group">
|
|
<td class="py-3 px-6">
|
|
<a class="font-medium text-primary group-hover:underline" href="#">Router keeps dropping connection on 5GHz</a>
|
|
</td>
|
|
<td class="py-3 px-6 text-on-surface-variant">Pro Series Router AC3200</td>
|
|
<td class="py-3 px-6">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-error-container text-on-error-container">Open</span>
|
|
</td>
|
|
<td class="py-3 px-6">
|
|
<div class="flex gap-1">
|
|
<span class="inline-block px-1.5 py-0.5 bg-surface-container rounded text-xs text-on-surface-variant border border-outline-variant/30">Connectivity</span>
|
|
<span class="inline-block px-1.5 py-0.5 bg-surface-container rounded text-xs text-on-surface-variant border border-outline-variant/30">Urgent</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-6 text-on-surface-variant flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-[16px]">mail</span> Email
|
|
</td>
|
|
<td class="py-3 px-6 text-right text-on-surface-variant">4</td>
|
|
<td class="py-3 px-6 text-right text-on-surface-variant">Oct 12, 2024</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-low transition-colors group">
|
|
<td class="py-3 px-6">
|
|
<a class="font-medium text-primary group-hover:underline" href="#">Feature Request: Guest Network Scheduling</a>
|
|
</td>
|
|
<td class="py-3 px-6 text-on-surface-variant">Pro Series Router AC3200</td>
|
|
<td class="py-3 px-6">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-tertiary-container text-on-tertiary-container">Under Review</span>
|
|
</td>
|
|
<td class="py-3 px-6">
|
|
<div class="flex gap-1">
|
|
<span class="inline-block px-1.5 py-0.5 bg-surface-container rounded text-xs text-on-surface-variant border border-outline-variant/30">Enhancement</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-6 text-on-surface-variant flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-[16px]">forum</span> Portal
|
|
</td>
|
|
<td class="py-3 px-6 text-right text-on-surface-variant">1</td>
|
|
<td class="py-3 px-6 text-right text-on-surface-variant">Sep 28, 2024</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-low transition-colors group">
|
|
<td class="py-3 px-6">
|
|
<a class="font-medium text-primary group-hover:underline" href="#">Setup was confusing, took 2 hours</a>
|
|
</td>
|
|
<td class="py-3 px-6 text-on-surface-variant">Mesh Wi-Fi Node (Gen 2)</td>
|
|
<td class="py-3 px-6">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-surface-variant text-on-surface-variant">Closed</span>
|
|
</td>
|
|
<td class="py-3 px-6">
|
|
<div class="flex gap-1">
|
|
<span class="inline-block px-1.5 py-0.5 bg-surface-container rounded text-xs text-on-surface-variant border border-outline-variant/30">UX</span>
|
|
<span class="inline-block px-1.5 py-0.5 bg-surface-container rounded text-xs text-on-surface-variant border border-outline-variant/30">Docs</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-6 text-on-surface-variant flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-[16px]">phone_in_talk</span> Phone
|
|
</td>
|
|
<td class="py-3 px-6 text-right text-on-surface-variant">2</td>
|
|
<td class="py-3 px-6 text-right text-on-surface-variant">Aug 05, 2024</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="bg-gray-50 dark:bg-gray-950 font-manrope text-xs text-gray-500 full-width py-8 border-t border-t border-gray-200 dark:border-gray-800 flat no shadows w-full flex flex-col md:flex-row justify-between items-center px-6 max-w-[1280px] mx-auto mt-auto">
|
|
<div class="mb-4 md:mb-0">
|
|
© 2024 AfterSales CRM. All rights reserved.
|
|
</div>
|
|
<div class="flex gap-6">
|
|
<a class="text-gray-500 hover:underline transition-all" href="#">Support</a>
|
|
<a class="text-gray-500 hover:underline transition-all" href="#">Privacy Policy</a>
|
|
<a class="text-gray-500 hover:underline transition-all" href="#">Terms of Service</a>
|
|
</div>
|
|
</footer>
|
|
</body></html> |