[ Mini Kiebo ]

Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64 Path: D:/xampp/htdocs/dummyweb/app/frontend/src/components/Sections/ [ Home ]
File: NewsSection.jsx
Action: file_editor create /app/frontend/src/components/sections/NewsSection.jsx --file-text "import React from 'react';
import { useLanguage } from '../../contexts/LanguageContext';
import { Card, CardHeader, CardContent } from '../ui/card';
import { Badge } from '../ui/badge';
import { Button } from '../ui/button';
import { Calendar, User, ArrowRight, Newspaper } from 'lucide-react';
import mockData from '../../mockData';

const NewsSection = () => {
  const { t } = useLanguage();

  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleDateString(t('id-ID', 'en-US'), {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  };

  return (
    <section id=\"news\" className=\"py-20 bg-gradient-to-b from-gray-50 to-white\">
      <div className=\"container mx-auto px-4\">
        {/* Section Header */}
        <div className=\"text-center mb-16\">
          <div className=\"inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-emerald-500 to-teal-400 rounded-2xl mb-4 shadow-lg\">
            <Newspaper className=\"h-8 w-8 text-white\" />
          </div>
          <h2 className=\"text-3xl md:text-4xl font-bold text-gray-900 mb-4\">
            {t('Berita & Pengumuman', 'News & Announcements')}
          </h2>
          <p className=\"text-lg text-gray-600 max-w-2xl mx-auto\">
            {t(
              'Ikuti berita terbaru dan pengumuman penting dari Akademi Farmasi Bandung',
              'Follow the latest news and important announcements from Bandung Pharmacy Academy'
            )}
          </p>
          <div className=\"w-24 h-1 bg-gradient-to-r from-emerald-600 to-teal-500 mx-auto mt-4 rounded-full\"></div>
        </div>

        {/* Featured News */}
        {mockData.news.length > 0 && (
          <div className=\"mb-12\">
            <Card className=\"overflow-hidden border-0 shadow-2xl hover:shadow-3xl transition-shadow duration-500\">
              <div className=\"grid lg:grid-cols-2\">
                {/* Image */}
                <div className=\"relative h-80 lg:h-auto overflow-hidden\">
                  <img
                    src={mockData.news[0].image}
                    alt={t(mockData.news[0].title_id, mockData.news[0].title_en)}
                    className=\"w-full h-full object-cover transform hover:scale-105 transition-transform duration-700\"
                  />
                  <div className=\"absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent\"></div>
                  <Badge className=\"absolute top-6 left-6 bg-emerald-600 hover:bg-emerald-700 text-white border-0 shadow-lg\">
                    {t(mockData.news[0].category_id, mockData.news[0].category_en)}
                  </Badge>
                </div>

                {/* Content */}
                <div className=\"p-8 lg:p-12 flex flex-col justify-center\">
                  <div className=\"flex items-center gap-4 text-sm text-gray-500 mb-4\">
                    <div className=\"flex items-center gap-1\">
                      <Calendar className=\"h-4 w-4\" />
                      {formatDate(mockData.news[0].date)}
                    </div>
                    <div className=\"flex items-center gap-1\">
                      <User className=\"h-4 w-4\" />
                      {mockData.news[0].author}
                    </div>
                  </div>

                  <h3 className=\"text-2xl md:text-3xl font-bold text-gray-900 mb-4 leading-tight\">
                    {t(mockData.news[0].title_id, mockData.news[0].title_en)}
                  </h3>

                  <p className=\"text-gray-600 leading-relaxed mb-6\">
                    {t(mockData.news[0].excerpt_id, mockData.news[0].excerpt_en)}
                  </p>

                  <Button className=\"bg-gradient-to-r from-emerald-600 to-teal-500 hover:from-emerald-700 hover:to-teal-600 w-fit group\">
                    {t('Baca Selengkapnya', 'Read More')}
                    <ArrowRight className=\"ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform\" />
                  </Button>
                </div>
              </div>
            </Card>
          </div>
        )}

        {/* Other News Grid */}
        <div className=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8\">
          {mockData.news.slice(1).map((news, index) => (
            <Card 
              key={news.id} 
              className=\"group hover:shadow-xl transition-all duration-500 border-0 overflow-hidden\"
              style={{ animationDelay: `${index * 100}ms` }}
            >
              {/* Image */}
              <div className=\"relative h-52 overflow-hidden\">
                <img
                  src={news.image}
                  alt={t(news.title_id, news.title_en)}
                  className=\"w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700\"
                />
                <div className=\"absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent\"></div>
                <Badge className=\"absolute top-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white border-0 shadow-lg\">
                  {t(news.category_id, news.category_en)}
                </Badge>
              </div>

              <CardHeader className=\"pb-3\">
                <div className=\"flex items-center gap-3 text-xs text-gray-500 mb-3\">
                  <div className=\"flex items-center gap-1\">
                    <Calendar className=\"h-3.5 w-3.5\" />
                    {formatDate(news.date)}
                  </div>
                  <div className=\"flex items-center gap-1\">
                    <User className=\"h-3.5 w-3.5\" />
                    {news.author}
                  </div>
                </div>
                <h3 className=\"text-lg font-bold text-gray-900 group-hover:text-emerald-600 transition-colors line-clamp-2\">
                  {t(news.title_id, news.title_en)}
                </h3>
              </CardHeader>

              <CardContent className=\"pb-6\">
                <p className=\"text-gray-600 text-sm leading-relaxed line-clamp-3 mb-4\">
                  {t(news.excerpt_id, news.excerpt_en)}
                </p>
                <Button 
                  variant=\"ghost\" 
                  className=\"p-0 h-auto font-semibold text-emerald-600 hover:text-emerald-700 hover:bg-transparent group/btn\"
                >
                  {t('Baca Selengkapnya', 'Read More')}
                  <ArrowRight className=\"ml-1 h-4 w-4 group-hover/btn:translate-x-1 transition-transform\" />
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* View All Button */}
        <div className=\"text-center mt-12\">
          <Button 
            variant=\"outline\" 
            size=\"lg\"
            className=\"border-2 border-emerald-600 text-emerald-600 hover:bg-emerald-600 hover:text-white\"
          >
            {t('Lihat Semua Berita', 'View All News')}
            <ArrowRight className=\"ml-2 h-5 w-5\" />
          </Button>
        </div>
      </div>
    </section>
  );
};

export default NewsSection;
"
Observation: Create successful: /app/frontend/src/components/sections/NewsSection.jsx