Skip to content

Commit 7bd5835

Browse files
vickyadriivickyadrii
committed
feat: adjust the footer
1 parent 351a04a commit 7bd5835

File tree

6 files changed

+176
-11
lines changed

6 files changed

+176
-11
lines changed

‎public/assets/icons/ic_hmc-full-dark.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎public/assets/icons/ic_hmc-full.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎src/components/common/footer/Footer.tsx‎

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,74 @@
11
import React from "react";
2+
import { dataFooter } from "./constants";
3+
import Link from "next/link";
4+
import Image from "next/image";
5+
import { Button } from "@/components/ui/button";
26

37
const Footer = () => {
48
const date = new Date();
9+
const { resource, social_media, contact } = dataFooter;
510
return (
6-
<footer className="bg-slate-950 dark:bg-slate-950 p-8">
7-
<p className="text-center text-white">{date.getFullYear()} © Penggiat Teknologi Palu Berkarya</p>
8-
</footer>
11+
<>
12+
<div className="space-y-8 border-t border-dashed">
13+
<div className="max-w-7xl mx-auto px-5 py-10">
14+
<div className="flex justify-between items-start gap-10">
15+
<Image src="/assets/icons/ic_hmc-full.svg" alt="hammercode-logo" width={100} height={100} />
16+
17+
{/* Resources */}
18+
<div className="space-y-3">
19+
<h3 className="text-lg text-hmc-primary font-semibold">{resource.title}</h3>
20+
<div className="flex flex-col gap-1">
21+
{resource.data.map((data) => (
22+
<Link
23+
key={data.navigate_url}
24+
href={data.navigate_url}
25+
className="md:text-sm text-xs text-slate-600 dark:text-slate-400 hover:opacity-80 hover:underline"
26+
>
27+
{data.name}
28+
</Link>
29+
))}
30+
</div>
31+
</div>
32+
33+
{/* Social Media */}
34+
<div className="space-y-3">
35+
<h3 className="text-lg text-hmc-primary font-semibold">{social_media.title}</h3>
36+
<div className="flex flex-col gap-1">
37+
{social_media.data.map((data) => (
38+
<Link
39+
key={data.navigate_url}
40+
href={data.navigate_url}
41+
className="md:text-sm text-xs text-slate-600 dark:text-slate-400 hover:opacity-80 hover:underline"
42+
>
43+
{data.name}
44+
</Link>
45+
))}
46+
</div>
47+
</div>
48+
49+
{/* Contact */}
50+
<div className="space-y-3">
51+
<h3 className="text-lg text-hmc-primary font-semibold">{contact.title}</h3>
52+
<div className="flex flex-col gap-1">
53+
{contact.data.map((data) => (
54+
<Button
55+
key={data.navigate_url}
56+
variant="link"
57+
asChild
58+
className="!h-auto !p-0 md:text-sm justify-start text-xs font-normal text-slate-600 dark:text-slate-400 hover:opacity-80"
59+
>
60+
{data.navigate_url ? <Link href={data.navigate_url}>{data.value}</Link> : <p>{data.value}</p>}
61+
</Button>
62+
))}
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
<footer className="bg-slate-950 dark:bg-slate-950 p-8">
69+
<p className="text-center text-white">{date.getFullYear()} © Penggiat Teknologi Palu Berkarya</p>
70+
</footer>
71+
</>
972
);
1073
};
1174

‎src/components/common/footer/constants.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { FooterType } from "./types";
2+
3+
export const dataFooter: FooterType = {
4+
resource: {
5+
title: "Resources",
6+
data: [
7+
{
8+
name: "Home",
9+
navigate_url: "/",
10+
},
11+
{
12+
name: "About Us",
13+
navigate_url: "/about",
14+
},
15+
],
16+
},
17+
social_media: {
18+
title: "Let's Join",
19+
data: [
20+
{
21+
name: "Discord",
22+
navigate_url: "https://discord.com/invite/M9mNK6MBbu",
23+
},
24+
{
25+
name: "Instagram",
26+
navigate_url: "https://instagram.com/hmrcode",
27+
},
28+
{
29+
name: "Linkedin",
30+
navigate_url: "https://www.linkedin.com/company/hammercode",
31+
},
32+
{
33+
name: "Github",
34+
navigate_url: "https://github.com/hammer-code",
35+
},
36+
],
37+
},
38+
contact: {
39+
title: "Contact",
40+
data: [
41+
{
42+
value: "6281355893352",
43+
navigate_url: "https://wa.me/6281355893352",
44+
},
45+
{
46+
value: "[email protected]",
47+
navigate_url: "[email protected]",
48+
},
49+
{
50+
value: "Jl. Lagarutu No. 28, Tanamodindi, Palu",
51+
navigate_url: undefined,
52+
},
53+
],
54+
},
55+
};

‎src/components/common/footer/types.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
type Resource = {
2+
name: string;
3+
navigate_url: string;
4+
};
5+
6+
type Contact = {
7+
value: string;
8+
navigate_url?: string;
9+
};
10+
11+
export type FooterType = {
12+
resource: {
13+
title: string;
14+
data: Resource[];
15+
};
16+
social_media: {
17+
title: string;
18+
data: Resource[];
19+
};
20+
contact: {
21+
title: string;
22+
data: Contact[];
23+
};
24+
};

‎src/features/home/components/TestimonialSection.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,7 @@ const TestimonialSection = () => {
1414
</p>
1515
</div>
1616

17-
<Carousel
18-
opts={{
19-
align: "start",
20-
slidesToScroll: 1,
21-
}}
22-
className="w-full"
23-
isDots={true}
24-
>
17+
<Carousel className="w-full" isDots={true}>
2518
<CarouselContent className="space-x-4 sm:pr-4">
2619
{testimonialData.map((data) => (
2720
<CarouselItem key={data.id} className="md:basis-1/2 basis-[100%]">

0 commit comments

Comments
 (0)