Model: ai-master
Folder: /opt/ai-gateway/projects/hallo-app
Created: 2026-05-30T20:10:14.788Z
Preview URL: https://hallo-app.preview.ai.brothercasuals.com
Buka Code Server Preview App Lihat Jobs Job BaruBuat aplikasi landing page sederhana untuk Brother Casual
Oke, Brother Ayik. Siap untuk aplikasi landing page sederhana "Brother Casual".
---
**Rencana Coding: hallo-app - Landing Page Brother Casual**
**Folder Target:** `/opt/ai-gateway/projects/hallo-app`
**1. Struktur File & Folder**
```
/opt/ai-gateway/projects/hallo-app/
├── public/
│ ├── index.html
│ └── css/
│ └── style.css
└── README.md (Opsional, untuk catatan proyek)
```
**2. Kode**
**File: `/opt/ai-gateway/projects/hallo-app/public/index.html`**
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brother Casual - Pakaian Santai Pria</title>
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="hero">
<div class="container">
<h1>BROTHER CASUAL</h1>
<p>Gaya Santai, Kualitas Terbaik untuk Pria Modern</p>
<a href="#produk" class="btn">Lihat Koleksi</a>
</div>
</header>
<section id="tentang" class="section about">
<div class="container">
<h2>Tentang Kami</h2>
<p>Brother Casual hadir untuk Anda para pria yang mencari kenyamanan tanpa mengorbankan gaya. Kami menawarkan pilihan pakaian santai yang dibuat dengan bahan berkualitas tinggi, desain modern, dan harga yang terjangkau.</p>
<p>Dari t-shirt kasual hingga kemeja flannel yang stylish, setiap produk kami dirancang untuk menemani aktivitas harian Anda, memastikan Anda selalu terlihat percaya diri dan nyaman.</p>
</div>
</section>
<section id="produk" class="section products">
<div class="container">
<h2>Koleksi Kami</h2>
<div class="product-grid">
<div class="product-item">
<img src="https://via.placeholder.com/300x200?text=T-Shirt+Keren" alt="T-Shirt Brother Casual">
<h3>T-Shirt Katun Premium</h3>
<p>Nyaman dipakai seharian, tersedia berbagai warna.</p>
<a href="#" class="btn-small">Detail</a>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/300x200?text=Kemeja+Flannel" alt="Kemeja Flannel Brother Casual">
<h3>Kemeja Flannel Stylish</h3>
<p>Pilihan tepat untuk gaya casual smart Anda.</p>
<a href="#" class="btn-small">Detail</a>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/300x200?text=Celana+Chino" alt="Celana Chino Brother Casual">
<h3>Celana Chino Modern</h3>
<p>Padu padan sempurna untuk setiap kesempatan.</p>
<a href="#" class="btn-small">Detail</a>
</div>
</div>
<a href="#" class="btn cta-btn">Jelajahi Semua Produk</a>
</div>
</section>
<section id="kontak" class="section contact">
<div class="container">
<h2>Hubungi Kami</h2>
<p>Tertarik dengan produk kami atau ingin bertanya lebih lanjut?</p>
<p>Ikuti kami di media sosial atau hubungi kami langsung!</p>
<div class="social-links">
<a href="https://instagram.com/brothercasual" target="_blank">Instagram</a>
<a href="https://facebook.com/brothercasual" target="_blank">Facebook</a>
<a href="mailto:info@brothercasual.com">Email</a>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© 2023 Brother Casual. Semua Hak Dilindungi.</p>
</div>
</footer>
</body>
</html>
```
**File: `/opt/ai-gateway/projects/hallo-app/public/css/style.css`**
```css
/* General Styling */
:root {
--primary-color: #333;
--secondary-color: #f4f4f4;
--accent-color: #007bff;
--text-color: #555;
--light-text-color: #fff;
--btn-bg: #4CAF50; /* A friendly green */
--btn-hover-bg: #45a049;
--font-family: 'Open Sans', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family);
line-height: 1.6;
color: var(--text-color);
background-color: var(--light-text-color);
}
.container {
max-width: 1100px;
margin: auto;
overflow: hidden;
padding: 0 20px;
}
h1, h2, h3 {
color: var(--primary-color);
margin-bottom: 15px;
}
p {
margin-bottom: 10px;
}
/* Buttons */
.btn {
display: inline-block;
color: var(--light-text-color);
background: var(--btn-bg);
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-size: 1rem;
transition: background 0.3s ease;
}
.btn:hover {
background: var(--btn-hover-bg);
}
.btn-small {
padding: 5px 10px;
font-size: 0.8rem;
background: var(--accent-color);
}
.btn-small:hover {
background: darken(var(--accent-color), 10%);
}
/* Header/Hero Section */
.hero {
background: url('https://via.placeholder.com/1920x600?text=Brother+Casual+Background') no-repeat center center/cover;
color: var(--light-text-color);
height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
z-index: 1;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Overlay */
z-index: -1;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 10px;
color: var(--light-text-color);
}
.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
color: var(--light-text-color);
}
/* Sections */
.section {
padding: 60px 0;
text-align: center;
}
.section:nth-child(even) { /* Alternating background for sections */
background-color: var(--secondary-color);
}
.section h2 {
font-size: 2.5rem;
margin-bottom: 30px;
}
/* About Section */
.about p {
max-width: 800px;
margin: 0 auto 20px auto;
font-size: 1.1rem;
}
/* Products Section */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.product-item {
background: var(--light-text-color);
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.product-item:hover {
transform: translateY(-5px);
}
.product-item img {
max-width: 100%;
height: auto;
border-radius: 5px;
margin-bottom: 15px;
}
.product-item h3 {
font-size: 1.4rem;
margin-bottom: 10px;
}
.product-item p {
font-size: 0.95rem;
color: var(--text-color);
margin-bottom: 15px;
}
.cta-btn {
margin-top: 20px;
background: var(--primary-color);
}
.cta-btn:hover {
background: #555;
}
/* Contact Section */
.social-links a {
color: var(--accent-color);
text-decoration: none;
margin: 0 15px;
font-size: 1.1rem;
transition: color 0.3s ease;
}
.social-links a:hover {
color: var(--primary-color);
}
/* Footer */
footer {
background: var(--primary-color);
color: var(--light-text-color);
text-align: center;
padding: 30px 0;
font-size: 0.9rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1rem;
}
.section h2 {
font-size: 2rem;
}
.product-grid {
grid-template-columns: 1fr; /* Stack products on small screens */
}
}
@media (max-width: 480px) {
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 0.9rem;
padding: 0 10px;
}
.btn {
padding: 8px 15px;
font-size: 0.9rem;
}
.social-links a {
display: block;
margin: 10px 0;
}
}
```
---
**Cara Eksekusi di VPS:**
1. **Buat Struktur Folder:**
```bash
mkdir -p /opt/ai-gateway/projects/hallo-app/public/css
```
2. **Buat File `index.html`:**
```bash
nano /opt/ai-gateway/projects/hallo-app/public/index.html
```
(Paste kode HTML di atas, lalu simpan: `Ctrl+X`, `Y`, `Enter`)
3. **Buat File `style.css`:**
```bash
nano /opt/ai-gateway/projects/hallo-app/public/css/style.css
```
(Paste kode CSS di atas, lalu simpan: `Ctrl+X`, `Y`, `Enter`)
**Untuk Menampilkan di Web Server (Contoh dengan Nginx):**
Jika Anda menggunakan Nginx, Anda bisa mengkonfigurasi server block baru atau alias.
1. **Buat File Konfigurasi Nginx Baru:**
```bash
sudo nano /etc/nginx/sites-available/hallo-app
```
2. **Isi dengan Konfigurasi Berikut:**
```nginx
server {
listen 80;
server_name hallo-app.yourdomain.com your_server_ip; # Ganti dengan domain atau IP Anda
root /opt/ai-gateway/projects/hallo-app/public;
index index.html;
location / {
try_files $uri $uri/ =404;
}
# Opsional: Cache CSS, JS, images
location ~* \.(css|js|gif|jpe?g|png)$ {
expires 1y;
add_header Cache-Control "public, no-transform";
}
}
```
(Simpan: `Ctrl+X`, `Y`, `Enter`)
3. **Aktifkan Konfigurasi:**
```bash
sudo ln -s /etc/nginx/sites-available/hallo-app /etc/nginx/sites-enabled/
```
4. **Uji Konfigurasi Nginx:**
```bash
sudo nginx -t
```
5. **Restart Nginx:**
```bash
sudo systemctl restart nginx
```
Sekarang, Anda bisa mengakses landing page Brother Casual melalui IP server Anda atau domain yang telah Anda set (`hallo-app.yourdomain.com`). Selamat mencoba!