From d0edc1a8a0a2b6e70baa4a954a138ba8c0ba84fe Mon Sep 17 00:00:00 2001 From: vickyadri29 Date: Sun, 18 Aug 2024 23:36:25 +0700 Subject: [PATCH 01/12] feat: create navbar --- public/assets/icons/ic_hmc-dark.svg | 5 + public/assets/icons/ic_hmc-light.svg | 5 + src/app/layout.tsx | 17 +++- src/app/page.tsx | 100 +------------------- src/components/common/navbar/Navbar.tsx | 23 +++++ src/components/common/navbar/NavbarList.tsx | 13 +++ src/components/common/navbar/constants.tsx | 12 +++ src/components/common/navbar/types.tsx | 4 + 8 files changed, 76 insertions(+), 103 deletions(-) create mode 100644 public/assets/icons/ic_hmc-dark.svg create mode 100644 public/assets/icons/ic_hmc-light.svg create mode 100644 src/components/common/navbar/Navbar.tsx create mode 100644 src/components/common/navbar/NavbarList.tsx create mode 100644 src/components/common/navbar/constants.tsx create mode 100644 src/components/common/navbar/types.tsx diff --git a/public/assets/icons/ic_hmc-dark.svg b/public/assets/icons/ic_hmc-dark.svg new file mode 100644 index 0000000..3d7b4b8 --- /dev/null +++ b/public/assets/icons/ic_hmc-dark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/icons/ic_hmc-light.svg b/public/assets/icons/ic_hmc-light.svg new file mode 100644 index 0000000..7bdbf05 --- /dev/null +++ b/public/assets/icons/ic_hmc-light.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3314e47..9328a8d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,12 +1,13 @@ import type { Metadata } from "next"; -import { Inter } from "next/font/google"; +import { Sora } from "next/font/google"; import "./globals.css"; +import Navbar from "@/components/common/navbar/Navbar"; -const inter = Inter({ subsets: ["latin"] }); +const sora = Sora({ subsets: ["latin"] }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Welcome to Hammercode!", + description: "Hammercode is a community based in Palu, Indonesia", }; export default function RootLayout({ @@ -16,7 +17,13 @@ export default function RootLayout({ }>) { return ( - {children} + + + + + +
{children}
+ ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 13616d1..fe0a3ed 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,103 +1,7 @@ -import Image from "next/image"; - export default function Home() { return ( -
-
-

- Get started by editing  - src/app/page.tsx -

-
- - By Vercel Logo - -
-
- -
- Next.js Logo -
- -
- -

- Docs{" "} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{" "} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{" "} - - -> - -

-

Explore starter templates for Next.js.

- - - -

- Deploy{" "} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
+
+

test

); } diff --git a/src/components/common/navbar/Navbar.tsx b/src/components/common/navbar/Navbar.tsx new file mode 100644 index 0000000..b47a5db --- /dev/null +++ b/src/components/common/navbar/Navbar.tsx @@ -0,0 +1,23 @@ +import Image from "next/image"; +import NavbarList from "./NavbarList"; +import { navbarLists } from "./constants"; + +const Navbar = () => { + return ( +
+
+
+ hammercode logo + + +
+
+
+ ); +}; + +export default Navbar; diff --git a/src/components/common/navbar/NavbarList.tsx b/src/components/common/navbar/NavbarList.tsx new file mode 100644 index 0000000..3920fc1 --- /dev/null +++ b/src/components/common/navbar/NavbarList.tsx @@ -0,0 +1,13 @@ +import Link from "next/link"; + +import { NavbarListType } from "./types"; + +const NavbarList = ({ title, link }: NavbarListType) => { + return ( + + {title} + + ); +}; + +export default NavbarList; diff --git a/src/components/common/navbar/constants.tsx b/src/components/common/navbar/constants.tsx new file mode 100644 index 0000000..dcc06d6 --- /dev/null +++ b/src/components/common/navbar/constants.tsx @@ -0,0 +1,12 @@ +import { NavbarListType } from "./types"; + +export const navbarLists: NavbarListType[] = [ + { + title: "About", + link: "/about", + }, + { + title: "Contact", + link: "/contact", + }, +]; diff --git a/src/components/common/navbar/types.tsx b/src/components/common/navbar/types.tsx new file mode 100644 index 0000000..1d9097d --- /dev/null +++ b/src/components/common/navbar/types.tsx @@ -0,0 +1,4 @@ +export type NavbarListType = { + title: string; + link: string; +}; From c5c8036fb82c8b2f9ea70885358f6f031d10a525 Mon Sep 17 00:00:00 2001 From: vickyadri29 Date: Sun, 18 Aug 2024 23:37:30 +0700 Subject: [PATCH 02/12] feat: create navbar --- src/components/common/navbar/Navbar.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/common/navbar/Navbar.tsx b/src/components/common/navbar/Navbar.tsx index b47a5db..8d6cc7f 100644 --- a/src/components/common/navbar/Navbar.tsx +++ b/src/components/common/navbar/Navbar.tsx @@ -1,4 +1,6 @@ +import Link from "next/link"; import Image from "next/image"; + import NavbarList from "./NavbarList"; import { navbarLists } from "./constants"; @@ -7,7 +9,9 @@ const Navbar = () => {
- hammercode logo + + hammercode logo +
- ); +import Home from "@/features/home"; + +export default function HomePage() { + return ; } diff --git a/src/features/home/components/HeroSection.tsx b/src/features/home/components/HeroSection.tsx new file mode 100644 index 0000000..3b1be1c --- /dev/null +++ b/src/features/home/components/HeroSection.tsx @@ -0,0 +1,37 @@ +import Image from "next/image"; +import { socialMedia } from "../constants"; + +const HeroSection = () => { + return ( +
+
+
+
+

+ Improve Your Skill by Talking High-Quality Classes with Us! +

+

Hammercode is a tech community based in Palu, Indonesia

+
+ + {/* Social Media */} +
+ {socialMedia.map(({ id, icon, is_gradient, colorOne, colorTwo }) => ( +
+ {icon} +
+ ))} +
+
+
+ +
+ hero-section +
+
+ ); +}; + +export default HeroSection; diff --git a/src/features/home/constants.tsx b/src/features/home/constants.tsx new file mode 100644 index 0000000..8bc785b --- /dev/null +++ b/src/features/home/constants.tsx @@ -0,0 +1,17 @@ +import { SocialMediaType } from "./types"; + +export const socialMedia: SocialMediaType[] = [ + { + id: 1, + icon: "/assets/icons/ic_discord.svg", + is_gradient: false, + colorOne: "#5865F2", + }, + { + id: 2, + icon: "/assets/icons/ic_instagram.svg", + is_gradient: true, + colorOne: "#9A34C1", + colorTwo: "#FF5746", + }, +]; diff --git a/src/features/home/index.tsx b/src/features/home/index.tsx new file mode 100644 index 0000000..185c96d --- /dev/null +++ b/src/features/home/index.tsx @@ -0,0 +1,11 @@ +import HeroSection from "./components/HeroSection"; + +const Home = () => { + return ( +
+ +
+ ); +}; + +export default Home; diff --git a/src/features/home/types.tsx b/src/features/home/types.tsx new file mode 100644 index 0000000..6ba9d01 --- /dev/null +++ b/src/features/home/types.tsx @@ -0,0 +1,7 @@ +export type SocialMediaType = { + id: number; + icon: string; + is_gradient: boolean; + colorOne: string; + colorTwo?: string; +}; diff --git a/tailwind.config.ts b/tailwind.config.ts index 34e1642..73ea8f3 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -27,6 +27,11 @@ const config = { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, + colors: { + primary: { + 500: "#0F3665", + }, + }, }, }, plugins: [require("tailwindcss-animate")], From 2c1cc2cb4a3acd7909e30078e78ab0aeb9605456 Mon Sep 17 00:00:00 2001 From: mpsalunggg Date: Mon, 19 Aug 2024 00:34:26 +0700 Subject: [PATCH 05/12] chore: icon image logo --- src/components/common/navbar/index.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/common/navbar/index.tsx b/src/components/common/navbar/index.tsx index 80f664b..d91fe92 100644 --- a/src/components/common/navbar/index.tsx +++ b/src/components/common/navbar/index.tsx @@ -1,24 +1,19 @@ import Link from "next/link"; -import Image from "next/image"; +// import Image from "next/image"; import NavbarList from "./NavbarList"; import { navbarLists } from "./constants"; import { ModeToggle } from "../modetoggle"; -import { useTheme } from "next-themes"; +// import { useTheme } from "next-themes"; const Navbar = () => { - const { theme } = useTheme(); + // const { theme } = useTheme(); return (
- hammercode logo +