<!
DOCTYPE html>
<html class="scroll-smooth" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover"
name="viewport"/>
<title>Contact Us | Anumay</title>
<script src="[Link]
queries"></script>
<link href="[Link]
family=Literata:ital,wght@0,400;0,600;0,700;1,700&family=Be+Vietna
m+Pro:wght@400;500;600&display=swap" rel="stylesheet"/>
<link href="[Link]
family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=
swap" rel="stylesheet"/>
<link href="[Link]
family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=
swap" rel="stylesheet"/>
<script id="tailwind-config">
[Link] = {
darkMode: "class",
theme: {
extend: {
"colors": {
"primary-container": "#4f46e5",
"on-background": "#1a1c1c",
"on-surface-variant": "#464555",
"surface-container-high": "#e9e8e7",
"secondary-container": "#fea619",
"on-tertiary-container": "#bfe5b2",
"on-secondary": "#ffffff",
"inverse-primary": "#c3c0ff",
"secondary-fixed": "#ffddb8",
"outline-variant": "#c7c4d8",
"on-error-container": "#93000a",
"outline": "#777587",
"on-tertiary-fixed": "#032102",
"surface-dim": "#dadad9",
"on-primary-container": "#dad7ff",
"inverse-on-surface": "#f1f0f0",
"error-container": "#ffdad6",
"surface-container": "#eeeeed",
"tertiary-fixed-dim": "#abd19e",
"surface-tint": "#4d44e3",
"on-tertiary-fixed-variant": "#2e4e28",
"on-primary-fixed-variant": "#3323cc",
"on-error": "#ffffff",
"background": "#faf9f8",
"surface": "#faf9f8",
"on-secondary-fixed-variant": "#653e00",
"surface-container-low": "#f4f3f2",
"secondary": "#855300",
"secondary-fixed-dim": "#ffb95f",
"error": "#ba1a1a",
"tertiary": "#305029",
"tertiary-fixed": "#c7edb9",
"surface-container-highest": "#e3e2e1",
"primary-fixed": "#e2dfff",
"on-secondary-fixed": "#2a1700",
"on-primary-fixed": "#0f0069",
"on-surface": "#1a1c1c",
"on-primary": "#ffffff",
"tertiary-container": "#47683f",
"surface-bright": "#faf9f8",
"primary-fixed-dim": "#c3c0ff",
"surface-variant": "#e3e2e1",
"surface-container-lowest": "#ffffff",
"primary": "#3525cd",
"on-secondary-container": "#684000",
"inverse-surface": "#2f3130",
"on-tertiary": "#ffffff"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"container-max": "1120px",
"margin-desktop": "40px",
"base": "8px",
"margin-mobile": "20px",
"gutter": "16px"
},
"fontFamily": {
"display-lg": ["Literata"],
"body-lg": ["Be Vietnam Pro"],
"headline-md": ["Literata"],
"body-md": ["Be Vietnam Pro"],
"story-text": ["Literata"],
"label-sm": ["Be Vietnam Pro"],
"display-lg-mobile": ["Literata"]
},
"fontSize": {
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-
0.02em", "fontWeight": "700"}],
"body-lg": ["18px", {"lineHeight": "28px", "fontWeight": "400"}],
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight":
"600"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight":
"400"}],
"story-text": ["20px", {"lineHeight": "32px", "fontWeight":
"400"}],
"label-sm": ["14px", {"lineHeight": "20px", "letterSpacing":
"0.05em", "fontWeight": "600"}],
"display-lg-mobile": ["32px", {"lineHeight": "40px",
"letterSpacing": "-0.01em", "fontWeight": "700"}]
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
.gradient-primary {
background: linear-gradient(135deg, #4f46e5 0%, #3525cd 100%);
.soft-shadow {
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.05);
.no-scrollbar::-webkit-scrollbar {
display: none;
input:focus, select:focus, textarea:focus {
outline: none;
border-bottom-color: #3525cd !important;
--tw-ring-color: transparent !important;
</style>
<style>
body {
min-height: max(884px, 100dvh);
</style>
</head>
<body class="bg-background text-on-background font-body-md
selection:bg-primary-fixed selection:text-on-primary-fixed">
<!-- Top App Bar -->
<header class="w-full top-0 sticky z-50 bg-surface dark:bg-surface-dim
shadow-[0_4px_12px_rgba(79,70,229,0.05)]">
<div class="flex items-center justify-between px-margin-mobile md:px-
margin-desktop max-w-container-max mx-auto h-16">
<div class="flex items-center gap-3">
<button class="material-symbols-outlined text-primary p-2 active:scale-95
duration-200">arrow_back</button>
<h1 class="font-display-lg-mobile text-display-lg-mobile text-primary
dark:text-primary-fixed italic">Anumay</h1>
</div>
<div class="flex items-center gap-2">
<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-outline-
variant">
<img class="w-full h-full object-cover" data-alt="A warm, professional profile
portrait of an elder woman with kind eyes and grey hair, captured in soft
natural sunlight. The image should have a clean, high-end editorial feel with
a shallow depth of field, using a warm and minimal color palette consistent
with the Anumay digital sanctuary aesthetic."
src="[Link]
UrQrkw5y8sQ7iD3dY5XfhEyV05YCUugnjyrgx6EZCEaT6O2RCFAMlHveEP_lbNZ
PVsYOsr1InJ14JSSqg2VtaP_-fs6JilWfZ07uLEyiDla5Suu09Lesj-WuK0Dt09jhT-
2QwEzGSxtbur1O5wbSjJ2NkJSGQRcqxc2X4GpReBrh8Dasn2OMA1hMHrX_XpJd
6kY1Ma1H_7C7L6UVqjmvIlcvdKyipuOs3TMVnH2hUqCyeg"/>
</div>
</div>
</div>
</header>
<main class="pb-32 px-margin-mobile max-w-md mx-auto">
<!-- Hero Section -->
<section class="py-8">
<h2 class="font-headline-md-mobile text-headline-md-mobile text-primary
mb-2">Connect with Us</h2>
<p class="text-on-surface-variant font-body-md leading-relaxed">Every
story deserves to be heard. Whether you're preserving a legacy or need
technical help, we are here for you.</p>
</section>
<!-- Legacy/Heritage Chip (Process Indicator) -->
<div class="mb-10 p-5 bg-secondary-fixed rounded-xl border border-
secondary/10 flex items-start gap-4">
<div class="bg-secondary p-2 rounded-full text-on-secondary">
<span class="material-symbols-outlined text-[20px]" style="font-variation-
settings: 'FILL' 1;">history_edu</span>
</div>
<div>
<span class="inline-block px-3 py-1 bg-secondary-container text-on-
secondary-container text-[10px] font-bold uppercase tracking-wider rounded-
full mb-2">Heritage Process</span>
<p class="text-[14px] leading-snug text-on-secondary-fixed-variant">Our
archiving process involves digitizing memories, validating historical context,
and ensuring multi-generational accessibility.</p>
</div>
</div>
<!-- Inquiry Form -->
<section class="space-y-8">
<div class="flex items-center gap-2 mb-4">
<span class="w-1 h-6 bg-primary rounded-full"></span>
<h3 class="font-headline-md-mobile text-[20px] text-on-surface">Send an
Inquiry</h3>
</div>
<form class="space-y-6">
<!-- Name -->
<div class="group">
<label class="block text-label-sm text-outline mb-1">Full Name</label>
<input class="w-full bg-surface-container-low border-0 border-b-2 border-
outline-variant py-3 px-0 focus:bg-transparent transition-colors font-body-
md" placeholder="Your name" type="text"/>
</div>
<!-- Email -->
<div class="group">
<label class="block text-label-sm text-outline mb-1">Email Address</label>
<input class="w-full bg-surface-container-low border-0 border-b-2 border-
outline-variant py-3 px-0 focus:bg-transparent transition-colors font-body-
md" placeholder="your@[Link]" type="email"/>
</div>
<!-- Inquiry Type -->
<div class="group">
<label class="block text-label-sm text-outline mb-1">Inquiry Type</label>
<div class="relative">
<select class="w-full bg-surface-container-low border-0 border-b-2 border-
outline-variant py-3 px-0 focus:bg-transparent appearance-none transition-
colors font-body-md pr-8">
<option>Heritage Archiving</option>
<option>Technical Support</option>
<option>Story Consultation</option>
<option>Partnership Inquiry</option>
</select>
<span class="material-symbols-outlined absolute right-0 top-1/2 -translate-
y-1/2 pointer-events-none text-outline">expand_more</span>
</div>
</div>
<!-- Message -->
<div class="group">
<label class="block text-label-sm text-outline mb-1">How can we
help?</label>
<textarea class="w-full bg-surface-container-low border-0 border-b-2 border-
outline-variant py-3 px-0 focus:bg-transparent transition-colors font-body-md
resize-none" placeholder="Tell us your story or question..."
rows="4"></textarea>
</div>
<!-- CTA -->
<button class="w-full gradient-primary text-on-primary py-4 rounded-xl font-
bold text-body-lg shadow-lg active:scale-[0.98] transition-transform duration-
150 flex items-center justify-center gap-2" type="submit">
Submit Inquiry
<span class="material-symbols-outlined">send</span>
</button>
</form>
</section>
<!-- Quick Access Section -->
<section class="mt-16 space-y-4">
<h3 class="font-headline-md-mobile text-[20px] text-on-surface mb-
6">Alternative Support</h3>
<!-- Help Center Card -->
<a class="flex items-center justify-between p-6 bg-surface-container-lowest
rounded-2xl soft-shadow group hover:bg-primary-container/5 transition-
colors" href="#">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-xl bg-primary-fixed flex items-center justify-
center text-primary">
<span class="material-symbols-outlined">help_center</span>
</div>
<div>
<h4 class="font-semibold text-on-surface">Help Center</h4>
<p class="text-label-sm text-on-surface-variant">Browse our guide &
FAQs</p>
</div>
</div>
<span class="material-symbols-outlined text-outline group-hover:text-
primary transition-colors">chevron_right</span>
</a>
<!-- Speak with Support Card -->
<a class="flex items-center justify-between p-6 bg-surface-container-lowest
rounded-2xl soft-shadow group hover:bg-tertiary-fixed/20 transition-colors"
href="#">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-xl bg-tertiary-fixed flex items-center justify-
center text-tertiary">
<span class="material-symbols-outlined">support_agent</span>
</div>
<div>
<h4 class="font-semibold text-on-surface">Speak with Support</h4>
<p class="text-label-sm text-on-surface-variant">Chat with our story
experts</p>
</div>
</div>
<span class="material-symbols-outlined text-outline group-hover:text-
tertiary transition-colors">chevron_right</span>
</a>
</section>
<!-- Decoration Element -->
<div class="mt-16 text-center opacity-40 select-none">
<span class="material-symbols-outlined text-[64px] text-primary"
style="font-variation-settings: 'wght' 100;">air</span>
<p class="font-display-lg italic text-[20px] mt-2">Preserving the breath of
every story.</p>
</div>
</main>
<!-- Bottom Nav Bar -->
<nav class="md:hidden fixed bottom-0 left-0 w-full flex justify-around items-
center h-20 pb-safe px-2 bg-surface dark:bg-surface-dim shadow-[0_-
4px_12px_rgba(79,70,229,0.05)] z-50 rounded-t-xl">
<button class="flex flex-col items-center justify-center text-on-surface-
variant hover:bg-surface-container-high transition-all active:scale-90
duration-150">
<span class="material-symbols-outlined">home</span>
<span class="font-label-sm text-label-sm">Home</span>
</button>
<button class="flex flex-col items-center justify-center text-on-surface-
variant hover:bg-surface-container-high transition-all active:scale-90
duration-150">
<span class="material-symbols-outlined">chat_bubble</span>
<span class="font-label-sm text-label-sm">Echoes</span>
</button>
<button class="flex flex-col items-center justify-center text-on-surface-
variant hover:bg-surface-container-high transition-all active:scale-90
duration-150">
<span class="material-symbols-outlined">auto_awesome</span>
<span class="font-label-sm text-label-sm">Impact</span>
</button>
<button class="flex flex-col items-center justify-center bg-primary-container
text-on-primary-container rounded-full px-4 py-1 active:scale-90 duration-
150">
<span class="material-symbols-outlined">person</span>
<span class="font-label-sm text-label-sm">Profile</span>
</button>
</nav>
<!-- Micro-interaction Script -->
<script>
[Link]('DOMContentLoaded', () => {
const form = [Link]('form');
[Link]('submit', (e) => {
[Link]();
const btn = [Link]('button');
const originalContent = [Link];
[Link] = true;
[Link] = '<span class="material-symbols-outlined
animate-spin">progress_activity</span> Sending...';
setTimeout(() => {
[Link]('gradient-primary');
[Link]('bg-tertiary');
[Link] = '<span class="material-symbols-
outlined">check_circle</span> Message Sent';
setTimeout(() => {
[Link] = false;
[Link] = originalContent;
[Link]('bg-tertiary');
[Link]('gradient-primary');
[Link]();
}, 3000);
}, 1500);
});
// Smooth reveal animation
const sections = [Link]('section, .p-5');
const observerOptions = {
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
[Link](entry => {
if ([Link]) {
[Link]('opacity-100', 'translate-y-0');
[Link]('opacity-0', 'translate-y-4');
});
}, observerOptions);
[Link](section => {
[Link]('transition-all', 'duration-700', 'opacity-0',
'translate-y-4');
[Link](section);
});
});
</script>
</body></html>