Merge branches 'refactor/landing-page' and 'feat/section-about' of github.com:hammer-code/hammercode-web into refactor/landing-page

Author: vickyadrii

src/app/[locale]/about/page.tsx

@@ -0,0 +1,6 @@
+import AboutPage from "@/features/about";
+
+const About = () => {
+  return <AboutPage />;
+};
+export default About;

src/components/common/navbar/index.tsx

@@ -16,7 +16,7 @@ const Navbar = () => {
             <div className="w-10 h-8 bg-[url('/assets/icons/ic_hmc-light.svg')] dark:bg-[url('/assets/icons/ic_hmc-dark.svg')] bg-cover bg-center"></div>
           </Link>
 
-          <nav className="flex items-center gap-4">
+          <nav className="flex items-center gap-7">
             {LINK.map(({ href, id }) => (
               <NavbarList key={id} href={href} title={t(`navbar.link-${id}`)} />
             ))}

src/components/layout/wrapper/index.tsx

@@ -5,7 +5,7 @@ import Footer from "@/components/common/footer/Footer";
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => {
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+    <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
       <Navbar />
       {children}
       <Footer />

src/features/about/constant.tsx

@@ -0,0 +1,22 @@
+import { CodeXml, Instagram, Laptop } from "lucide-react";
+
+export const PROGRAM = [
+  {
+    id: 1,
+    title: "Palu Developer Day",
+    desc: "Event Tahunan",
+    icon: <CodeXml />,
+  },
+  {
+    id: 2,
+    title: "Tech Talk",
+    desc: "Event Bulanan",
+    icon: <Laptop />,
+  },
+  {
+    id: 3,
+    title: "Live Tech",
+    desc: "Live Instagram",
+    icon: <Instagram />,
+  },
+];

src/features/about/index.tsx

@@ -0,0 +1,55 @@
+import { Card, CardContent } from "@/components/ui/card";
+import Image from "next/image";
+import { PROGRAM } from "./constant";
+
+const About = () => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+      <div className="md:col-span-3 space-y-4">
+        <div>
+          <h1 className="text-3xl font-bold mb-2 text-hmc-base-blue">About Hammercode</h1>
+          <p className="text-sm text-gray-500">Since 2017 - Now</p>
+        </div>
+        <p>
+          <span className="text-hmc-primary font-semibold underline">Hammercode</span> adalah sebuah komunitas teknologi
+          yang diinisiasi sebagai wadah berkumpulnya para pembelajar, programmer, web/mobile developer, dan pelaku
+          industri teknologi lainnya yang berada di kota Palu dan sekitarnya. Kegiatan-kegiatan yang Kami selenggarakan
+          berorientasi pada knowledge-transfer yang diharapkan dapat mempercepat pemerataan keterampilan di bidang
+          teknologi informasi serta mencetak talenta teknologi yang siap kerja. Hammercode tempat yang cocok untukmu
+          yang ingin belajar tentang coding/pemograman dan software engineering.
+        </p>
+        <Image
+          src="https://media.istockphoto.com/id/1410270664/photo/modern-style-office-with-exposed-concrete-floor-and-a-lot-of-plants.jpg?s=612x612&w=0&k=20&c=lBivR3vIWH4dnb6MUNkQtQsIisaUEnzl2f6Ozyr-Jis="
+          width={200}
+          height={100}
+          className="w-full h-30 rounded-md shadow-lg border"
+          alt="hmc"
+        />
+        <p>
+          Kebutuhan akan talenta teknologi berkualitas terus bertambah. Namun sayangnya gap skills yang dimiliki oleh
+          lulusan IT dari universitas dan kebutuhan industri masih cukup besar. Di pulau Jawa dan Sumatera, banyak
+          universitas universitas top-level serta ekosistem komunitas dan industri yang lebih maju di banding daerah
+          lain, khususnya Palu, Sulawesi Tengah.
+        </p>
+      </div>
+
+      <div className="md:col-span-1">
+        <Card className="p-4 space-y-4">
+          <h2 className="text-xl font-semibold text-hmc-primary">Our Program</h2>
+          {PROGRAM.map(({ id, title, desc, icon }) => (
+            <CardContent key={id} className="p-0 flex items-center gap-2">
+              <div>
+                <Card className="w-12 h-12 rounded-full flex items-center justify-center">{icon}</Card>
+              </div>
+              <div>
+                <h3 className="text-md font-semibold">{title}</h3>
+                <p className="text-sm text-gray-500">{desc}</p>
+              </div>
+            </CardContent>
+          ))}
+        </Card>
+      </div>
+    </div>
+  );
+};
+export default About;

src/features/events/index.tsx

@@ -8,11 +8,11 @@ const Events = () => {
   const t = useTranslations("EventsPage");
   return (
     <div>
-      <div className="w-full bg-slate-100 dark:bg-hmc-primary-foreground rounded-lg">
-        <div className="container p-4 h-32 flex flex-wrap gap-1 justify-between items-center">
+      <div className="w-full rounded-lg">
+        <div className="h-16 flex flex-wrap gap-1 justify-between items-center">
           <div className="">
-            <h1 className="text-hmc-primary text-xl sm:text-3xl font-semibold">{t("title")}</h1>
-            <p className="text-hmc-primary text-xs sm:text-base">{t("description")}</p>
+            <h1 className="text-hmc-base-blue text-xl sm:text-3xl font-semibold">{t("title")}</h1>
+            <p className="text-gray-500 text-xs sm:text-base">{t("description")}</p>
           </div>
           <div className="w-full sm:w-auto">
             <Select>

tailwind.config.ts

@@ -21,6 +21,12 @@ const config = {
     },
     extend: {
       colors: {
+        "hmc-base": {
+          blue: "#0AB6FF",
+          purple: "#5061FC",
+          darkblue: "#1F4C8F",
+          lightblue: "#00BFE9",
+        },
         "hmc-primary": {
           DEFAULT: "var(--hmc-primary)",
           foreground: "var(--hmc-primary-foreground)",