387 lines
17 KiB
HTML
387 lines
17 KiB
HTML
<!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’ll recommend the fastest path to product-market fit.</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>
|