QC Kak Inno 28 Okt

QC Kak Ayu 28 Okt
QC Keano 28 Okt
This commit is contained in:
2025-10-30 15:51:12 +08:00
parent a6663bbcee
commit 0befe6a3f2
26 changed files with 974 additions and 515 deletions

View File

@@ -1,7 +1,7 @@
// Create a new component: components/EdukasiCard.tsx
'use client';
import { Box, Paper, Stack, Text, Tooltip } from '@mantine/core';
import { Box, Paper, Stack, Text } from '@mantine/core';
import { ReactNode } from 'react';
interface EdukasiCardProps {
@@ -31,7 +31,6 @@ export function EdukasiCard({ icon, title, description, color = '#1e88e5' }: Edu
<Box>
<Stack align="center" gap="xs" mb="md">
<Box style={{ color }}>{icon}</Box>
<Tooltip label={title} maw={250} multiline withArrow position="top">
<Text
fz={{ base: 'h5', md: 'h4' }}
fw={700}
@@ -47,7 +46,6 @@ export function EdukasiCard({ icon, title, description, color = '#1e88e5' }: Edu
}}
dangerouslySetInnerHTML={{ __html: title }}
/>
</Tooltip>
</Stack>
<Text
size="sm"

View File

@@ -62,7 +62,6 @@ export default function EdukasiLingkunganPage() {
</Text>
<Text
fz={{ base: 'md', md: 'lg' }}
c="dimmed"
maw={800}
mx="auto"
>
@@ -78,21 +77,21 @@ export default function EdukasiLingkunganPage() {
verticalSpacing={{ base: 'md', md: 'xl' }}
>
<EdukasiCard
icon={<IconLeaf size={32} />}
icon={<IconLeaf size={45} />}
title={tujuan.data?.judul || ''}
description={tujuan.data?.deskripsi || ''}
color={colors['blue-button']}
/>
<EdukasiCard
icon={<IconRecycle size={32} />}
icon={<IconRecycle size={45} />}
title={materi.data?.judul || ''}
description={materi.data?.deskripsi || ''}
color={colors['blue-button']}
/>
<EdukasiCard
icon={<IconPlant2 size={32} />}
icon={<IconPlant2 size={45} />}
title={contoh.data?.judul || ''}
description={contoh.data?.deskripsi || ''}
color={colors['blue-button']}

View File

@@ -44,13 +44,12 @@ function Page() {
<Box style={{ display: 'flex', height: '100%' }}>
<Paper
p="lg"
bg="linear-gradient(145deg, #DFE3E8FF 0%, #EFF1F4FF 100%)"
style={{
borderRadius: 16,
boxShadow: '0 0 20px rgba(28, 110, 164, 0.5)',
width: '100%',
display: 'flex',
flexDirection: 'column'
flexDirection: 'column',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
}}
>
<Stack gap="md" px={20} style={{ height: '100%' }}>
@@ -74,13 +73,12 @@ function Page() {
<Box style={{ display: 'flex', height: '100%' }}>
<Paper
p="lg"
bg="linear-gradient(145deg, #DFE3E8FF 0%, #EFF1F4FF 100%)"
style={{
borderRadius: 16,
boxShadow: '0 0 20px rgba(28, 110, 164, 0.5)',
width: '100%',
display: 'flex',
flexDirection: 'column'
flexDirection: 'column',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
}}
>
<Stack gap="md" px={20} style={{ height: '100%' }}>
@@ -105,13 +103,12 @@ function Page() {
<Box>
<Paper
p="lg"
bg="linear-gradient(145deg, #DFE3E8FF 0%, #EFF1F4FF 100%)"
style={{
borderRadius: 16,
boxShadow: '0 0 20px rgba(28, 110, 164, 0.5)',
width: '100%',
display: 'flex',
flexDirection: 'column'
flexDirection: 'column',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
}}
>
<Stack gap="md" px={20} style={{ height: '100%' }}>

View File

@@ -91,7 +91,7 @@ function Page() {
<Box style={{ alignContent: 'center', alignItems: 'center' }}>
{iconMap[v.icon] ? React.createElement(iconMap[v.icon]) : null}
</Box>
<Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>{v.name}</Text>
<Text fz={{ base: "lg", md: "xl" }} c={'black'}>{v.name}</Text>
</Flex>
</Paper>
</Box>