diff --git a/apps/landing/public/logo.png b/apps/landing/public/logo.png new file mode 100644 index 0000000..d6e435e Binary files /dev/null and b/apps/landing/public/logo.png differ diff --git a/apps/landing/src/app/_components/header.tsx b/apps/landing/src/app/_components/header.tsx new file mode 100644 index 0000000..a47520c --- /dev/null +++ b/apps/landing/src/app/_components/header.tsx @@ -0,0 +1,143 @@ +'use client'; + +import { + Button, + MenuIcon, + XIcon, +} from '@imphnen-frontend-service/shadcn-ui/atoms'; +import { cn } from '@imphnen-frontend-service/utils'; +import Image from 'next/image'; +import Link from 'next/link'; +import { useEffect, useState } from 'react'; + +export function Header() { + const [isScrolled, setIsScrolled] = useState(false); + const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + + useEffect(() => { + const handleScroll = () => { + setIsScrolled(window.scrollY > 10); + }; + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + return ( +
+
+
+
+ IMPHNEN Logo +
+
+ + {/* Desktop Navigation */} + + +
+ + + {/* Mobile Menu Button */} + +
+
+ + {/* Mobile Menu */} + {mobileMenuOpen && ( +
+ +
+ )} +
+ ); +} diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx index ff826d2..7fadcce 100644 --- a/apps/landing/src/app/layout.tsx +++ b/apps/landing/src/app/layout.tsx @@ -1,8 +1,12 @@ import { type Metadata } from 'next'; +import { Inter } from 'next/font/google'; import '../styles/globals.css'; +const inter = Inter({ subsets: ['latin'] }); + export const metadata: Metadata = { - title: 'IMPHNEN', + title: 'IMPHNEN - Ingin Menjadi Programmer Handal?', + description: 'Komunitas belajar programming untuk semua level', }; export default function RootLayout({ @@ -12,7 +16,7 @@ export default function RootLayout({ }) { return ( - {children} + {children} ); } diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx index aa95f7d..b52b60a 100644 --- a/apps/landing/src/app/page.tsx +++ b/apps/landing/src/app/page.tsx @@ -1,10 +1,10 @@ -import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms'; +import { Header } from './_components/header'; export default function Page() { return ( - <> -

Hello World

- - +
+
+
+
); } diff --git a/libs/shadcn-ui/package-lock.json b/libs/shadcn-ui/package-lock.json index 0b3a15d..652dc97 100644 --- a/libs/shadcn-ui/package-lock.json +++ b/libs/shadcn-ui/package-lock.json @@ -13,6 +13,7 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.503.0", + "react-icons": "^5.5.0", "tailwind-merge": "^3.2.0", "tailwindcss": "^4.1.4" }, @@ -1463,6 +1464,15 @@ "node": ">=0.10.0" } }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/rollup": { "version": "4.40.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.0.tgz", diff --git a/libs/shadcn-ui/package.json b/libs/shadcn-ui/package.json index 83b216e..374ee3c 100644 --- a/libs/shadcn-ui/package.json +++ b/libs/shadcn-ui/package.json @@ -15,6 +15,7 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.503.0", + "react-icons": "^5.5.0", "tailwind-merge": "^3.2.0", "tailwindcss": "^4.1.4" }, diff --git a/libs/shadcn-ui/src/atoms/icons.tsx b/libs/shadcn-ui/src/atoms/icons.tsx new file mode 100644 index 0000000..f0ec41e --- /dev/null +++ b/libs/shadcn-ui/src/atoms/icons.tsx @@ -0,0 +1,3 @@ +import { LuMenu as MenuIcon, LuX as XIcon } from 'react-icons/lu'; + +export { MenuIcon, XIcon }; diff --git a/libs/shadcn-ui/src/atoms/index.ts b/libs/shadcn-ui/src/atoms/index.ts index eaf5eea..e54f955 100644 --- a/libs/shadcn-ui/src/atoms/index.ts +++ b/libs/shadcn-ui/src/atoms/index.ts @@ -1 +1,2 @@ export * from './button'; +export * from './icons'; diff --git a/libs/shadcn-ui/src/index.css b/libs/shadcn-ui/src/index.css index 46342b3..d3e908b 100644 --- a/libs/shadcn-ui/src/index.css +++ b/libs/shadcn-ui/src/index.css @@ -42,15 +42,15 @@ } :root { - --radius: 0.625rem; + --radius: 1rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); - --primary: oklch(0.21 0.006 285.885); - --primary-foreground: oklch(0.985 0 0); + --primary: oklch(0.623 0.214 259.815); + --primary-foreground: oklch(0.97 0.014 254.604); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); @@ -60,7 +60,7 @@ --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); - --ring: oklch(0.705 0.015 286.067); + --ring: oklch(0.623 0.214 259.815); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); @@ -68,12 +68,12 @@ --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); - --sidebar-primary: oklch(0.21 0.006 285.885); - --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.623 0.214 259.815); + --sidebar-primary-foreground: oklch(0.97 0.014 254.604); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); - --sidebar-ring: oklch(0.705 0.015 286.067); + --sidebar-ring: oklch(0.623 0.214 259.815); } .dark { @@ -83,8 +83,8 @@ --card-foreground: oklch(0.985 0 0); --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.92 0.004 286.32); - --primary-foreground: oklch(0.21 0.006 285.885); + --primary: oklch(0.546 0.245 262.881); + --primary-foreground: oklch(0.379 0.146 265.522); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); @@ -94,7 +94,7 @@ --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); - --ring: oklch(0.552 0.016 285.938); + --ring: oklch(0.488 0.243 264.376); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); @@ -102,12 +102,12 @@ --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.546 0.245 262.881); + --sidebar-primary-foreground: oklch(0.379 0.146 265.522); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.552 0.016 285.938); + --sidebar-ring: oklch(0.488 0.243 264.376); } @layer base { @@ -118,3 +118,17 @@ @apply bg-background text-foreground; } } + +/* https://github.com/tailwindlabs/tailwindcss/issues/13129 */ +.container { + margin-left: auto; + margin-right: auto; + padding-left: 2rem; + padding-right: 2rem; + width: 100%; +} +@media (min-width: 1536px) { + .container { + max-width: 1400px; + } +}