Skip to content

Commit 351a04a

Browse files
vickyadriivickyadrii
committed
feat: create contact and footer components
1 parent d416c32 commit 351a04a

File tree

8 files changed

+110
-69
lines changed

8 files changed

+110
-69
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react";
2+
3+
const Footer = () => {
4+
const date = new Date();
5+
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>
9+
);
10+
};
11+
12+
export default Footer;

‎src/components/layout/wrapper/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
"use client";
22
import Navbar from "@/components/common/navbar";
33
import { ThemeProvider } from "../theme-provider";
4+
import Footer from "@/components/common/footer/Footer";
45

56
const Wrapper = ({ children }: { children: React.ReactNode }) => {
67
return (
78
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
89
<Navbar />
910
{children}
11+
<Footer />
1012
</ThemeProvider>
1113
);
1214
};

‎src/components/ui/carousel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ const CarouselBullets = () => {
199199
"h-2 rounded-full",
200200
selectedIndex === index ? "bg-tertiary dark:bg-slate-600 w-6" : "bg-gray-200 w-3"
201201
)}
202-
aria-label={`Slide ${index + 1}`}
202+
aria-label={`Slide ${index}`}
203203
/>
204204
))}
205205
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Link from "next/link";
55

66
const AboutSection = () => {
77
return (
8-
<div className="max-w-7xl mx-auto px-5 lg:py-40 py-10 space-y-8">
8+
<div className="max-w-7xl mx-auto px-5 lg:py-40 py-10">
99
<div className="flex lg:flex-row flex-col-reverse lg:gap-16 gap-10">
1010
<div className="basis-1/2 relative">
1111
<Image

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Button } from "@/components/ui/button";
2+
import { Send } from "lucide-react";
3+
import Link from "next/link";
4+
5+
const ContactSection = () => {
6+
return (
7+
<div className="max-w-7xl mx-auto px-5 py-10">
8+
<div className="flex flex-col items-center md:gap-8 gap-6">
9+
<div className="flex flex-col items-center gap-2">
10+
<h2 className="text-tertiary md:text-3xl text-2xl text-center font-bold">
11+
Punya pertanyaan atau ingin sekedar ngobrol? 😃
12+
</h2>
13+
<p className="max-w-3xl md:text-base text-center text-sm text-slate-500 dark:text-slate-400 md:leading-7">
14+
Kami dengan senang hati terhubung dengan kamu. Cukup klik tombol di bawah yaa!
15+
</p>
16+
</div>
17+
18+
<Button asChild variant="tertiary" className="flex items-center gap-2">
19+
<Link href="https://wa.me/6281355893352" target="_blank">
20+
Hubungi Kami <Send className="lg:w-6 w-5" />
21+
</Link>
22+
</Button>
23+
</div>
24+
25+
{/* {} */}
26+
</div>
27+
);
28+
};
29+
30+
export default ContactSection;

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

Lines changed: 38 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -6,48 +6,45 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
66
const ClassSection = () => {
77
return (
88
<div className="bg-sky-50 dark:bg-slate-900">
9-
<div className="max-w-7xl mx-auto px-5 md:py-14 py-10 my-10">
10-
<div className="space-y-6">
11-
<div className="flex flex-col items-center gap-4">
12-
<h2 className="text-tertiary md:text-3xl text-2xl font-bold">Kelas Hammercode 🔥</h2>
13-
<p className="max-w-3xl md:text-base text-center text-sm text-slate-500 dark:text-slate-400 md:leading-7">
14-
Hammercode tempat yang cocok untukmu yang ingin belajar tentang coding/pemograman dan software
15-
engineering.
16-
</p>
17-
</div>
18-
19-
<Carousel
20-
opts={{
21-
align: "start",
22-
loop: true,
23-
duration: 20,
24-
active: true,
25-
}}
26-
>
27-
<CarouselContent>
28-
{courseData.map((data) => (
29-
<CarouselItem
30-
key={data.id}
31-
className="flex justify-center items-center xl:basis-1/4 lg:basis-1/3 sm:basis-1/2"
32-
>
33-
<Card className="flex items-center gap-2 rounded-full w-full">
34-
<CardHeader className="p-2">
35-
<div className="p-5 md:w-20 w-20 md:h-20 h-20 bg-sky-50 dark:bg-slate-900 rounded-full shrink-0">
36-
<Image src={data.logo} alt={data.title} width={100} height={100} className="" />
37-
</div>
38-
</CardHeader>
39-
<CardContent className="p-0">
40-
<div className="space-y-1">
41-
<h3 className="text-tertiary md:text-xl text-lg font-semibold">{data.title}</h3>
42-
<p className="md:text-sm text-sm text-slate-500 dark:text-slate-400">{data.role}</p>
43-
</div>
44-
</CardContent>
45-
</Card>
46-
</CarouselItem>
47-
))}
48-
</CarouselContent>
49-
</Carousel>
9+
<div className="max-w-7xl mx-auto px-5 md:py-14 py-10 my-10 space-y-6">
10+
<div className="flex flex-col items-center gap-2">
11+
<h2 className="text-tertiary md:text-3xl text-2xl font-bold">Kelas Hammercode 🔥</h2>
12+
<p className="max-w-3xl md:text-base text-center text-sm text-slate-500 dark:text-slate-400 md:leading-7">
13+
Hammercode tempat yang cocok untukmu yang ingin belajar tentang coding/pemrograman dan software engineering.
14+
</p>
5015
</div>
16+
17+
<Carousel
18+
opts={{
19+
align: "start",
20+
loop: true,
21+
duration: 20,
22+
active: true,
23+
}}
24+
>
25+
<CarouselContent>
26+
{courseData.map((data) => (
27+
<CarouselItem
28+
key={data.id}
29+
className="flex justify-center items-center xl:basis-1/4 lg:basis-1/3 sm:basis-1/2"
30+
>
31+
<Card className="flex items-center gap-2 rounded-full w-full">
32+
<CardHeader className="p-2">
33+
<div className="p-5 md:w-20 w-20 md:h-20 h-20 bg-sky-50 dark:bg-slate-900 rounded-full shrink-0">
34+
<Image src={data.logo} alt={data.title} width={100} height={100} className="" />
35+
</div>
36+
</CardHeader>
37+
<CardContent className="p-0">
38+
<div className="space-y-1">
39+
<h3 className="text-tertiary md:text-xl text-lg font-semibold">{data.title}</h3>
40+
<p className="md:text-sm text-sm text-slate-500 dark:text-slate-400">{data.role}</p>
41+
</div>
42+
</CardContent>
43+
</Card>
44+
</CarouselItem>
45+
))}
46+
</CarouselContent>
47+
</Carousel>
5148
</div>
5249
</div>
5350
);

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

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,31 @@ const PartnerSection = () => {
77
const t = useTranslations("HomePage");
88
return (
99
<div className="bg-sky-50 dark:bg-slate-900">
10-
<div className="max-w-7xl mx-auto px-5 md:py-14 py-10 my-10">
11-
<div className="space-y-6">
12-
<div className="flex flex-col items-center space-y-2">
13-
<h2 className="text-tertiary md:text-3xl text-2xl font-bold">{t("section-partner.title")}</h2>
14-
<p className="md:text-base text-sm text-slate-500 dark:text-slate-400 md:text-center">
15-
{t("section-partner.description")}
16-
</p>
17-
</div>
10+
<div className="max-w-7xl mx-auto px-5 md:py-14 py-10 my-10 space-y-8">
11+
<div className="flex flex-col items-center gap-2">
12+
<h2 className="text-tertiary md:text-3xl text-2xl font-bold">{t("section-partner.title")}</h2>
13+
<p className="md:text-base text-sm text-slate-500 dark:text-slate-400 md:text-center">
14+
{t("section-partner.description")}
15+
</p>
16+
</div>
1817

19-
<div className="px-12 md:px-12">
20-
<Carousel
21-
opts={{
22-
align: "start",
23-
loop: true,
24-
}}
25-
>
26-
<CarouselContent>
27-
{partnersData.map(({ id, logo, alt }) => (
28-
<CarouselItem key={id} className="flex justify-center items-center sm:basis-1/4">
29-
<Image src={logo} alt={alt} width={174} height={44} className="object-cover" />
30-
</CarouselItem>
31-
))}
32-
</CarouselContent>
33-
<CarouselPrevious className="sm:hidden" />
34-
<CarouselNext className="sm:hidden" />
35-
</Carousel>
36-
</div>
18+
<div className="px-12 md:px-12">
19+
<Carousel
20+
opts={{
21+
align: "start",
22+
loop: true,
23+
}}
24+
>
25+
<CarouselContent>
26+
{partnersData.map(({ id, logo, alt }) => (
27+
<CarouselItem key={id} className="flex justify-center items-center sm:basis-1/4">
28+
<Image src={logo} alt={alt} width={174} height={44} className="object-cover" />
29+
</CarouselItem>
30+
))}
31+
</CarouselContent>
32+
<CarouselPrevious className="sm:hidden" />
33+
<CarouselNext className="sm:hidden" />
34+
</Carousel>
3735
</div>
3836
</div>
3937
</div>

‎src/features/home/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import AboutSection from "./components/AboutSection";
44
import ProgramSection from "./components/ProgramSection";
55
import CourseSection from "./components/CourseSection";
66
import TestimonialSection from "./components/TestimonialSection";
7+
import ContactSection from "./components/ContactSection";
78

89
const Home = () => {
910
return (
@@ -14,6 +15,7 @@ const Home = () => {
1415
<ProgramSection />
1516
<CourseSection />
1617
<TestimonialSection />
18+
<ContactSection />
1719
</div>
1820
);
1921
};

0 commit comments

Comments
 (0)