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 >
