Merge pull request #24 from sensasi-delight:landing

Enhance SEO, layout responsiveness, and project display

Author: sensasi-delight

src/app/layout.tsx

@@ -1,6 +1,6 @@
-import type { Metadata } from 'next'
 import { Inter, JetBrains_Mono } from 'next/font/google'
 import './globals.css'
+export { metadata } from './metadata'
 
 const inter = Inter({
   subsets: ['latin'],
@@ -12,18 +12,6 @@ const jetbrainsMono = JetBrains_Mono({
   variable: '--font-jetbrains-mono',
 })
 
-export const metadata: Metadata = {
-  title: 'Code Showcase Studio - Platform Project Mahasiswa POLNES',
-  description:
-    'Platform untuk memamerkan project-project dari mahasiswa Politeknik Negeri Samarinda',
-  authors: [
-    {
-      name: 'Klub Pemrograman TI POLNES',
-      url: 'https://github.com/pemrogrammer',
-    },
-  ],
-}
-
 export default function RootLayout({
   children,
 }: Readonly<{

src/app/metadata.ts

@@ -0,0 +1,77 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Code Showcase Studio | Bagikan & Temukan Proyek Kode',
+  description:
+    'Platform untuk menampilkan, menjelajahi, dan berkolaborasi pada proyek kode. Bagikan karya Anda, dapatkan masukan, dan bergabung dengan komunitas developer.',
+  keywords: [
+    'Code Showcase Studio',
+    'Code Showcase Studio CSS',
+    'CSS platform code showcase',
+    'komunitas developer',
+    'bagikan kode',
+    'proyek open source',
+    'portofolio pemrograman',
+    'kolaborasi kode',
+    'leaderboard developer',
+    'vote proyek',
+    'platform coding',
+    'komunitas pemrograman',
+    'temukan proyek',
+    'proyek terbaik',
+    'komunitas pemrograman terdepan',
+    'klub pemrograman',
+    'ti polnes',
+    'kpti',
+    'code portfolio',
+    'developer community',
+    'share your project',
+    'coding projects',
+    'open source projects',
+    'programming portfolio',
+    'student projects',
+    'developer showcase',
+    'hackathon projects',
+    'software portfolio',
+    'team coding collaboration',
+    'side projects showcase',
+  ],
+  authors: [
+    {
+      name: 'Tim Code Showcase Studio | Klub Pemrograman TI POLNES',
+      url: 'https://github.com/pemrogrammer',
+    },
+  ],
+  openGraph: {
+    title: 'Code Showcase Studio',
+    description:
+      'Tampilkan dan temukan proyek kode menarik. Terhubung dengan developer lain, berbagi ide, dan kembangkan perjalanan coding Anda.',
+    url: 'https://code-showcase-studio.vercel.app',
+    siteName: 'Code Showcase Studio',
+    // images: [
+    //   {
+    //     url: 'https://code-showcase-studio.vercel.app/og-image.png',
+    //     width: 1200,
+    //     height: 630,
+    //     alt: 'Pratinjau Code Showcase Studio',
+    //   },
+    // ],
+    locale: 'id_ID',
+    type: 'website',
+  },
+  twitter: {
+    // card: 'summary_large_image',
+    card: 'summary',
+    title: 'Code Showcase Studio',
+    description:
+      'Bagikan dan temukan proyek kode menarik. Bergabunglah dengan komunitas developer hari ini!',
+    // images: ['https://code-showcase-studio.vercel.app/og-image.png'],
+    // creator: '@your_twitter_handle',
+  },
+  // icons: {
+  //   icon: '/favicon.ico',
+  //   shortcut: '/favicon-16x16.png',
+  //   apple: '/apple-touch-icon.png',
+  // },
+  // manifest: '/site.webmanifest',
+}

src/app/page.module.css

@@ -3,7 +3,7 @@ import { ArrowRight, Play, Sparkles } from 'lucide-react'
 
 export default function HeroSection() {
   return (
-    <section className="py-20 md:py-16 relative overflow-hidden">
+    <section className="py-20 md:py-16 relative overflow-hidden min-h-[calc(100vh-76px)]">
       <div className="absolute inset-0" />
 
       <div className="container mx-auto px-4 relative">

src/features/landing/components/hero-section.tsx

@@ -2,63 +2,64 @@ import { Card } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Heart, MessageCircle, Eye, Star, ExternalLink } from 'lucide-react'
+import Image from 'next/image'
 
 const recentProjects = [
   {
     id: 1,
     title: 'Smart Campus Navigation App',
     author: 'Ahmad Rizki',
-    authorAvatar: '/placeholder.svg?height=40&width=40',
+    authorAvatar: '/placeholder.svg',
     description:
       'Aplikasi navigasi kampus menggunakan AR dan machine learning untuk membantu mahasiswa baru',
     technologies: ['React Native', 'TensorFlow', 'Firebase', 'ARCore'],
     likes: 42,
     comments: 8,
     views: 156,
-    image: '/placeholder.svg?height=200&width=300',
+    image: '/placeholder.svg',
     postedAt: '2 jam yang lalu',
     featured: true,
   },
   {
     id: 2,
     title: 'E-Learning Platform POLNES',
     author: 'Siti Nurhaliza',
-    authorAvatar: '/placeholder.svg?height=40&width=40',
+    authorAvatar: '/placeholder.svg',
     description:
       'Platform pembelajaran online dengan fitur video conference dan assignment management',
     technologies: ['Next.js', 'PostgreSQL', 'WebRTC', 'Prisma'],
     likes: 38,
     comments: 12,
     views: 203,
-    image: '/placeholder.svg?height=200&width=300',
+    image: '/placeholder.svg',
     postedAt: '4 jam yang lalu',
     featured: false,
   },
   {
     id: 3,
     title: 'IoT Greenhouse Monitoring',
     author: 'Bayu Pratama',
-    authorAvatar: '/placeholder.svg?height=40&width=40',
+    authorAvatar: '/placeholder.svg',
     description: 'Sistem monitoring greenhouse otomatis dengan sensor IoT dan dashboard real-time',
     technologies: ['Arduino', 'Node.js', 'MongoDB', 'Socket.io'],
     likes: 29,
     comments: 6,
     views: 134,
-    image: '/placeholder.svg?height=200&width=300',
+    image: '/placeholder.svg',
     postedAt: '6 jam yang lalu',
     featured: false,
   },
   {
     id: 4,
     title: 'Blockchain Voting System',
     author: 'Dewi Kartika',
-    authorAvatar: '/placeholder.svg?height=40&width=40',
+    authorAvatar: '/placeholder.svg',
     description: 'Sistem voting digital menggunakan blockchain untuk transparansi dan keamanan',
     technologies: ['Solidity', 'Web3.js', 'React', 'Ethereum'],
     likes: 51,
     comments: 15,
     views: 287,
-    image: '/placeholder.svg?height=200&width=300',
+    image: '/placeholder.svg',
     postedAt: '8 jam yang lalu',
     featured: true,
   },
@@ -117,8 +118,10 @@ function ProjectCard({ project }: { project: (typeof recentProjects)[number] })
       )}
 
       <div className="relative overflow-hidden">
-        <img
+        <Image
           src={project.image || '/placeholder.svg'}
+          width={300}
+          height={200}
           alt={project.title}
           className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
         />
@@ -134,8 +137,10 @@ function ProjectCard({ project }: { project: (typeof recentProjects)[number] })
 
       <div className="p-6">
         <div className="flex items-center gap-3 mb-4">
-          <img
+          <Image
             src={project.authorAvatar || '/placeholder.svg'}
+            width={40}
+            height={40}
             alt={project.author}
             className="w-8 h-8 rounded-full"
           />