humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: fixing layout and css

This commit is contained in:
hanif salafi 2024-01-11 05:17:33 +07:00
parent 2d59536fc1
commit e898a2a1d4
8 changed files with 156 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@ -39,7 +39,7 @@ export default function RootLayout({
fontSans.variable fontSans.variable
)} )}
> >
<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}> <Providers themeProps={{ attribute: "class", defaultTheme: "light" }}>
<div className=" "> <div className=" ">
<Navbar /> <Navbar />
<main className=" w-screen pt-2 flex-grow"> <main className=" w-screen pt-2 flex-grow">

2
app/page.tsx
View File

@ -5,7 +5,7 @@ import VisiMisi from "@/components/landing/visi-misi";
export default function Home() { export default function Home() {
return ( return (
<div> <div className="w-full h-full">
<Banner /> <Banner />
<VisiMisi /> <VisiMisi />
<Headline /> <Headline />

37
components/landing/banner.tsx
View File

@ -11,41 +11,12 @@ export default function Banner() {
slidesToShow: 3, slidesToShow: 3,
slidesToScroll: 3 slidesToScroll: 3
}; };
``
return ( return (
<div> <div className='flex flex-wrap'>
<div className='relative h-screen'> <div className='h-auto max-w-full relative'>
<Image <img src="/banner2.png" width={'100%'} height={'100%'} />
src='/banner2.png'
alt='banner'
fill={true}
/>
</div> </div>
{/* <div className='space-y-3'>
<div className='flex h-[231px] gap-3'>
<div className='w-[45%]'>
1
</div>
<div className='w-[15%]'>2</div>
<div className='w-[15%]'>3</div>
<div className='w-[25%]'>4</div>
</div>
<div className='flex h-[231px] gap-3'>
<div className='w-[25%]'>1</div>
<div className='w-[15%]'>2</div>
<div className='w-[35%]'>3</div>
<div className='w-[25%]'>4</div>
</div>
<div className='flex h-[231px] gap-3'>
<div className='w-[24%]'>1</div>
<div className='w-[18%]'>2</div>
<div className='w-[33%]'>3</div>
<div className='w-[25%]'>4</div>
</div>
</div> */}
{/* <div className='mx-10'> */}
{/* </div> */}
</div> </div>
) )
} }

164
components/landing/visi-misi.tsx
View File

@ -1,19 +1,46 @@
import "slick-carousel/slick/slick.css"; 'use client'
import "slick-carousel/slick/slick-theme.css";
// import "slick-carousel/slick/slick.css";
// import "slick-carousel/slick/slick-theme.css";
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/free-mode";
import Slider from "react-slick";
import { Card, CardBody } from "@nextui-org/react";
import Image from "next/image"; import Image from "next/image";
const images = [
{
id: 1,
url: "/vm1.jpg",
title: "Image 1",
description: "Description of image 1"
},
{
id: 2,
url: "/vm2.jpg",
title: "Image 2",
description: "Description of image 2"
},
{
id: 3,
url: "/vm3.jpg",
title: "Image 3",
description: "Description of image 3"
}
];
export default function VisiMisi() { export default function VisiMisi() {
return ( return (
<div className='h-screen m-7'> <div className='flex flex-wrap lg:m-10 m-5'>
<div className='h-1/3 w-1/4 p-3 text-green-600'> <div className="flex-none lg:w-1/4 w-full">
<p className='text-3xl font-bold'>Visi & Misi</p> <div className='p-3 text-green-600'>
<p className='pt-3'>Setelah Perjalanan Panjang dari Aceh hingga Papua, lahirlah visi dengan semangat perubahan yang di impikan oleh jutaan rakyat: "Indonesia Makmur untuk Semua".</p> <p className='text-3xl font-bold'>Visi & Misi</p>
</div> <p className='pt-3'>Setelah Perjalanan Panjang dari Aceh hingga Papua, lahirlah visi dengan semangat perubahan yang di impikan oleh jutaan rakyat: "Indonesia Makmur untuk Semua".</p>
<div className='h-2/3 flex gap-3 '> </div>
<div className='w-1/4 my-auto'> <div>
<Image <Image
height={400} height={400}
width={400} width={400}
@ -21,37 +48,90 @@ export default function VisiMisi() {
alt='banner' alt='banner'
/> />
</div> </div>
<div className='w-3/4 flex gap-5 my-auto justify-center'> </div>
<Card className="h-[420px] w-[300px]"> <div className="lg:grow flex-none">
<CardBody> <div className="lg:w-full w-[92vw]">
<Image {/* <div className='ml-5 lg:mt-52 w-4/5 lg:w-full mt-10 flex gap-5 my-auto lg:justify-center justify-left overflow-x-scroll'>
alt="vm" <Card className="flex-none h-[420px] w-[300px]">
className="object-cover" <CardBody>
src="/vm1.jpg" <Image
fill={true} alt="vm"
/> className="object-cover"
</CardBody> src="/vm1.jpg"
</Card> fill={true}
<Card className="h-[420px] w-[300px]"> />
<CardBody> </CardBody>
<Image </Card>
alt="vm" <Card className="flex-none h-[420px] w-[300px]">
className="object-cover" <CardBody>
src="/vm2.jpg" <Image
fill={true} alt="vm"
/> className="object-cover"
</CardBody> src="/vm2.jpg"
</Card> fill={true}
<Card className="h-[420px] w-[300px]"> />
<CardBody> </CardBody>
<Image </Card>
alt="vm" <Card className="flex-none h-[420px] w-[300px]">
className="object-cover" <CardBody>
src="/vm3.jpg" <Image
fill={true} alt="vm"
/> className="object-cover"
</CardBody> src="/vm3.jpg"
</Card> fill={true}
/>
</CardBody>
</Card>
</div> */}
<div className="flex items-center justify-center mt-6 lg:mt-44">
<Swiper
breakpoints={{
450: {
slidesPerView: 1,
spaceBetween: 5,
},
700: {
slidesPerView: 2,
spaceBetween: 15,
},
900: {
slidesPerView: 3,
spaceBetween: 15,
},
}}
freeMode={true}
pagination={{
clickable: true,
}}
modules={[FreeMode, Pagination]}
className="max-w-[90%] w-4/5 lg:w-full ml-2 mr-2"
>
{images.map((item) => (
<SwiperSlide key={item.title}>
<div className="flex flex-col gap-6 mb-20 group relative shadow-lg text-white rounded-xl px-6 py-8 h-[300px] w-full lg:h-[400px] lg:w-[300px] overflow-hidden cursor-pointer">
{/* <div
className="absolute inset-0 bg-cover bg-center"
style={{ backgroundImage: `url(${item.url})` }}
/> */}
<Image
alt="vm"
className="object-cover"
src={item.url}
fill={true}
/>
<div className="absolute inset-0 bg-black opacity-10 group-hover:opacity-50" />
<div className="relative flex flex-col gap-3">
{/* <item.icon className="text-blue-600 group-hover:text-blue-400 w-[32px] h-[32px]" /> */}
<h1 className="text-xl lg:text-2xl">{item.title} </h1>
<p className="lg:text-[18px]">{item.description} </p>
{/* </div>
<RxArrowTopRight className="absolute bottom-5 left-5 w-[35px] h-[35px] text-white group-hover:text-blue-500 group-hover:rotate-45 duration-100" /> */}
</div>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
</div> </div>
</div> </div>
</div> </div>

10
components/navbar.tsx
View File

@ -47,7 +47,9 @@ export const Navbar = () => {
); );
return ( return (
<NextUINavbar maxWidth="xl" position="sticky"> <NextUINavbar maxWidth="xl" position="sticky" className={"px-8 py-3"} classNames={{
wrapper: "max-w-full",
}}>
<NavbarContent className="basis-1/5 sm:basis-full" justify="start"> <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
<NavbarBrand as="li" className="gap-3 max-w-fit"> <NavbarBrand as="li" className="gap-3 max-w-fit">
<NextLink className="flex justify-start items-center gap-1" href="/"> <NextLink className="flex justify-start items-center gap-1" href="/">
@ -61,7 +63,7 @@ export const Navbar = () => {
</NavbarBrand> </NavbarBrand>
</NavbarContent> </NavbarContent>
<NavbarContent> <NavbarContent>
<ul className="hidden lg:flex gap-4 justify-start ml-2"> <ul className="hidden lg:flex gap-3 justify-start ml-2">
{siteConfig.navItems.map((item) => ( {siteConfig.navItems.map((item) => (
<NavbarItem key={item.href}> <NavbarItem key={item.href}>
<NextLink <NextLink
@ -92,8 +94,8 @@ export const Navbar = () => {
</Link> </Link>
<Link isExternal href={siteConfig.links.github} aria-label="Github"> <Link isExternal href={siteConfig.links.github} aria-label="Github">
<GithubIcon className="text-default-500" /> <GithubIcon className="text-default-500" />
</Link> */} </Link>
<ThemeSwitch /> <ThemeSwitch /> */}
</NavbarItem> </NavbarItem>
{/* <NavbarItem className="hidden lg:flex">{searchInput}</NavbarItem> */} {/* <NavbarItem className="hidden lg:flex">{searchInput}</NavbarItem> */}
{/* <NavbarItem className="hidden md:flex"> {/* <NavbarItem className="hidden md:flex">

19
package-lock.json generated
View File

@ -42,6 +42,7 @@
"react-dropzone": "^14.2.3", "react-dropzone": "^14.2.3",
"react-slick": "^0.29.0", "react-slick": "^0.29.0",
"slick-carousel": "^1.8.1", "slick-carousel": "^1.8.1",
"swiper": "^11.0.5",
"tailwind-variants": "^0.1.18", "tailwind-variants": "^0.1.18",
"tailwindcss": "3.3.5", "tailwindcss": "3.3.5",
"typescript": "^5.0.4" "typescript": "^5.0.4"
@ -6421,6 +6422,24 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/swiper": {
"version": "11.0.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.5.tgz",
"integrity": "sha512-rhCwupqSyRnWrtNzWzemnBLMoyYuoDgGgspAm/8iBD3jCvAWycPLH4Z3TB0O5520DHLzMx94yUMH/B9Efpa48w==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/swiperjs"
},
{
"type": "open_collective",
"url": "http://opencollective.com/swiper"
}
],
"engines": {
"node": ">= 4.7.0"
}
},
"node_modules/tailwind-merge": { "node_modules/tailwind-merge": {
"version": "1.14.0", "version": "1.14.0",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz", "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",

1
package.json
View File

@ -43,6 +43,7 @@
"react-dropzone": "^14.2.3", "react-dropzone": "^14.2.3",
"react-slick": "^0.29.0", "react-slick": "^0.29.0",
"slick-carousel": "^1.8.1", "slick-carousel": "^1.8.1",
"swiper": "^11.0.5",
"tailwind-variants": "^0.1.18", "tailwind-variants": "^0.1.18",
"tailwindcss": "3.3.5", "tailwindcss": "3.3.5",
"typescript": "^5.0.4" "typescript": "^5.0.4"

3
tailwind.config.js
View File

@ -6,7 +6,8 @@ module.exports = {
'./pages/**/*.{js,ts,jsx,tsx,mdx}', './pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}' './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
"./node_modules/swiper/swiper-react.mjs",
], ],
theme: { theme: {
extend: {}, extend: {},