2025-10-10 01:33:23 +00:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width,initial-scale=1" / >
< title > AcmeTech — Company Profile< / title >
< meta name = "description" content = "AcmeTech — Innovative solutions for modern businesses." / >
<!-- Tailwind Play CDN (good for static serving) -->
< script src = "https://cdn.tailwindcss.com" > < / script >
< style >
/* small subtle utilities */
:root{
--accent: #0ea5a4; /* teal-500 */
}
< / style >
< / head >
< body class = "antialiased text-slate-800 bg-slate-50" >
<!-- Header / Nav -->
< header class = "bg-white/80 backdrop-blur sticky top-0 z-40 border-b" >
< div class = "max-w-7xl mx-auto px-6 lg:px-8" >
< div class = "flex items-center justify-between h-16" >
< a href = "#" class = "flex items-center gap-3" >
< div class = "w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-400 to-teal-500 flex items-center justify-center text-white font-semibold" > AC< / div >
< div >
< div class = "font-semibold" > AcmeTech< / div >
< div class = "text-xs text-slate-500 -mt-0.5" > Innovate • Build • Scale< / div >
< / div >
< / a >
< nav class = "hidden md:flex items-center gap-6 text-sm" >
< a href = "#about" class = "hover:text-teal-600" > About< / a >
< a href = "#services" class = "hover:text-teal-600" > Services< / a >
< a href = "#team" class = "hover:text-teal-600" > Team< / a >
< a href = "#contact" class = "hover:text-teal-600" > Contact< / a >
< / nav >
< div class = "flex items-center gap-3" >
< a href = "#contact" class = "hidden md:inline-flex items-center px-4 py-2 rounded-md border border-teal-500 text-teal-700 hover:bg-teal-50 text-sm" >
Get in touch
< / a >
<!-- Mobile menu button -->
< button id = "menu-btn" aria-label = "Open menu" class = "md:hidden inline-flex items-center justify-center p-2 rounded-md hover:bg-slate-100" >
< svg id = "icon-open" xmlns = "http://www.w3.org/2000/svg" class = "h-6 w-6" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" >
< path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d = "M4 8h16M4 16h16" / >
< / svg >
< svg id = "icon-close" xmlns = "http://www.w3.org/2000/svg" class = "h-6 w-6 hidden" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" >
< path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d = "M6 18L18 6M6 6l12 12" / >
< / svg >
< / button >
< / div >
< / div >
< / div >
<!-- Mobile menu -->
< div id = "mobile-menu" class = "md:hidden hidden border-t" >
< div class = "px-6 pt-4 pb-6 space-y-3" >
< a href = "#about" class = "block py-2" > About< / a >
< a href = "#services" class = "block py-2" > Services< / a >
< a href = "#team" class = "block py-2" > Team< / a >
< a href = "#contact" class = "block py-2" > Contact< / a >
< a href = "#contact" class = "block mt-2 px-4 py-2 rounded-md bg-teal-600 text-white text-center" > Get in touch< / a >
< / div >
< / div >
< / header >
<!-- Hero -->
< main >
< section class = "bg-white" >
< div class = "max-w-7xl mx-auto px-6 lg:px-8 py-20 lg:py-28" >
< div class = "grid grid-cols-1 lg:grid-cols-12 gap-10 items-center" >
< div class = "lg:col-span-7 space-y-6" >
< h1 class = "text-4xl sm:text-5xl font-extrabold tracking-tight" >
We build digital products that users love.
< / h1 >
< p class = "text-lg text-slate-600 max-w-2xl" >
From product strategy and design to reliable engineering and operations — we help companies launch and scale digital platforms with measurable outcomes.
< / p >
< div class = "flex flex-wrap gap-3" >
< a href = "#contact" class = "inline-flex items-center gap-2 px-5 py-3 rounded-md bg-teal-600 text-white shadow hover:brightness-105" >
Talk to us
< / a >
< a href = "#services" class = "inline-flex items-center gap-2 px-5 py-3 rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50" >
Our services
< / a >
< / div >
< div class = "mt-6 flex items-center gap-6" >
< div class = "flex items-center gap-3" >
< div class = "h-12 w-12 rounded-xl bg-slate-100 flex items-center justify-center text-teal-600 font-semibold" > 5+< / div >
< div >
< div class = "text-sm text-slate-500" > Years< / div >
< div class = "font-medium" > Experience< / div >
< / div >
< / div >
< div class = "flex items-center gap-3" >
< div class = "h-12 w-12 rounded-xl bg-slate-100 flex items-center justify-center text-teal-600 font-semibold" > 100+< / div >
< div >
< div class = "text-sm text-slate-500" > Projects< / div >
< div class = "font-medium" > Delivered< / div >
< / div >
< / div >
< div class = "flex items-center gap-3" >
< div class = "h-12 w-12 rounded-xl bg-slate-100 flex items-center justify-center text-teal-600 font-semibold" > 24/7< / div >
< div >
< div class = "text-sm text-slate-500" > Support< / div >
< div class = "font-medium" > Available< / div >
< / div >
< / div >
< / div >
< / div >
<!-- Illustration / CTA card -->
< div class = "lg:col-span-5" >
< div class = "rounded-2xl shadow-lg bg-gradient-to-br from-slate-50 to-white p-6" >
< div class = "flex items-start justify-between" >
< div >
< div class = "text-sm text-slate-500" > Featured case< / div >
< div class = "mt-2 font-semibold text-lg" > E-commerce platform revamp< / div >
< / div >
< div class = "text-xs text-slate-400" > Mar 2025< / div >
< / div >
< div class = "mt-4" >
< p class = "text-slate-600 text-sm" >
We redesigned the checkout flow, reduced cart abandonment by 28%, and improved server response times by 40% using targeted optimizations.
< / p >
< / div >
< div class = "mt-6 flex gap-3" >
< a href = "#services" class = "px-4 py-2 rounded-md border text-sm" > See approach< / a >
< a href = "#contact" class = "px-4 py-2 rounded-md bg-teal-600 text-white text-sm" > Request a quote< / a >
< / div >
< / div >
<!-- small features -->
< div class = "mt-6 grid grid-cols-2 gap-3" >
< div class = "p-4 rounded-xl bg-white border" >
< div class = "text-xs text-slate-500" > Tech Stack< / div >
< div class = "font-medium mt-1" > React · Go · PostgreSQL< / div >
< / div >
< div class = "p-4 rounded-xl bg-white border" >
< div class = "text-xs text-slate-500" > Certifications< / div >
< div class = "font-medium mt-1" > ISO 9001 · SOC2< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- About -->
< section id = "about" class = "py-16" >
< div class = "max-w-7xl mx-auto px-6 lg:px-8" >
< div class = "grid lg:grid-cols-2 gap-10 items-center" >
< div >
< h2 class = "text-2xl font-semibold" > About AcmeTech< / h2 >
< p class = "mt-4 text-slate-600" >
We are a full-stack product studio that partners with startups and enterprises to design, build, and maintain reliable software products. Our team blends design thinking, pragmatic engineering, and operational excellence.
< / p >
< ul class = "mt-6 grid sm:grid-cols-2 gap-4 text-sm text-slate-700" >
< li class = "flex items-start gap-3" >
< div class = "mt-1 text-teal-600" > ●< / div >
< div >
< div class = "font-medium" > Product Discovery< / div >
< div class = "text-slate-500" > User research, prototyping, roadmap.< / div >
< / div >
< / li >
< li class = "flex items-start gap-3" >
< div class = "mt-1 text-teal-600" > ●< / div >
< div >
< div class = "font-medium" > Engineering< / div >
< div class = "text-slate-500" > Cloud-native systems, APIs, apps.< / div >
< / div >
< / li >
< li class = "flex items-start gap-3" >
< div class = "mt-1 text-teal-600" > ●< / div >
< div >
< div class = "font-medium" > Design< / div >
< div class = "text-slate-500" > UX/UI, accessibility, design systems.< / div >
< / div >
< / li >
< li class = "flex items-start gap-3" >
< div class = "mt-1 text-teal-600" > ●< / div >
< div >
< div class = "font-medium" > DevOps< / div >
< div class = "text-slate-500" > CI/CD, infra automation, observability.< / div >
< / div >
< / li >
< / ul >
< / div >
< div >
< div class = "rounded-2xl p-6 bg-gradient-to-br from-teal-50 to-white border shadow-sm" >
< h3 class = "font-semibold" > How we work< / h3 >
< ol class = "mt-4 space-y-3 text-sm text-slate-600" >
< li > < strong > 1. Align< / strong > — business goals, metrics, constraints.< / li >
< li > < strong > 2. Prototype< / strong > — quick experiments to validate ideas.< / li >
< li > < strong > 3. Build< / strong > — iterative, test-driven development.< / li >
< li > < strong > 4. Operate< / strong > — monitoring, support, and continuous improvements.< / li >
< / ol >
< div class = "mt-6" >
< a href = "#contact" class = "inline-block px-4 py-2 rounded-md bg-teal-600 text-white text-sm" > Start a conversation< / a >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- Services -->
< section id = "services" class = "py-16 bg-slate-50" >
< div class = "max-w-7xl mx-auto px-6 lg:px-8" >
< div class = "text-center" >
< h2 class = "text-2xl font-semibold" > Our Services< / h2 >
< p class = "mt-2 text-slate-500 max-w-2xl mx-auto" > End-to-end services to take your product from idea to scale.< / p >
< / div >
< div class = "mt-10 grid sm:grid-cols-2 lg:grid-cols-4 gap-6" >
< div class = "p-6 bg-white rounded-2xl border shadow-sm" >
< div class = "text-sm text-slate-500" > Product< / div >
< div class = "mt-2 font-medium" > Product Strategy< / div >
< p class = "mt-3 text-sm text-slate-600" > Roadmaps, prioritization, and discovery sprints.< / p >
< / div >
< div class = "p-6 bg-white rounded-2xl border shadow-sm" >
< div class = "text-sm text-slate-500" > Design< / div >
< div class = "mt-2 font-medium" > UX / UI Design< / div >
< p class = "mt-3 text-sm text-slate-600" > Design systems, accessibility, high-fidelity prototypes.< / p >
< / div >
< div class = "p-6 bg-white rounded-2xl border shadow-sm" >
< div class = "text-sm text-slate-500" > Engineering< / div >
< div class = "mt-2 font-medium" > Custom Development< / div >
< p class = "mt-3 text-sm text-slate-600" > Web, mobile, backend, and API-first architectures.< / p >
< / div >
< div class = "p-6 bg-white rounded-2xl border shadow-sm" >
< div class = "text-sm text-slate-500" > Platform< / div >
< div class = "mt-2 font-medium" > Cloud & DevOps< / div >
< p class = "mt-3 text-sm text-slate-600" > Kubernetes, CI/CD, infra-as-code, observability.< / p >
< / div >
< / div >
< / div >
< / section >
<!-- Team -->
< section id = "team" class = "py-16" >
< div class = "max-w-7xl mx-auto px-6 lg:px-8" >
< div class = "text-center" >
< h2 class = "text-2xl font-semibold" > Meet the team< / h2 >
< p class = "mt-2 text-slate-500" > A small, focused team of product builders.< / p >
< / div >
< div class = "mt-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6" >
<!-- member -->
< div class = "bg-white rounded-2xl p-6 border text-center" >
< div class = "mx-auto h-24 w-24 rounded-full bg-slate-100 flex items-center justify-center text-xl font-semibold" > AA< / div >
< div class = "mt-4 font-medium" > Ahmad Ardiansyah< / div >
< div class = "text-sm text-slate-500" > CEO & Founder< / div >
< / div >
< div class = "bg-white rounded-2xl p-6 border text-center" >
< div class = "mx-auto h-24 w-24 rounded-full bg-slate-100 flex items-center justify-center text-xl font-semibold" > RP< / div >
< div class = "mt-4 font-medium" > Rina Putri< / div >
< div class = "text-sm text-slate-500" > Head of Product< / div >
< / div >
< div class = "bg-white rounded-2xl p-6 border text-center" >
< div class = "mx-auto h-24 w-24 rounded-full bg-slate-100 flex items-center justify-center text-xl font-semibold" > BT< / div >
< div class = "mt-4 font-medium" > Bobby Tan< / div >
< div class = "text-sm text-slate-500" > Lead Engineer< / div >
< / div >
< / div >
< / div >
< / section >
<!-- CTA -->
< section class = "py-12 bg-gradient-to-r from-teal-600 to-emerald-500 text-white" >
< div class = "max-w-7xl mx-auto px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-6" >
< div >
< h3 class = "text-lg font-semibold" > Ready to start your project?< / h3 >
< p class = "text-sm text-teal-100/90 mt-1" > Tell us about your idea — we’ < / p >
< / div >
< div >
< a href = "#contact" class = "inline-flex items-center px-5 py-3 rounded-md bg-white text-teal-700 font-medium" > Contact sales< / a >
< / div >
< / div >
< / section >
<!-- Contact -->
< section id = "contact" class = "py-16 bg-slate-50" >
< div class = "max-w-4xl mx-auto px-6 lg:px-8" >
< div class = "bg-white rounded-2xl border p-8 shadow-sm" >
< div class = "grid md:grid-cols-2 gap-8" >
< div >
< h3 class = "text-xl font-semibold" > Contact us< / h3 >
< p class = "mt-2 text-slate-600" > Send a message and our team will respond within 1 business day.< / p >
< div class = "mt-6 space-y-4 text-sm" >
< div >
< div class = "text-slate-500" > Email< / div >
< div class = "font-medium" > hello@acmetech.example< / div >
< / div >
< div >
< div class = "text-slate-500" > Phone< / div >
< div class = "font-medium" > +62 812 3456 7890< / div >
< / div >
< div >
< div class = "text-slate-500" > Address< / div >
< div class = "font-medium" > Jl. Contoh No.1, Surabaya, Indonesia< / div >
< / div >
< / div >
< / div >
< form class = "space-y-4" onsubmit = "event.preventDefault(); alert('Form submission disabled in static demo. Replace with your backend.');" >
< div >
< label class = "block text-sm text-slate-600" > Name< / label >
< input required class = "mt-1 w-full rounded-md border px-3 py-2" placeholder = "Your name" / >
< / div >
< div >
< label class = "block text-sm text-slate-600" > Email< / label >
< input required type = "email" class = "mt-1 w-full rounded-md border px-3 py-2" placeholder = "you@example.com" / >
< / div >
< div >
< label class = "block text-sm text-slate-600" > Message< / label >
< textarea required class = "mt-1 w-full rounded-md border px-3 py-2" rows = "4" placeholder = "Tell us about your project" > < / textarea >
< / div >
< div class = "text-right" >
< button type = "submit" class = "px-4 py-2 rounded-md bg-teal-600 text-white" > Send message< / button >
< / div >
< / form >
< / div >
< / div >
< / div >
< / section >
< / main >
<!-- Footer -->
< footer class = "bg-white border-t" >
< div class = "max-w-7xl mx-auto px-6 lg:px-8 py-8 flex flex-col md:flex-row items-center justify-between gap-6" >
< div class = "flex items-center gap-3" >
< div class = "w-10 h-10 rounded-lg bg-teal-600 text-white flex items-center justify-center font-semibold" > AC< / div >
< div >
< div class = "font-medium" > AcmeTech< / div >
< div class = "text-sm text-slate-500" > © < span id = "year" > < / span > AcmeTech. All rights reserved.< / div >
< / div >
< / div >
< div class = "flex items-center gap-4 text-sm text-slate-600" >
< a href = "#" class = "hover:text-teal-600" > Privacy< / a >
< a href = "#" class = "hover:text-teal-600" > Terms< / a >
< a href = "#" class = "hover:text-teal-600" > Careers< / a >
< / div >
< / div >
< / footer >
< script >
// Mobile menu toggle
const btn = document.getElementById('menu-btn');
const menu = document.getElementById('mobile-menu');
const iconOpen = document.getElementById('icon-open');
const iconClose = document.getElementById('icon-close');
btn?.addEventListener('click', () => {
const open = menu.classList.toggle('hidden');
// toggle icons (simple)
iconOpen.classList.toggle('hidden');
iconClose.classList.toggle('hidden');
// ensure menu hidden state aligns with aria-expanded
const expanded = !menu.classList.contains('hidden');
btn.setAttribute('aria-expanded', expanded);
});
// Footer year
document.getElementById('year').textContent = new Date().getFullYear();
< / script >
< / body >
< / html >
