Merge pull request #12 from lampungdevtech/feature/enhance-landing-page-responsiveness-and-update-site-content

Enhance Landing Page Responsiveness and Update Site Content

Author: Fari

apps/web/app/contact/page.tsx

@@ -62,7 +62,7 @@ export default function ContactPage() {
                   <h3 className="font-semibold mb-1">Telepon</h3>
                   <p className="text-muted-foreground mb-2">Senin - Jumat, 09:00 - 17:00 WIB</p>
                   <a href="tel:+628123456789" className="text-primary hover:underline">
-                    +62 812-3456-789
+                    +62 812-1586-9294
                   </a>
                 </div>
               </div>
@@ -74,9 +74,8 @@ export default function ContactPage() {
                 <div>
                   <h3 className="font-semibold mb-1">Lokasi</h3>
                   <p className="text-muted-foreground">
-                    Lampung Digital Hub<br />
-                    Jl. ZA. Pagar Alam No.24<br />
-                    Bandar Lampung, 35145
+                    Bandar Lampung<br />
+                    Metro<br />
                   </p>
                 </div>
               </div>

apps/web/app/members/page.tsx

@@ -1,78 +1,30 @@
-"use client";
+'use client';
 
 import { useState } from 'react';
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { Search, Github, Twitter, Linkedin, Users2 } from "lucide-react";
-
-const members = [
-  {
-    id: 1,
-    name: "Riza Fahmi",
-    role: "Senior Frontend Developer",
-    company: "Tech Corp",
-    location: "Bandar Lampung",
-    skills: ["React", "TypeScript", "Node.js"],
-    image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&q=80&w=200",
-    social: {
-      github: "https://github.com/rizafahmi",
-      twitter: "https://twitter.com/rizafahmi",
-      linkedin: "https://linkedin.com/in/rizafahmi"
-    }
-  },
-  {
-    id: 2,
-    name: "Sarah Drasana",
-    role: "Backend Developer",
-    company: "Startup XYZ",
-    location: "Metro",
-    skills: ["Python", "Django", "PostgreSQL"],
-    image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=200",
-    social: {
-      github: "https://github.com/sarahdrasana",
-      twitter: "https://twitter.com/sarahdrasana",
-      linkedin: "https://linkedin.com/in/sarahdrasana"
-    }
-  },
-  {
-    id: 3,
-    name: "Ahmad Zaky",
-    role: "Full Stack Developer",
-    company: "Freelancer",
-    location: "Bandar Lampung",
-    skills: ["JavaScript", "React", "Node.js", "MongoDB"],
-    image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=200",
-    social: {
-      github: "https://github.com/ahmadzaky",
-      twitter: "https://twitter.com/ahmadzaky",
-      linkedin: "https://linkedin.com/in/ahmadzaky"
-    }
-  },
-  {
-    id: 4,
-    name: "Linda Putri",
-    role: "UI/UX Designer",
-    company: "Design Studio",
-    location: "Pringsewu",
-    skills: ["Figma", "Adobe XD", "UI Design", "UX Research"],
-    image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=200",
-    social: {
-      github: "https://github.com/lindaputri",
-      twitter: "https://twitter.com/lindaputri",
-      linkedin: "https://linkedin.com/in/lindaputri"
-    }
-  }
-];
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import {
+  Search,
+  Github,
+  Twitter,
+  Linkedin,
+  Users2,
+  Instagram,
+} from 'lucide-react';
+import { members } from '@/constants/members';
 
 export default function MembersPage() {
-  const [searchQuery, setSearchQuery] = useState("");
+  const [searchQuery, setSearchQuery] = useState('');
 
-  const filteredMembers = members.filter(member =>
-    member.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    member.role.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    member.location.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    member.skills.some(skill => skill.toLowerCase().includes(searchQuery.toLowerCase()))
+  const filteredMembers = members.filter(
+    (member) =>
+      member.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      member.role.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      member.location.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      member.skills.some((skill) =>
+        skill.toLowerCase().includes(searchQuery.toLowerCase())
+      )
   );
 
   return (
@@ -81,7 +33,9 @@ export default function MembersPage() {
         {/* Header */}
         <div className="text-center mb-12">
           <h1 className="text-4xl font-bold mb-4">Anggota Komunitas</h1>
-          <p className="text-muted-foreground">Temukan dan terhubung dengan sesama developer di Lampung</p>
+          <p className="text-muted-foreground">
+            Temukan dan terhubung dengan sesama developer di Lampung
+          </p>
         </div>
 
         {/* Search */}
@@ -110,7 +64,9 @@ export default function MembersPage() {
                   <div>
                     <h3 className="text-lg font-semibold">{member.name}</h3>
                     <p className="text-primary">{member.role}</p>
-                    <p className="text-sm text-muted-foreground">{member.company}</p>
+                    <p className="text-sm text-muted-foreground">
+                      {member.company}
+                    </p>
                   </div>
                 </div>
                 <p className="text-sm text-muted-foreground mb-4">
@@ -130,20 +86,46 @@ export default function MembersPage() {
                 </div>
                 <div className="flex space-x-2">
                   <Button variant="ghost" size="icon" asChild>
-                    <a href={member.social.github} target="_blank" rel="noopener noreferrer">
+                    <a
+                      href={member.social.github}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
                       <Github className="h-4 w-4" />
                     </a>
                   </Button>
                   <Button variant="ghost" size="icon" asChild>
-                    <a href={member.social.twitter} target="_blank" rel="noopener noreferrer">
+                    <a
+                      href={member.social.twitter}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
                       <Twitter className="h-4 w-4" />
                     </a>
                   </Button>
                   <Button variant="ghost" size="icon" asChild>
-                    <a href={member.social.linkedin} target="_blank" rel="noopener noreferrer">
+                    <a
+                      href={member.social.linkedin}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
                       <Linkedin className="h-4 w-4" />
                     </a>
                   </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    asChild
+                    className="hover:text-accent-foreground/80"
+                  >
+                    <a
+                      href={member.social.instagram}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Instagram className="h-5 w-5" />
+                    </a>
+                  </Button>
                 </div>
               </Card>
             ))}
@@ -156,13 +138,15 @@ export default function MembersPage() {
                 <Search className="h-12 w-12 absolute bottom-0 right-0 text-primary" />
               </div>
             </div>
-            <h3 className="text-2xl font-semibold mb-2">Tidak Ada Anggota Ditemukan</h3>
+            <h3 className="text-2xl font-semibold mb-2">
+              Tidak Ada Anggota Ditemukan
+            </h3>
             <p className="text-muted-foreground mb-8">
               Tidak ada anggota yang sesuai dengan kriteria pencarian Anda.
               {searchQuery && ` Coba cari dengan kata kunci yang berbeda.`}
             </p>
             {searchQuery && (
-              <Button onClick={() => setSearchQuery("")}>
+              <Button onClick={() => setSearchQuery('')}>
                 Reset Pencarian
               </Button>
             )}
@@ -171,4 +155,4 @@ export default function MembersPage() {
       </div>
     </div>
   );
-}
+}