302 lines
19 KiB
HTML
302 lines
19 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<html class="light" lang="en"><head>
|
||
|
|
<meta charset="utf-8"/>
|
||
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
|
|
<title>Tradhox - Settings</title>
|
||
|
|
<!-- Google Fonts -->
|
||
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||
|
|
<!-- Material Symbols -->
|
||
|
|
<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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
|
|
<!-- Tailwind CSS -->
|
||
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
|
|
<!-- Tailwind Config -->
|
||
|
|
<script id="tailwind-config">
|
||
|
|
tailwind.config = {
|
||
|
|
darkMode: "class",
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
"on-error": "#ffffff",
|
||
|
|
"on-tertiary-fixed": "#241a0e",
|
||
|
|
"on-error-container": "#93000a",
|
||
|
|
"secondary-fixed-dim": "#c8c6c2",
|
||
|
|
"background": "#fbf9f8",
|
||
|
|
"surface-variant": "#e4e2e2",
|
||
|
|
"surface-container": "#efeded",
|
||
|
|
"on-tertiary-container": "#b19f8d",
|
||
|
|
"on-surface-variant": "#554244",
|
||
|
|
"primary-container": "#6b1a2c",
|
||
|
|
"on-secondary-fixed-variant": "#474744",
|
||
|
|
"surface-bright": "#fbf9f8",
|
||
|
|
"surface-container-highest": "#e4e2e2",
|
||
|
|
"tertiary-container": "#433628",
|
||
|
|
"primary-fixed": "#ffd9dc",
|
||
|
|
"on-primary-fixed-variant": "#7e2839",
|
||
|
|
"on-background": "#1b1c1c",
|
||
|
|
"outline": "#887274",
|
||
|
|
"error-container": "#ffdad6",
|
||
|
|
"tertiary-fixed": "#f4dfcb",
|
||
|
|
"on-tertiary-fixed-variant": "#524436",
|
||
|
|
"secondary": "#5f5e5b",
|
||
|
|
"secondary-fixed": "#e5e2de",
|
||
|
|
"surface-tint": "#9c4050",
|
||
|
|
"on-secondary-fixed": "#1c1c1a",
|
||
|
|
"surface": "#fbf9f8",
|
||
|
|
"on-secondary": "#ffffff",
|
||
|
|
"on-primary": "#ffffff",
|
||
|
|
"surface-container-low": "#f5f3f3",
|
||
|
|
"inverse-primary": "#ffb2bb",
|
||
|
|
"on-surface": "#1b1c1c",
|
||
|
|
"inverse-on-surface": "#f2f0f0",
|
||
|
|
"primary": "#4d0218",
|
||
|
|
"tertiary-fixed-dim": "#d7c3b0",
|
||
|
|
"surface-container-lowest": "#ffffff",
|
||
|
|
"secondary-container": "#e2dfdb",
|
||
|
|
"on-primary-fixed": "#400011",
|
||
|
|
"on-secondary-container": "#636260",
|
||
|
|
"on-tertiary": "#ffffff",
|
||
|
|
"on-primary-container": "#ef8191",
|
||
|
|
"inverse-surface": "#303030",
|
||
|
|
"surface-container-high": "#eae8e7",
|
||
|
|
"error": "#ba1a1a",
|
||
|
|
"primary-fixed-dim": "#ffb2bb",
|
||
|
|
"outline-variant": "#dac0c2",
|
||
|
|
"surface-dim": "#dbd9d9",
|
||
|
|
"tertiary": "#2c2114"
|
||
|
|
},
|
||
|
|
borderRadius: {
|
||
|
|
"DEFAULT": "0.125rem",
|
||
|
|
"lg": "0.25rem",
|
||
|
|
"xl": "0.5rem",
|
||
|
|
"full": "0.75rem"
|
||
|
|
},
|
||
|
|
spacing: {
|
||
|
|
"gutter": "24px",
|
||
|
|
"stack-sm": "8px",
|
||
|
|
"container-max": "1120px",
|
||
|
|
"stack-lg": "32px",
|
||
|
|
"section-gap": "64px",
|
||
|
|
"margin-edge": "32px",
|
||
|
|
"stack-md": "16px"
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
"display-lg": ["Libre Caslon Text"],
|
||
|
|
"headline-lg": ["Libre Caslon Text"],
|
||
|
|
"headline-lg-mobile": ["Libre Caslon Text"],
|
||
|
|
"body-md": ["Work Sans"],
|
||
|
|
"label-caps": ["Work Sans"],
|
||
|
|
"body-lg": ["Work Sans"],
|
||
|
|
"button": ["Work Sans"],
|
||
|
|
"headline-md": ["Libre Caslon Text"]
|
||
|
|
},
|
||
|
|
fontSize: {
|
||
|
|
"display-lg": ["40px", { lineHeight: "48px", letterSpacing: "-0.02em", fontWeight: "700" }],
|
||
|
|
"headline-lg": ["32px", { lineHeight: "40px", fontWeight: "700" }],
|
||
|
|
"headline-lg-mobile": ["26px", { lineHeight: "32px", fontWeight: "700" }],
|
||
|
|
"body-md": ["16px", { lineHeight: "24px", fontWeight: "400" }],
|
||
|
|
"label-caps": ["12px", { lineHeight: "16px", letterSpacing: "0.1em", fontWeight: "600" }],
|
||
|
|
"body-lg": ["18px", { lineHeight: "28px", fontWeight: "400" }],
|
||
|
|
"button": ["14px", { lineHeight: "20px", fontWeight: "600" }],
|
||
|
|
"headline-md": ["24px", { lineHeight: "32px", fontWeight: "600" }]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.material-symbols-outlined {
|
||
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
|
|
}
|
||
|
|
.icon-fill {
|
||
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="bg-background text-on-background font-body-md antialiased overflow-x-hidden">
|
||
|
|
<!-- SideNavBar (Shared Component) -->
|
||
|
|
<nav class="h-screen w-64 fixed left-0 top-0 bg-surface dark:bg-surface-dim border-r border-outline-variant dark:border-outline z-50 flex flex-col py-stack-lg">
|
||
|
|
<!-- Header / Brand Area -->
|
||
|
|
<div class="px-margin-edge mb-section-gap flex flex-col items-start gap-stack-sm">
|
||
|
|
<div class="font-headline-md text-headline-md font-bold text-primary dark:text-primary-fixed mb-2">Tradhox</div>
|
||
|
|
<div class="flex items-center gap-3 w-full p-2 rounded-lg hover:bg-surface-container-high transition-colors duration-200 cursor-pointer">
|
||
|
|
<img alt="Store Owner Profile" class="w-10 h-10 rounded-full object-cover border border-outline-variant" data-alt="A close-up studio portrait of a traditional Indian artisan, softly lit to highlight the textures of their woven garments. The artisan looks slightly off-camera with a serene, proud expression. The background is a muted, warm studio grey, emphasizing the subject's craftsmanship and cultural heritage." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCm99RI_WStIkfNUvQCwPmOMiIRksrAeImH1mePNgRRqFjNP9JCBi1L6r08WO7CnD1FahA_9N4hxQ8gjov6defwS78KAdtgV9Roz6f-hIgCBJ4XaK4nTrdsh3cYoOQGBHG7QTT4pSt8vWax1Pai6WNQ16KTx_sMrSR43n8Fl9azSyL_3q85YRaT9m--8gCuoaEcKJgILQE-i-eFPiyWAEi_KKcOPw25-8mrQFjICgvi2yhGsaosJKI_ZA"/>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="font-button text-button text-on-surface">Tradhox Seller</span>
|
||
|
|
<span class="font-label-caps text-label-caps text-secondary uppercase">Artisan Partner</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="mt-2 w-full text-center py-2 px-4 border border-primary text-primary font-button text-button rounded hover:bg-primary/5 transition-colors duration-200">
|
||
|
|
View Store
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<!-- Navigation Links -->
|
||
|
|
<div class="flex flex-col flex-grow">
|
||
|
|
<a class="flex items-center gap-3 px-margin-edge py-3 text-secondary dark:text-secondary-fixed-dim hover:bg-secondary-container/10 transition-colors duration-200" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">home</span>
|
||
|
|
<span class="font-button text-button">Home</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-margin-edge py-3 text-secondary dark:text-secondary-fixed-dim hover:bg-secondary-container/10 transition-colors duration-200" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">shopping_cart</span>
|
||
|
|
<span class="font-button text-button">Orders</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-margin-edge py-3 text-secondary dark:text-secondary-fixed-dim hover:bg-secondary-container/10 transition-colors duration-200" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">inventory_2</span>
|
||
|
|
<span class="font-button text-button">Products</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-margin-edge py-3 text-secondary dark:text-secondary-fixed-dim hover:bg-secondary-container/10 transition-colors duration-200" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">payments</span>
|
||
|
|
<span class="font-button text-button">Payments</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-margin-edge py-3 text-secondary dark:text-secondary-fixed-dim hover:bg-secondary-container/10 transition-colors duration-200" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">leaderboard</span>
|
||
|
|
<span class="font-button text-button">Analytics</span>
|
||
|
|
</a>
|
||
|
|
<!-- Active Tab: Settings -->
|
||
|
|
<a class="flex items-center gap-3 px-margin-edge py-3 bg-primary-container/5 text-primary font-bold border-r-4 border-primary transition-all opacity-80" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px] icon-fill">settings</span>
|
||
|
|
<span class="font-button text-button">Settings</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
<!-- TopNavBar (Shared Component) -->
|
||
|
|
<header class="fixed top-0 right-0 w-[calc(100%-16rem)] z-40 bg-surface/80 dark:bg-surface-dim/80 backdrop-blur-md border-b border-outline-variant dark:border-outline flex justify-between items-center h-16 px-margin-edge ml-64">
|
||
|
|
<!-- Left Area (Empty or contextual, Product Name usually handled in sidebar for this layout, but following JSON search logic) -->
|
||
|
|
<div class="flex items-center flex-1">
|
||
|
|
<div class="relative w-64">
|
||
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-secondary text-[20px]">search</span>
|
||
|
|
<input class="w-full bg-surface-container-low border border-outline-variant rounded pl-10 pr-4 py-1.5 font-body-md text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" placeholder="Search..." type="text"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Right Area: Actions & Profile -->
|
||
|
|
<div class="flex items-center gap-stack-md">
|
||
|
|
<button class="text-secondary dark:text-secondary-fixed-dim hover:text-primary dark:hover:text-primary-fixed transition-colors active:scale-95">
|
||
|
|
<span class="material-symbols-outlined">notifications</span>
|
||
|
|
</button>
|
||
|
|
<button class="text-secondary dark:text-secondary-fixed-dim hover:text-primary dark:hover:text-primary-fixed transition-colors active:scale-95">
|
||
|
|
<span class="material-symbols-outlined">help_outline</span>
|
||
|
|
</button>
|
||
|
|
<div class="h-8 w-px bg-outline-variant mx-2"></div>
|
||
|
|
<img alt="Seller Avatar" class="w-8 h-8 rounded-full border border-outline-variant cursor-pointer object-cover" data-alt="A small, circular avatar image showing a macro shot of intricately woven natural fibers. The texture is prominent, with warm earthy tones of beige and brown, representing an artisanal craft context in a clean, minimal style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDfP_P9njAGlKmQ5gSN9l0v9c6xGaUblWqTNEppcMtOKilo4W9lFZlEFfRQrZndgLsHerwuJCC14tUi3XVT46JenxA-GPordrhVI-sVklJOJawGnL0BhQGpXCMBGH1UQb5kztXU3vCWFfX8GVObem2XcNpZUnCsv3ITFLDAfSCzxGotu8FNdiZdkFRO_XKBQ0jHIPa-PTauYhkPzh8KnpMUgmbZqJ6c4UmFv3yTxAbEnafltbluo340aw"/>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<!-- Main Content Canvas -->
|
||
|
|
<main class="ml-64 pt-24 min-h-screen px-margin-edge pb-section-gap">
|
||
|
|
<div class="max-w-container-max mx-auto">
|
||
|
|
<!-- Page Header -->
|
||
|
|
<div class="mb-section-gap">
|
||
|
|
<h1 class="font-headline-lg text-headline-lg text-on-background mb-stack-sm">Settings</h1>
|
||
|
|
<p class="font-body-lg text-body-lg text-secondary">Manage your artisan store profile, account details, and preferences.</p>
|
||
|
|
</div>
|
||
|
|
<!-- Settings Navigation (In-page Tabs) -->
|
||
|
|
<div class="flex border-b border-outline-variant mb-section-gap gap-stack-lg overflow-x-auto relative">
|
||
|
|
<!-- Active Tab -->
|
||
|
|
<button class="font-button text-button text-primary pb-stack-sm border-b-2 border-primary relative top-[1px]">
|
||
|
|
Store Profile
|
||
|
|
</button>
|
||
|
|
<button class="font-button text-button text-secondary hover:text-primary transition-colors pb-stack-sm border-b-2 border-transparent relative top-[1px]">
|
||
|
|
Account Settings
|
||
|
|
</button>
|
||
|
|
<button class="font-button text-button text-secondary hover:text-primary transition-colors pb-stack-sm border-b-2 border-transparent relative top-[1px]">
|
||
|
|
Shipping Preferences
|
||
|
|
</button>
|
||
|
|
<button class="font-button text-button text-secondary hover:text-primary transition-colors pb-stack-sm border-b-2 border-transparent relative top-[1px]">
|
||
|
|
Notifications
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<!-- Tab Content: Store Profile -->
|
||
|
|
<div class="flex flex-col gap-section-gap">
|
||
|
|
<!-- Section 1: Basic Information (Asymmetric Layout) -->
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
|
||
|
|
<!-- Left Column: Context -->
|
||
|
|
<div class="md:col-span-4 flex flex-col">
|
||
|
|
<h2 class="font-headline-md text-headline-md text-on-background mb-stack-sm">Public Profile</h2>
|
||
|
|
<p class="font-body-md text-body-md text-secondary">
|
||
|
|
This information will be displayed publicly on your artisan store page. Make sure your brand reflects the quality of your craft.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- Right Column: Form Fields in a Glass/Clean Card -->
|
||
|
|
<div class="md:col-span-8 bg-surface-container-lowest border border-outline-variant rounded-lg p-margin-edge shadow-[0_4px_20px_rgba(107,26,44,0.02)]">
|
||
|
|
<!-- Logo Upload -->
|
||
|
|
<div class="flex items-center gap-stack-lg mb-stack-lg pb-stack-lg border-b border-surface-container-high">
|
||
|
|
<div class="relative group">
|
||
|
|
<img class="w-20 h-20 rounded-full object-cover border border-outline-variant" data-alt="A clean, minimalist logo placeholder image. The design features a stylized, continuous line-art drawing of a loom or weaving tool in deep maroon on an off-white background. The image has a subtle paper texture, conveying an authentic, handcrafted brand identity." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAILFVWTQhDaG_Vnsodmdq-gvnv7cLSh7Cebas19cjBXnaoRSzC2fK8sKdYgujI37D8ofBs35zZhLfMqXXdHttB6L0dyVH2GC_PEAl-u9XDxmkb4CRYAsXVfQfD8y6nNR40XzDPhz4WoZh-fyIdgEX4dk54o_GhsnE0u7cZYna-QzgjrAUl1-Lp1z2PNjVnMMk3eQYQ79VdQwdGb4wZPmxqYHDqtjc4847zh0LIyylLdHDBlQH_eC29Cw"/>
|
||
|
|
<div class="absolute inset-0 bg-primary/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
|
||
|
|
<span class="material-symbols-outlined text-surface-container-lowest">edit</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-stack-sm">
|
||
|
|
<button class="self-start px-4 py-2 border border-primary text-primary font-button text-button rounded hover:bg-primary-container/5 transition-colors">
|
||
|
|
Change Logo
|
||
|
|
</button>
|
||
|
|
<span class="font-label-caps text-label-caps text-secondary uppercase">JPG, GIF or PNG. Max size of 800K</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Form Inputs -->
|
||
|
|
<div class="flex flex-col gap-stack-md">
|
||
|
|
<!-- Store Name -->
|
||
|
|
<div class="flex flex-col gap-2">
|
||
|
|
<label class="font-label-caps text-label-caps text-secondary uppercase tracking-wider">Store Name</label>
|
||
|
|
<input class="bg-surface-container-lowest border border-outline-variant rounded px-4 py-3 font-body-md text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" type="text" value="Heritage Weaves & Co."/>
|
||
|
|
</div>
|
||
|
|
<!-- Store URL -->
|
||
|
|
<div class="flex flex-col gap-2">
|
||
|
|
<label class="font-label-caps text-label-caps text-secondary uppercase tracking-wider">Store URL</label>
|
||
|
|
<div class="flex">
|
||
|
|
<span class="inline-flex items-center px-4 rounded-l border border-r-0 border-outline-variant bg-surface-container-low text-secondary font-body-md text-body-md">
|
||
|
|
tradhox.com/store/
|
||
|
|
</span>
|
||
|
|
<input class="flex-1 bg-surface-container-lowest border border-outline-variant rounded-r px-4 py-3 font-body-md text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" type="text" value="heritage-weaves"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Description -->
|
||
|
|
<div class="flex flex-col gap-2 mt-stack-sm">
|
||
|
|
<label class="font-label-caps text-label-caps text-secondary uppercase tracking-wider">About Your Craft</label>
|
||
|
|
<textarea class="bg-surface-container-lowest border border-outline-variant rounded px-4 py-3 font-body-md text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all resize-none" rows="4">Preserving centuries-old handloom techniques, our family has been creating pure silk and cotton textiles for three generations. Every piece is a testament to the dedication of our master weavers in Varanasi.</textarea>
|
||
|
|
<span class="font-label-caps text-label-caps text-secondary uppercase self-end mt-1">214 / 500 characters</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Divider -->
|
||
|
|
<hr class="border-outline-variant"/>
|
||
|
|
<!-- Section 2: Contact Information -->
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter pb-section-gap">
|
||
|
|
<!-- Left Column -->
|
||
|
|
<div class="md:col-span-4 flex flex-col">
|
||
|
|
<h2 class="font-headline-md text-headline-md text-on-background mb-stack-sm">Support Contact</h2>
|
||
|
|
<p class="font-body-md text-body-md text-secondary">
|
||
|
|
How buyers can reach you for inquiries regarding custom orders or product details.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- Right Column -->
|
||
|
|
<div class="md:col-span-8 bg-surface-container-lowest border border-outline-variant rounded-lg p-margin-edge shadow-[0_4px_20px_rgba(107,26,44,0.02)]">
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md">
|
||
|
|
<div class="flex flex-col gap-2">
|
||
|
|
<label class="font-label-caps text-label-caps text-secondary uppercase tracking-wider">Support Email</label>
|
||
|
|
<input class="bg-surface-container-lowest border border-outline-variant rounded px-4 py-3 font-body-md text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" type="email" value="hello@heritageweaves.in"/>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-2">
|
||
|
|
<label class="font-label-caps text-label-caps text-secondary uppercase tracking-wider">Phone Number (Optional)</label>
|
||
|
|
<input class="bg-surface-container-lowest border border-outline-variant rounded px-4 py-3 font-body-md text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" type="tel" value="+91 98765 43210"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Bottom Action Bar (Sticky or floating feel) -->
|
||
|
|
<div class="flex justify-end gap-stack-md border-t border-outline-variant pt-margin-edge mt-auto">
|
||
|
|
<button class="px-6 py-3 border border-outline-variant text-on-surface font-button text-button rounded hover:bg-surface-container-high transition-colors">
|
||
|
|
Discard Changes
|
||
|
|
</button>
|
||
|
|
<button class="px-6 py-3 bg-primary text-on-primary font-button text-button rounded shadow-sm hover:bg-primary/90 transition-colors flex items-center gap-2">
|
||
|
|
Save Profile
|
||
|
|
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</body></html>
|