### Install Dependencies and Run Development Server

Source: https://github.com/riomulya/arch/blob/main/README.md

Commands to clone the repository, install project dependencies using npm, and start the development server.

```bash
git clone <repository-url>
cd arch
npm install
npm run dev
```

--------------------------------

### Build and Start Production Server

Source: https://github.com/riomulya/arch/blob/main/README.md

Commands to build the project for production and start the production server.

```bash
npm run build
npm start
```

--------------------------------

### Environment Variables Configuration

Source: https://github.com/riomulya/arch/blob/main/README.md

Example of environment variables to be set in a .env.local file for website configuration.

```env
NEXT_PUBLIC_SITE_URL=https://archcontinenttech.com
NEXT_PUBLIC_WHATSAPP_NUMBER=6289514024380
NEXT_PUBLIC_EMAIL=ptarchcontinenttech@gmail.com
```

--------------------------------

### Manual Deployment Steps

Source: https://github.com/riomulya/arch/blob/main/README.md

Instructions for manual deployment by building the project and uploading the output folders.

```bash
npm run build
# Upload folder .next and public ke hosting
```

--------------------------------

### React Product Page with E-commerce Functionality

Source: https://context7.com/riomulya/arch/llms.txt

This React component creates a product detail page with interactive elements for selecting product size and quantity. It includes buttons to add items to a cart (with console logging) and to initiate a direct WhatsApp purchase, passing product details and quantity.

```javascript
// app/products/page.js
'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import { ShoppingCartIcon, PlusIcon, MinusIcon } from '@heroicons/react/24/outline';

export default function Products() {
  const [quantity, setQuantity] = useState(1);
  const [selectedSize, setSelectedSize] = useState('standard');

  const product = {
    name: 'Plastik Core Tray Premium',
    description: 'Solusi profesional untuk organisasi dan manajemen kabel di data center, industri, dan bangunan komersial.',
    features: [
      'Material plastik ABS berkualitas tinggi',
      'Tahan korosi dan cuaca ekstrem',
      'Mudah dipasang dan dipelihara',
      'Garansi 2 tahun',
    ],
    sizes: [
      { id: 'small', name: '100mm x 50mm', price: 125000 },
      { id: 'standard', name: '200mm x 100mm', price: 150000 },
      { id: 'large', name: '300mm x 150mm', price: 200000 },
    ],
  };

  const handleAddToCart = () => {
    const selectedProduct = product.sizes.find(size => size.id === selectedSize);
    console.log('Added to cart:', {
      product: product.name,
      size: selectedProduct.name,
      price: selectedProduct.price,
      quantity: quantity,
      total: selectedProduct.price * quantity,
    });
    alert(`${product.name} (${selectedProduct.name}) x${quantity} ditambahkan ke keranjang!`);
  };

  const handleBuyNow = () => {
    const selectedProduct = product.sizes.find(size => size.id === selectedSize);
    const message = `Halo, saya ingin membeli ${product.name} (${selectedProduct.name}) sebanyak ${quantity} unit. Total: Rp ${(selectedProduct.price * quantity).toLocaleString('id-ID')}`;
    window.open(
      `https://wa.me/6289514024380?text=${encodeURIComponent(message)}`,
      '_blank'
    );
  };

  const selectedProduct = product.sizes.find(size => size.id === selectedSize);

  return (
    <div className='min-h-screen bg-white'>
      <section className='py-12'>
        <div className='container mx-auto px-4'>
          <h1 className='text-3xl font-bold mb-4'>{product.name}</h1>

          <div className='mb-6'>
            <span className='text-3xl font-bold text-blue-600'>
              Rp {selectedProduct?.price.toLocaleString('id-ID')}
            </span>
          </div>

          <div className='mb-6'>
            <h3 className='text-lg font-semibold mb-3'>Pilih Ukuran:</h3>
            {product.sizes.map((size) => (
              <label
                key={size.id}
                className={`flex items-center justify-between p-4 border-2 rounded-lg cursor-pointer mb-3 ${
                  selectedSize === size.id ? 'border-blue-600 bg-blue-50' : 'border-gray-200'
                }`}
              >
                <input
                  type='radio'
                  name='size'
                  value={size.id}
                  checked={selectedSize === size.id}
                  onChange={(e) => setSelectedSize(e.target.value)}
                />
                <span className='font-medium'>{size.name}</span>
                <span className='font-bold text-blue-600'>
                  Rp {size.price.toLocaleString('id-ID')}
                </span>
              </label>
            ))}
          </div>

          <div className='mb-6'>
            <h3 className='text-lg font-semibold mb-3'>Jumlah:</h3>
            <div className='flex items-center space-x-4'>
              <button
                onClick={() => setQuantity(Math.max(1, quantity - 1))}
                className='p-2 border rounded'
              >
                <MinusIcon className='h-5 w-5' />
              </button>
              <span className='font-medium'>{quantity}</span>
              <button
                onClick={() => setQuantity(quantity + 1)}
                className='p-2 border rounded'
              >
                <PlusIcon className='h-5 w-5' />
              </button>
            </div>
          </div>

          <div className='flex gap-4'>
            <button
              onClick={handleAddToCart}
              className='flex-1 border-2 border-blue-600 text-blue-600 py-3 px-6 rounded-lg hover:bg-blue-50'
            >
              <ShoppingCartIcon className='h-5 w-5 inline mr-2' />
              Tambah ke Keranjang
            </button>
            <button
              onClick={handleBuyNow}
              className='flex-1 bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700'
            >
              Beli Sekarang
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

```

--------------------------------

### Root Layout Configuration (Next.js)

Source: https://context7.com/riomulya/arch/llms.txt

Configures the root layout for a Next.js application, including metadata settings for SEO (title, description, keywords, robots, OpenGraph) and structured data in JSON-LD format for search engines. It also imports global styles and analytics/speed insights tools.

```javascript
//app/layout.js
import { Inter } from 'next/font/google';
import { Analytics } from '@vercel/analytics/next';
import { SpeedInsights } from '@vercel/speed-insights/next';
import './globals.css';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

export const metadata = {
  title: {
    default: 'PT ARCH CONTINENT TECH - Solusi Bahan Konstruksi & Perlengkapan Teknis',
    template: '%s | PT ARCH CONTINENT TECH',
  },
  description: 'PT ARCH CONTINENT TECH adalah perusahaan terpercaya yang bergerak di bidang perdagangan besar bahan konstruksi dan perlengkapan teknis.',
  keywords: ['bahan konstruksi', 'perlengkapan teknis', 'plastik core tray', 'cable management'],
  robots: {
    index: true,
    follow: true,
  },
  openGraph: {
    type: 'website',
    locale: 'id_ID',
    url: 'https://archcontinenttech.com',
    siteName: 'PT ARCH CONTINENT TECH',
  },
};

const structuredData = {
  '@context': 'https://schema.org',
  '@type': 'LocalBusiness',
  name: 'PT ARCH CONTINENT TECH',
  address: {
    '@type': 'PostalAddress',
    streetAddress: 'JL WR SUPRATMAN GG SUKUN, RT 003/RW 006',
    addressLocality: 'Ciputat Timur',
    addressRegion: 'Tangerang Selatan, Banten',
    postalCode: '15141',
    addressCountry: 'ID',
  },
  telephone: '+6289514024380',
  email: 'ptarchcontinenttech@gmail.com',
};

export default function RootLayout({ children }) {
  return (
    <html lang='id' className='scroll-smooth'>
      <head>
        <script
          type='application/ld+json'
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(structuredData),
          }}
        />
      </head>
      <Analytics />
      <SpeedInsights />
      <body className={`${inter.className} antialiased bg-white text-gray-900`}>
        {children}
      </body>
    </html>
  );
}

```

--------------------------------

### Dynamic Sitemap Generation with JavaScript

Source: https://context7.com/riomulya/arch/llms.txt

Generates an SEO-optimized XML sitemap dynamically for static pages and blog posts. This route handler utilizes Next.js to create the sitemap.xml file, improving search engine crawling and indexing. It takes an array of static page paths and blog post slugs to construct the sitemap URLs.

```javascript
//app/sitemap.xml/route.js
export async function GET() {
  const baseUrl = 'https://archcontinenttech.com';

  const staticPages = [
    '',
    '/about',
    '/products',
    '/services',
    '/contact',
    '/legal',
    '/blog',
    '/cart',
  ];

  const blogPosts = [
    'pentingnya-cable-management-dengan-core-tray',
    'cara-memilih-bahan-konstruksi-berkualitas',
    'profil-pt-arch-continent-tech',
  ];

  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  ${staticPages
    .map(
      (page) => `
    <url>
      <loc>${baseUrl}${page}</loc>
      <lastmod>${new Date().toISOString()}</lastmod>
      <changefreq>weekly</changefreq>
      <priority>${page === '' ? '1.0' : '0.8'}</priority>
    </url>
  `
    )
    .join('')}
  ${blogPosts
    .map(
      (slug) => `
    <url>
      <loc>${baseUrl}/blog/${slug}</loc>
      <lastmod>${new Date().toISOString()}</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.6</priority>
    </url>
  `
    )
    .join('')}
</urlset>`;

  return new Response(sitemap, {
    headers: {
      'Content-Type': 'application/xml',
    },
  });
}
```

--------------------------------

### Responsive Header Component with Scroll Detection (JavaScript/React)

Source: https://context7.com/riomulya/arch/llms.txt

Implements a responsive header navigation component using React and Next.js. It features dynamic styling that changes background and shadow on scroll, and displays a shopping cart icon with an item count. Dependencies include React hooks, Next.js Link, framer-motion for animations, and Heroicons for icons.

```javascript
// app/components/Header.js
'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { Bars3Icon, XMarkIcon, ShoppingCartIcon } from '@heroicons/react/24/outline';

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const [cartItems, setCartItems] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navigation = [
    { name: 'Beranda', href: '/' },
    { name: 'Tentang Kami', href: '/about' },
    { name: 'Produk', href: '/products' },
    { name: 'Layanan', href: '/services' },
    { name: 'Blog', href: '/blog' },
    { name: 'Kontak', href: '/contact' },
    { name: 'Legalitas', href: '/legal' },
  ];

  return (
    <motion.header
      className={`fixed w-full top-0 z-50 transition-all duration-300 ${isScrolled ? 'bg-white/95 backdrop-blur-md shadow-lg' : 'bg-transparent'}`}
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      transition={{ duration: 0.5 }}
    >
      <nav className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16 lg:h-20">
          <Link href="/" className="flex items-center space-x-2">
            <div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-lg">ACT</span>
            </div>
            <div className="hidden sm:block">
              <h1 className="text-lg font-bold text-gray-900">PT ARCH CONTINENT TECH</h1>
              <p className="text-xs text-gray-600">Solusi Konstruksi & Teknis</p>
            </div>
          </Link>

          <div className="hidden lg:block">
            <div className="ml-10 flex items-baseline space-x-8">
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors duration-300"
                >
                  {item.name}
                </Link>
              ))}
            </div>
          </div>

          <Link href="/cart" className="relative p-2 text-gray-700 hover:text-blue-600">
            <ShoppingCartIcon className="h-6 w-6" />
            {cartItems > 0 && (
              <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                {cartItems}
              </span>
            )}
          </Link>
        </div>
      </nav>
    </motion.header>
  );
};

export default Header;

```

--------------------------------

### React Contact Form with WhatsApp Integration

Source: https://context7.com/riomulya/arch/llms.txt

This snippet implements a contact form using React and Next.js. It manages form state with useState, handles input changes, and provides functionality to submit messages and initiate a WhatsApp chat. Dependencies include React, Next.js, and Heroicons.

```javascript
"use client";

import { useState } from 'react';
import { motion } from 'framer-motion';
import { MapPinIcon, PhoneIcon, EnvelopeIcon, ChatBubbleLeftRightIcon } from '@heroicons/react/24/outline';

export default function Contact() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    company: '',
    subject: '',
    message: '',
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    alert('Pesan Anda telah terkirim!');
    setFormData({ name: '', email: '', phone: '', company: '', subject: '', message: '' });
  };

  const handleWhatsAppContact = () => {
    const message = `Halo, saya ${formData.name || '[Nama]'} dari ${formData.company || '[Perusahaan]'}.

Saya tertarik dengan produk/layanan PT ARCH CONTINENT TECH.

${formData.message ? `Pesan: ${formData.message}` : ''}`;

    window.open(
      `https://wa.me/6289514024380?text=${encodeURIComponent(message)}`,
      '_blank'
    );
  };

  return (
    <div className='min-h-screen bg-white'>
      <section className='py-20'>
        <div className='container mx-auto px-4'>
          <h1 className='text-4xl font-bold text-center mb-12'>Hubungi Kami</h1>

          <div className='grid lg:grid-cols-2 gap-12'>
            <div className='bg-white p-8 rounded-2xl shadow-lg'>
              <h2 className='text-2xl font-bold mb-6'>Kirim Pesan</h2>
              <form onSubmit={handleSubmit} className='space-y-4'>
                <input
                  type='text'
                  name='name'
                  value={formData.name}
                  onChange={handleInputChange}
                  placeholder='Nama Lengkap'
                  className='w-full px-4 py-3 border rounded-lg'
                  required
                />
                <input
                  type='email'
                  name='email'
                  value={formData.email}
                  onChange={handleInputChange}
                  placeholder='Email'
                  className='w-full px-4 py-3 border rounded-lg'
                  required
                />
                <input
                  type='tel'
                  name='phone'
                  value={formData.phone}
                  onChange={handleInputChange}
                  placeholder='Nomor Telepon'
                  className='w-full px-4 py-3 border rounded-lg'
                  required
                />
                <select
                  name='subject'
                  value={formData.subject}
                  onChange={handleInputChange}
                  className='w-full px-4 py-3 border rounded-lg'
                  required
                >
                  <option value=''>Pilih subjek</option>
                  <option value='product-inquiry'>Pertanyaan Produk</option>
                  <option value='quotation'>Permintaan Penawaran</option>
                  <option value='partnership'>Kemitraan</option>
                </select>
                <textarea
                  name='message'
                  value={formData.message}
                  onChange={handleInputChange}
                  placeholder='Pesan Anda'
                  rows='6'
                  className='w-full px-4 py-3 border rounded-lg'
                  required
                ></textarea>

                <div className='flex gap-4'>
                  <button
                    type='submit'
                    className='flex-1 bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700'
                  >
                    Kirim Pesan
                  </button>
                  <button
                    type='button'
                    onClick={handleWhatsAppContact}
                    className='flex-1 bg-green-500 text-white py-3 rounded-lg hover:bg-green-600'
                  >
                    <ChatBubbleLeftRightIcon className='h-5 w-5 inline mr-2' />
                    Chat WhatsApp
                  </button>
                </div>
              </form>
            </div>

            <div className='space-y-8'>
              <div className='bg-white p-8 rounded-2xl shadow-lg'>
                <h3 className='text-xl font-bold mb-4'>Informasi Kontak</h3>
                <div className='space-y-4'>
                  <div className='flex items-start gap-3'>
                    <MapPinIcon className='h-6 w-6 text-blue-600' />
                    <div>
                      <p className='font-semibold'>Alamat</p>
                      <p className='text-gray-600'>
                        JL WR SUPRATMAN GG SUKUN, RT 003/RW 006<br />
                        Ciputat Timur, Tangerang Selatan, Banten 15141
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
```

--------------------------------

### JavaScript Shopping Cart with WhatsApp Checkout (React/Next.js)

Source: https://context7.com/riomulya/arch/llms.txt

This JavaScript code defines a React component for a shopping cart. It manages cart items, allows quantity updates and item removal, calculates totals, and initiates a WhatsApp checkout process by constructing a pre-filled message.

```javascript
"use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import { PlusIcon, MinusIcon, TrashIcon } from '@heroicons/react/24/outline';

export default function Cart() {
  const [cartItems, setCartItems] = useState([
    {
      id: 1,
      name: 'Plastik Core Tray Premium',
      size: '200mm x 100mm',
      price: 150000,
      quantity: 2,
    },
  ]);

  const updateQuantity = (id, newQuantity) => {
    if (newQuantity < 1) return;
    setCartItems((items) =>
      items.map((item) =>
        item.id === id ? { ...item, quantity: newQuantity } : item
      )
    );
  };

  const removeItem = (id) => {
    setCartItems((items) => items.filter((item) => item.id !== id));
  };

  const subtotal = cartItems.reduce(
    (sum, item) => sum + item.price * item.quantity,
    0
  );
  const shipping = subtotal > 500000 ? 0 : 50000;
  const total = subtotal + shipping;

  const handleCheckout = () => {
    const orderDetails = cartItems
      .map(
        (item) =>
          `${item.name} (${item.size}) x${item.quantity} = Rp ${( 
            item.price * item.quantity
          ).toLocaleString('id-ID')}`
      )
      .join('\n');

    const message = `Halo, saya ingin melanjutkan pembelian:

${orderDetails}

Subtotal: Rp ${subtotal.toLocaleString('id-ID')}
Ongkir: Rp ${shipping.toLocaleString('id-ID')}
Total: Rp ${total.toLocaleString('id-ID')}

Mohon bantuan untuk proses selanjutnya.`;

    window.open(
      `https://wa.me/6289514024380?text=${encodeURIComponent(message)}`,
      '_blank'
    );
  };

  return (
    <div className='min-h-screen bg-white'>
      <section className='py-12'>
        <div className='container mx-auto px-4'>
          <h1 className='text-3xl font-bold mb-8'>Keranjang Belanja</h1>

          {cartItems.map((item) => (
            <div key={item.id} className='bg-white p-6 rounded-xl shadow-lg mb-4'>
              <div className='flex items-center justify-between'>
                <div>
                  <h3 className='font-bold'>{item.name}</h3>
                  <p className='text-gray-600'>{item.size}</p>
                  <p className='text-blue-600 font-bold'>
                    Rp {item.price.toLocaleString('id-ID')}
                  </p>
                </div>

                <div className='flex items-center gap-3'>
                  <button onClick={() => updateQuantity(item.id, item.quantity - 1)}>
                    <MinusIcon className='h-4 w-4' />
                  </button>
                  <span>{item.quantity}</span>
                  <button onClick={() => updateQuantity(item.id, item.quantity + 1)}>
                    <PlusIcon className='h-4 w-4' />
                  </button>
                </div>

                <p className='font-bold'>
                  Rp {(item.price * item.quantity).toLocaleString('id-ID')}
                </p>

                <button onClick={() => removeItem(item.id)} className='text-red-500'>
                  <TrashIcon className='h-5 w-5' />
                </button>
              </div>
            </div>
          ))}

          <div className='bg-white p-6 rounded-xl shadow-lg'>
            <h2 className='text-xl font-bold mb-4'>Ringkasan Pesanan</h2>
            <div className='space-y-2 mb-4'>
              <div className='flex justify-between'>
                <span>Subtotal</span>
                <span>Rp {subtotal.toLocaleString('id-ID')}</span>
              </div>
              <div className='flex justify-between'>
                <span>Ongkos Kirim</span>
                <span>{shipping === 0 ? 'Gratis' : `Rp ${shipping.toLocaleString('id-ID')}`}</span>
              </div>
              <div className='flex justify-between font-bold text-lg'>
                <span>Total</span>
                <span className='text-blue-600'>Rp {total.toLocaleString('id-ID')}</span>
              </div>
            </div>
            <button
              onClick={handleCheckout}
              className='w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700'
            >
              Lanjut ke Checkout
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

```

--------------------------------

### Render Company Services List with Animations (JavaScript)

Source: https://context7.com/riomulya/arch/llms.txt

This JavaScript code defines a React component for a services page. It displays a list of company services, each with associated details and KBLI codes. The component uses Framer Motion for entrance animations and Tailwind CSS for styling, making it suitable for client-side rendering.

```javascript
'use client';

import { motion } from 'framer-motion';
import { BuildingStorefrontIcon, TruckIcon, UserGroupIcon, HomeIcon } from '@heroicons/react/24/outline';

export default function Services() {
  const mainServices = [
    {
      icon: BuildingStorefrontIcon,
      title: 'Perdagangan Besar Berbagai Macam Barang',
      description: 'Menyediakan berbagai macam produk konstruksi dan teknis dalam skala besar.',
      features: [
        'Distribusi skala nasional',
        'Stok produk yang lengkap',
        'Harga kompetitif untuk pembelian grosir',
      ],
      kbli: 'KBLI 46901',
    },
    {
      icon: TruckIcon,
      title: 'Distribusi Bahan Konstruksi',
      description: 'Spesialisasi dalam distribusi bahan konstruksi berkualitas tinggi.',
      features: [
        'Material konstruksi bersertifikat',
        'Pengiriman tepat waktu',
        'Quality control ketat',
      ],
      kbli: 'KBLI 46630',
    },
    {
      icon: UserGroupIcon,
      title: 'Jasa Agen/Komisioner untuk Produk Teknis',
      description: 'Melayani sebagai agen dan komisioner untuk berbagai produk teknis.',
      features: [
        'Representasi produk internasional',
        'Negosiasi harga terbaik',
        'After-sales support',
      ],
      kbli: 'KBLI 46190',
    },
    {
      icon: HomeIcon,
      title: 'Konsultasi Real Estat',
      description: 'Memberikan layanan konsultasi profesional untuk investasi properti.',
      features: [
        'Analisis investasi properti',
        'Konsultasi pengembangan',
        'Legal assistance',
      ],
      kbli: 'KBLI 68109',
    },
  ];

  return (
    <div className='min-h-screen bg-white'>
      <section className='py-20'>
        <div className='container mx-auto px-4'>
          <h1 className='text-4xl font-bold text-center mb-12'>Layanan Kami</h1>

          <div className='grid lg:grid-cols-2 gap-8'>
            {mainServices.map((service, index) => (
              <motion.div
                key={service.title}
                className='bg-white p-8 rounded-2xl shadow-lg'
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: index * 0.1 }}
                viewport={{ once: true }}
              >
                <div className='flex items-start space-x-4'>
                  <div className='w-16 h-16 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center'>
                    <service.icon className='h-8 w-8 text-white' />
                  </div>
                  <div className='flex-1'>
                    <div className='flex justify-between mb-2'>
                      <h3 className='text-xl font-bold'>{service.title}</h3>
                      <span className='text-sm text-blue-600 font-medium bg-blue-50 px-3 py-1 rounded-full'>
                        {service.kbli}
                      </span>
                    </div>
                    <p className='text-gray-600 mb-4'>{service.description}</p>
                    <ul className='space-y-2'>
                      {service.features.map((feature, idx) => (
                        <li key={idx} className='flex items-center space-x-2'>
                          <div className='w-2 h-2 bg-blue-600 rounded-full'></div>
                          <span className='text-gray-700 text-sm'>{feature}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

```

--------------------------------

### Animated Hero Section Component in Next.js

Source: https://context7.com/riomulya/arch/llms.txt

This Javascript code defines the homepage hero section for a Next.js application. It uses Framer Motion for entrance animations on the heading, paragraph, and call-to-action buttons. The component includes links to 'Products' and 'About' pages, styled with gradients and hover effects.

```javascript
// app/page.js
'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import Header from './components/Header';
import Footer from './components/Footer';
import { ArrowRightIcon } from '@heroicons/react/24/outline';

export default function Home() {
  return (
    <div className='min-h-screen bg-white'>
      <Header />

      <section className='relative min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-900 via-blue-800 to-purple-900'>
        <div className='container mx-auto px-4 sm:px-6 lg:px-8 relative z-10'>
          <div className='text-center'>
            <motion.h1
              className='text-4xl sm:text-5xl lg:text-7xl font-bold text-white mb-6'
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
            >
              Solusi Terpercaya untuk{' '}
              <span className='bg-gradient-to-r from-yellow-400 to-orange-500 bg-clip-text text-transparent'>
                Konstruksi & Teknis
              </span>
            </motion.h1>

            <motion.p
              className='text-xl sm:text-2xl text-blue-100 mb-8 max-w-3xl mx-auto'
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
            >
              PT ARCH CONTINENT TECH menyediakan bahan konstruksi dan
              perlengkapan teknis berkualitas tinggi
            </motion.p>

            <motion.div
              className='flex flex-col sm:flex-row gap-4 justify-center'
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
            >
              <Link
                href='/products'
                className='bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 text-gray-900 font-bold py-4 px-8 rounded-full transition-all duration-300 transform hover:scale-105 flex items-center justify-center space-x-2'
              >
                <span>Lihat Produk Kami</span>
                <ArrowRightIcon className='h-5 w-5' />
              </Link>
              <Link
                href='/about'
                className='border-2 border-white text-white hover:bg-white hover:text-blue-900 font-bold py-4 px-8 rounded-full transition-all duration-300'
              >
                Tentang Perusahaan
              </Link>
            </motion.div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.