315 lines
20 KiB
HTML
315 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="id"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Kelola Bumi - Solusi Terintegrasi Pertanian Berkelanjutan</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&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"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"outline": "#707a6d",
|
|
"secondary": "#8b5000",
|
|
"on-primary-fixed": "#002105",
|
|
"on-surface": "#111d23",
|
|
"on-primary-fixed-variant": "#005318",
|
|
"surface-container-low": "#e9f6fd",
|
|
"background": "#f4faff",
|
|
"surface-container": "#e3f0f8",
|
|
"inverse-on-surface": "#e6f3fb",
|
|
"on-secondary-fixed": "#2c1600",
|
|
"inverse-surface": "#263238",
|
|
"tertiary-container": "#64bb63",
|
|
"tertiary": "#106d20",
|
|
"outline-variant": "#bfcaba",
|
|
"on-background": "#111d23",
|
|
"on-tertiary-fixed": "#002204",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"primary-fixed": "#9ff79f",
|
|
"on-primary": "#ffffff",
|
|
"error": "#ba1a1a",
|
|
"secondary-container": "#ff9800",
|
|
"surface-container-highest": "#d7e4ec",
|
|
"on-error-container": "#93000a",
|
|
"surface-container-high": "#ddeaf2",
|
|
"on-secondary-fixed-variant": "#693c00",
|
|
"surface-tint": "#126d27",
|
|
"on-surface-variant": "#40493e",
|
|
"secondary-fixed": "#ffdcbe",
|
|
"surface-dim": "#cfdce4",
|
|
"primary": "#126d27",
|
|
"on-tertiary": "#ffffff",
|
|
"inverse-primary": "#83da85",
|
|
"primary-container": "#66bb6a",
|
|
"on-secondary-container": "#653900",
|
|
"surface-variant": "#d7e4ec",
|
|
"surface": "#f4faff",
|
|
"on-error": "#ffffff",
|
|
"on-tertiary-container": "#00480f",
|
|
"secondary-fixed-dim": "#ffb870",
|
|
"surface-bright": "#f4faff",
|
|
"on-primary-container": "#004814",
|
|
"primary-fixed-dim": "#83da85",
|
|
"on-tertiary-fixed-variant": "#005312",
|
|
"tertiary-fixed": "#9df898",
|
|
"tertiary-fixed-dim": "#82db7e",
|
|
"error-container": "#ffdad6"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"unit": "4px",
|
|
"xs": "4px",
|
|
"md": "16px",
|
|
"lg": "24px",
|
|
"container-max": "1280px",
|
|
"xl": "40px",
|
|
"sm": "8px",
|
|
"gutter": "24px"
|
|
},
|
|
"fontFamily": {
|
|
"h2": ["Space Grotesk"],
|
|
"h3": ["Space Grotesk"],
|
|
"body-lg": ["Manrope"],
|
|
"label-caps": ["Manrope"],
|
|
"body-md": ["Manrope"],
|
|
"h1": ["Space Grotesk"]
|
|
},
|
|
"fontSize": {
|
|
"h2": ["36px", {"lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
"h3": ["24px", {"lineHeight": "1.4", "fontWeight": "600"}],
|
|
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
|
"label-caps": ["12px", {"lineHeight": "1.4", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
|
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
|
"h1": ["48px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
.botanical-shadow {
|
|
box-shadow: 0 10px 30px -5px rgba(18, 109, 39, 0.08);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body-md selection:bg-primary-fixed selection:text-on-primary-fixed">
|
|
<!-- TopNavBar -->
|
|
<header class="fixed top-0 left-0 w-full z-50 bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 h-20">
|
|
<nav class="max-w-7xl mx-auto px-8 h-full flex justify-between items-center">
|
|
<div class="flex items-center gap-3">
|
|
<img alt="Kelola Bumi Logo" class="h-10 w-auto" data-alt="Professional minimalist logo for Kelola Bumi featuring organic shapes and clean typography in shades of green" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBiD8-e-oTQP1XWWnWHvY7A7RhxUROeE1Jb3MRo4UkjiNNc4_ufMzruJjAPa1tEYmNo8Ta9_QQTW42uhd93v2R9-m1__ZlPVD2BDXUAQHkETQ4ogBbnpazYeJihAdlmp-rVv4HhSnx-k6OewsK_yp7vmtYmSJYP7WVrgtUUttBXy6rzHlw7mP8CRicp-Ih3AQa-vHKdOK3TJS_1SAZsjOPzhOCdcVSZp_rdW346UkQ1VuuadkcLm2IVMvnFzi8ulIlqdJmOqsbgmAkM"/>
|
|
<span class="text-2xl font-black text-green-700 dark:text-green-500 tracking-tighter">Kelola Bumi</span>
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-8 font-sans text-sm tracking-wide font-semibold">
|
|
<a class="text-green-700 dark:text-green-400 border-b-2 border-green-600 pb-1" href="#">Home</a>
|
|
<a class="text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">About</a>
|
|
<a class="text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">Services</a>
|
|
<a class="text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">Why Us</a>
|
|
<a class="text-slate-600 dark:text-slate-400 hover:text-green-600 transition-all duration-200" href="#">Contact</a>
|
|
</div>
|
|
<button class="bg-primary hover:bg-on-primary-fixed-variant text-on-primary px-6 py-2.5 rounded-lg font-bold transition-all duration-200 scale-95 active:scale-90">
|
|
Consult Now
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
<main class="pt-20">
|
|
<!-- Hero Section -->
|
|
<section class="relative min-h-[870px] flex items-center overflow-hidden bg-surface-container-low">
|
|
<div class="absolute inset-0 z-0">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-surface-container-low via-surface-container-low/80 to-transparent z-10"></div>
|
|
<img class="w-full h-full object-cover" data-alt="Cinematic aerial view of lush green rice terraces in Bali with morning mist and soft sunrise lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCgJ1kXuCM8741Vz4-emYtnXC917eYnD8O8M6nPRX5uhasZjDLV5Kap6jP_HXIisT5Qo41ppKltQLRzHJuRmA2u56iKas_tabS7bVFNujKxRHLtwQjys5P98x0QOlzXE_OvW78ys59NHJbrov3suBM5yI3XaFR4ipzDpzPnWmN8H3Vb3gkCH-zhhcl3lDnXRqn6ybFcW7DZSU-7dQnbB_THs_wSQUZmrFk-Ow3DBqCdrMNmrAx8lmsSZQi7jAjrB3Ex4DMDiZQkQjQ3"/>
|
|
</div>
|
|
<div class="container max-w-7xl mx-auto px-8 relative z-20">
|
|
<div class="max-w-2xl">
|
|
<span class="inline-block px-4 py-1.5 bg-primary-fixed text-on-primary-fixed-variant rounded-full text-label-caps mb-6">
|
|
SINCE 2015 • PRECISION AGRICULTURE
|
|
</span>
|
|
<h1 class="font-h1 text-h1 text-on-surface mb-6">
|
|
Solusi Terintegrasi untuk Pertanian Berkelanjutan dan Inovatif.
|
|
</h1>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant mb-10 leading-relaxed">
|
|
Membangun masa depan pangan Indonesia melalui konsultasi ahli, penyediaan sarana produksi berkualitas, dan distribusi hasil tani unggulan sejak 2015.
|
|
</p>
|
|
<div class="flex flex-wrap gap-4">
|
|
<button class="bg-primary text-on-primary px-8 py-4 rounded-xl font-bold flex items-center gap-2 hover:bg-on-primary-fixed-variant transition-all botanical-shadow">
|
|
Mulai Transformasi <span class="material-symbols-outlined">arrow_forward</span>
|
|
</button>
|
|
<button class="bg-white border border-outline-variant text-primary px-8 py-4 rounded-xl font-bold hover:bg-surface-container transition-all">
|
|
Lihat Katalog Produk
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Brief About Section (Bento Style) -->
|
|
<section class="py-xl bg-white">
|
|
<div class="container max-w-7xl mx-auto px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="font-h2 text-h2 text-primary mb-4">Tentang Kami Singkat</h2>
|
|
<div class="w-20 h-1.5 bg-secondary-container mx-auto rounded-full"></div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-6 h-auto md:h-[600px]">
|
|
<!-- Large Card: Identity -->
|
|
<div class="md:col-span-8 group relative overflow-hidden rounded-3xl border border-outline-variant bg-surface-container p-10 flex flex-col justify-end">
|
|
<div class="absolute inset-0 z-0">
|
|
<img class="w-full h-full object-cover opacity-20 group-hover:scale-105 transition-transform duration-700" data-alt="Close-up of healthy green crop plants in a modern precision-farming greenhouse setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD1NYjI2ltST9HHFXDDcIBwCw3Uzj5D2VY_dVAVT6-KsENo2hUuLCx4EOmt8amhZeMdEoyw36z4f1chnVoe99wN5PoSjxp-9ScLiIrWzSNSiUg-xq-T9SBA8ki90OlLDeS7Arlk57_XsD3yVyN8iGLgICt8l-clj1Dn2Oqs8KdROSm1pFdmumIZMUnjuZZ7YyJ6UXqQyQonYB3QG8KuQXsYrXZL6y1431_kMA8ijgQbP0hzqWsKw1VUEYDbUZnwrtaqVWbHSgYGQBrn"/>
|
|
</div>
|
|
<div class="relative z-10">
|
|
<h3 class="font-h3 text-h3 text-primary mb-4">Pionir Agribisnis Modern</h3>
|
|
<p class="font-body-md text-on-surface-variant max-w-xl">
|
|
PT. Kelola Bumi Nusantara hadir untuk menjembatani kearifan lokal tanah Indonesia dengan teknologi pertanian global. Kami percaya bahwa setiap jengkal tanah memiliki potensi maksimal jika dikelola dengan presisi dan integritas.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Vertical Card: Heritage -->
|
|
<div class="md:col-span-4 bg-tertiary-container rounded-3xl p-10 flex flex-col justify-between text-on-tertiary-container">
|
|
<span class="material-symbols-outlined text-5xl">history_edu</span>
|
|
<div>
|
|
<div class="text-5xl font-black mb-2">9+</div>
|
|
<div class="font-label-caps uppercase tracking-widest">Tahun Berdedikasi</div>
|
|
<p class="mt-4 text-sm opacity-90">Mengawal ekosistem pangan dari hulu ke hilir dengan standar kualitas yang tak tertandingi sejak 2015.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Small Card: Mission -->
|
|
<div class="md:col-span-4 border border-outline-variant rounded-3xl p-8 hover:bg-surface-container-high transition-colors">
|
|
<div class="w-12 h-12 bg-primary-fixed rounded-xl flex items-center justify-center mb-6">
|
|
<span class="material-symbols-outlined text-on-primary-fixed-variant">eco</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2">Konsultasi Ahli</h4>
|
|
<p class="text-sm text-on-surface-variant">Strategi agronomis berbasis data untuk meningkatkan produktivitas lahan Anda.</p>
|
|
</div>
|
|
<!-- Small Card: Tech -->
|
|
<div class="md:col-span-4 border border-outline-variant rounded-3xl p-8 hover:bg-surface-container-high transition-colors">
|
|
<div class="w-12 h-12 bg-secondary-fixed rounded-xl flex items-center justify-center mb-6">
|
|
<span class="material-symbols-outlined text-on-secondary-fixed-variant">precision_manufacturing</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2">Sarana Produksi</h4>
|
|
<p class="text-sm text-on-surface-variant">Penyediaan benih, pupuk, dan teknologi mekanisasi pertanian kelas dunia.</p>
|
|
</div>
|
|
<!-- Small Card: Distribution -->
|
|
<div class="md:col-span-4 border border-outline-variant rounded-3xl p-8 hover:bg-surface-container-high transition-colors">
|
|
<div class="w-12 h-12 bg-tertiary-fixed rounded-xl flex items-center justify-center mb-6">
|
|
<span class="material-symbols-outlined text-on-tertiary-fixed-variant">local_shipping</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2">Distribusi Unggul</h4>
|
|
<p class="text-sm text-on-surface-variant">Memastikan hasil panen petani mencapai pasar dengan nilai ekonomi terbaik.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Core Services Section -->
|
|
<section class="py-xl bg-surface-container-lowest">
|
|
<div class="container max-w-7xl mx-auto px-8">
|
|
<div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-4">
|
|
<div class="max-w-xl">
|
|
<h2 class="font-h2 text-h2 text-on-surface mb-4">Layanan Terintegrasi Kami</h2>
|
|
<p class="text-on-surface-variant">Pendekatan holistik untuk memastikan setiap tahap dalam rantai pasok pertanian berjalan efisien dan menguntungkan.</p>
|
|
</div>
|
|
<a class="text-primary font-bold flex items-center gap-2 hover:underline" href="#">
|
|
Lihat Semua Layanan <span class="material-symbols-outlined">chevron_right</span>
|
|
</a>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- Service 1 -->
|
|
<div class="group bg-white rounded-2xl border border-gray-100 botanical-shadow p-2 transition-transform hover:-translate-y-2">
|
|
<div class="h-64 rounded-xl overflow-hidden mb-6">
|
|
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" data-alt="Professional agronomist examining crop health with a digital tablet in a sunlit field" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCVqWyaYaFj6WgxRK8Q-m1Aa-Dq05WPpFEUi0cajH5D2Uq9k5qTFDjPjHgARINZVkn2LikqFH-f3w7wlWbFqzIwEpkHsmjCsnvXpdsD_eFFLp-3nyS4AzKxTYtn0J0azeIaqMFqEANrsXIC7P8xfx-9jRTYu4dF3jvHzGufqbROjOamkIV9EASvuEu2WUAs3fYnwZ_Egmnn0odj6j-W1cpq61hKWyZicxc4qtXOq9jCOqy80ckMEvWIfHDE_D7Dwa8wS0LtwzfgRg_Q"/>
|
|
</div>
|
|
<div class="px-6 pb-8">
|
|
<h4 class="font-h3 text-xl mb-3 text-primary">Agronomy Consulting</h4>
|
|
<p class="text-on-surface-variant text-sm mb-6">Audit lahan, analisis tanah laboratorium, dan rekomendasi pemupukan presisi.</p>
|
|
<div class="flex items-center text-xs font-bold text-secondary gap-4">
|
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-base">verified</span> Certified Experts</span>
|
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-base">analytics</span> Data Driven</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Service 2 -->
|
|
<div class="group bg-white rounded-2xl border border-gray-100 botanical-shadow p-2 transition-transform hover:-translate-y-2">
|
|
<div class="h-64 rounded-xl overflow-hidden mb-6">
|
|
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" data-alt="Modern high-tech grain silo and processing facility with clean architecture and industrial precision" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAryWTSUqXt7dePAFWjeAL9tV87slaLA46Wxn8f3W50KUQlcqvyGtlfN1S3LgWM78w3r3__bWPIKHi9T6W8iCMYWWfCJ1xIV9xbBzhwaaJ6mFrEuqYWqSNKpHSw83HE-kJkThC9cPh3vpWJOAIYFwK_Q1yuXLG8BxN7lEELApK4m2jugbgrHM-PZv0peHkCSzyh_ApHDCqBzabS3lvWGcPGLwL54cYG47KyXNWYwLj3wBHInrDcqgwjoRNUKeLu9ILa_kTCxDWpjPIz"/>
|
|
</div>
|
|
<div class="px-6 pb-8">
|
|
<h4 class="font-h3 text-xl mb-3 text-primary">Supply Chain Solution</h4>
|
|
<p class="text-on-surface-variant text-sm mb-6">Pengadaan sarana produksi berkualitas tinggi dan logistik hasil tani yang efisien.</p>
|
|
<div class="flex items-center text-xs font-bold text-secondary gap-4">
|
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-base">inventory_2</span> Premium Input</span>
|
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-base">route</span> Global Logistics</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Service 3 -->
|
|
<div class="group bg-white rounded-2xl border border-gray-100 botanical-shadow p-2 transition-transform hover:-translate-y-2">
|
|
<div class="h-64 rounded-xl overflow-hidden mb-6">
|
|
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" data-alt="Overhead view of a vibrant farmers market with fresh organic vegetables neatly arranged" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDujlVx7c6VJc-jYB-Wv3eTOybiMd1ESUswUTn-NrMn134uue3xCGwjvxzAcGeUyFVJVfBOkmBRDXX36tDPAIbXxMVuVp1euVvVxVVJEYYrH-b4pOFT_iFBsarzEVXQqg2nhVwgRILNOlCjMiQXxl6VSLPQYaUZRygmFPVGDcxF-vJ2nSqMPW1wE9QqPXH8UL22SwcMnp4gavz5ZRNXiDyiHNkC_Fay9VnF5M3Euz4EaswfXVg5tAroO1ERpI56Cm21QtPLS5gz542z"/>
|
|
</div>
|
|
<div class="px-6 pb-8">
|
|
<h4 class="font-h3 text-xl mb-3 text-primary">Market Access</h4>
|
|
<p class="text-on-surface-variant text-sm mb-6">Menghubungkan produsen lokal dengan jaringan pasar ritel dan industri strategis.</p>
|
|
<div class="flex items-center text-xs font-bold text-secondary gap-4">
|
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-base">storefront</span> Direct Market</span>
|
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-base">payments</span> Fair Trade</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- CTA Section -->
|
|
<section class="py-24 bg-primary text-on-primary overflow-hidden relative">
|
|
<div class="absolute top-0 right-0 w-1/3 h-full opacity-10 pointer-events-none">
|
|
<span class="material-symbols-outlined text-[300px] rotate-12">potted_plant</span>
|
|
</div>
|
|
<div class="container max-w-7xl mx-auto px-8 relative z-10">
|
|
<div class="max-w-3xl">
|
|
<h2 class="font-h1 text-h1 mb-6">Siap Memajukan Pertanian Bersama Kami?</h2>
|
|
<p class="text-body-lg opacity-90 mb-10">Hubungi tim ahli kami untuk mendiskusikan bagaimana PT. Kelola Bumi Nusantara dapat mengoptimalkan produktivitas dan keberlanjutan lahan Anda.</p>
|
|
<div class="flex flex-wrap gap-4">
|
|
<button class="bg-secondary-container text-on-secondary-container px-10 py-5 rounded-2xl font-black text-lg hover:bg-secondary-fixed transition-all scale-100 active:scale-95">
|
|
Jadwalkan Konsultasi Gratis
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="w-full bg-gray-50 dark:bg-slate-900 border-t border-gray-200 dark:border-gray-800">
|
|
<div class="max-w-7xl mx-auto py-12 px-8 flex flex-col md:flex-row justify-between items-center gap-6">
|
|
<div class="flex flex-col items-center md:items-start gap-4">
|
|
<div class="text-lg font-bold text-green-800 dark:text-green-600">Kelola Bumi</div>
|
|
<p class="font-sans text-xs uppercase tracking-widest text-slate-500">© 2024 Kelola Bumi. Precision Agriculture for a Sustainable Future.</p>
|
|
</div>
|
|
<div class="flex flex-wrap justify-center gap-8 font-sans text-xs uppercase tracking-widest text-slate-500">
|
|
<a class="hover:text-green-600 hover:underline transition-all underline-offset-4 opacity-80 hover:opacity-100" href="#">Privacy Policy</a>
|
|
<a class="hover:text-green-600 hover:underline transition-all underline-offset-4 opacity-80 hover:opacity-100" href="#">Terms of Service</a>
|
|
<a class="hover:text-green-600 hover:underline transition-all underline-offset-4 opacity-80 hover:opacity-100" href="#">Sustainability Report</a>
|
|
<a class="hover:text-green-600 hover:underline transition-all underline-offset-4 opacity-80 hover:opacity-100" href="#">Career</a>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<a class="w-10 h-10 rounded-full border border-outline-variant flex items-center justify-center text-primary hover:bg-primary-fixed transition-colors" href="#">
|
|
<span class="material-symbols-outlined">public</span>
|
|
</a>
|
|
<a class="w-10 h-10 rounded-full border border-outline-variant flex items-center justify-center text-primary hover:bg-primary-fixed transition-colors" href="#">
|
|
<span class="material-symbols-outlined">mail</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body></html> |