Skip to content

Commit

Permalink
WIP: Add cursive font variants to themeFonts and update Hero component
Browse files Browse the repository at this point in the history 
- Add 'heading' and 'body' cursive font variants to the themeFonts object in fonts.ts
- Update the Hero component in Hero.tsx to use the 'cursive' variant for the heading
- Create new files text.ts and heading.ts in the theme/components directory to define the 'cursive' variant for the Text and Heading components respectively
- Import and use the 'cursive' variant in the Text and Heading components in the Muffin section
  • Loading branch information
@kleberbaum
kleberbaum committed Jun 13, 2024
1 parent 26bd248 commit adb5cf4
Show file tree
Hide file tree
Showing 28 changed files with 1,105 additions and 49 deletions.
53 changes: 36 additions & 17 deletions src/components/navigation/AltTopNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
useColorModeValue,
Tooltip
} from '@chakra-ui/react';
import { FC, useState } from 'react';
import { FC, useState, useEffect } from 'react';
import { useContactModal } from '../../services/contact';
import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter';
import { FaGithub } from '@react-icons/all-files/fa/FaGithub';
Expand All @@ -39,13 +39,15 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
hamburgerIconProps = {
color: 'red.500'
};

const contactModal = useContactModal();
const handleOnContactClick = () => {
console.log('contactModal', contactModal);
contactModal.onOpen({
meta: {}
});
};

const { isOpen, onOpen, onClose } = useDisclosure();
const [hamburgerClass, setHamburgerClass] = useState('');

Expand All @@ -64,6 +66,21 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
else openDrawer();
};

// Handle window resize and close menu if window width is >= 768px (md breakpoint)
useEffect(() => {
const handleResize = () => {
if (window.innerWidth >= 768) {
closeDrawer();
}
};

window.addEventListener('resize', handleResize);

return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

return (
<Box
as={FadeIn}
Expand Down Expand Up @@ -120,7 +137,7 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
borderRight="1px"
borderLeft="0"
borderBottom="0"
borderColor={useColorModeValue('gray.900', 'gray.600')}
borderColor={useColorModeValue('brand.800', 'gray.600')}
transition="color 0.2s"
_hover={{
color: 'brand.500'
Expand All @@ -138,7 +155,7 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
borderBottom="0"
borderRight="0"
borderLeft={{ base: '1px', md: '0px' }}
borderColor={useColorModeValue('gray.900', 'gray.600')}
borderColor={useColorModeValue('brand.800', 'gray.600')}
transition="color 0.2s"
_hover={{
color: 'brand.500'
Expand All @@ -155,7 +172,8 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
borderStyle="solid"
borderRight="1px"
borderLeft="0"
borderColor={useColorModeValue('gray.900', 'gray.600')}
borderBottom="0"
borderColor={useColorModeValue('brand.800', 'gray.600')}
transition="color 0.2s"
_hover={{
color: 'brand.500'
Expand All @@ -169,10 +187,11 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
pl={{ base: '8', md: '16' }}
alignItems="center"
borderWidth="1px"
borderStyle="solid"
borderBottom="1px"
borderRight="0"
borderLeft={{ base: '1px', md: '0px' }}
borderStyle="solid"
borderColor={useColorModeValue('gray.900', 'gray.600')}
borderColor={useColorModeValue('brand.800', 'gray.600')}
transition="color 0.2s"
_hover={{
color: 'brand.500'
Expand All @@ -185,25 +204,25 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
pt={{ base: '8' }}
pl={{ base: '8', md: '16' }}
borderWidth="1px"
borderTop="0"
borderTop="1px"
borderBottom="0"
borderRight={{ base: '1px', md: '0px' }}
borderLeft="0"
borderStyle="solid"
borderColor={useColorModeValue('gray.900', 'gray.600')}
borderColor={{ base: 'transparent', md: useColorModeValue('brand.800', 'gray.600') }}
>
{/* Office information here */}
<Text color="white" fontWeight="bold" fontSize="lg" pb="4">
Im Herzen von Wien
Im Herzen von Klagenfurt
</Text>
<Text color="white" fontSize="md">
Hauptquartier
</Text>
<Text color="gray.400" fontSize="md">
Löwengasse 28
Sterneckstraße 23/20
</Text>
<Text color="gray.400" fontSize="md">
1030 Vienna, Austria
9020 Klagenfurt, Österreich
</Text>
</Box>
<Box
Expand All @@ -216,7 +235,7 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
borderRight="0"
borderLeft="0"
borderStyle="solid"
borderColor={useColorModeValue('gray.900', 'gray.600')}
borderColor={useColorModeValue('brand.800', 'gray.600')}
>
{/* Social media links here */}
<Text color="white" fontWeight="bold" fontSize="lg">
Expand Down Expand Up @@ -382,7 +401,7 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
// ...hamburgerIconProps,
//boxSize: '6',
//boxSize: '100%',
backgroundColor: 'brand.700'
backgroundColor: isOpen ? 'white' : 'brand.700'
}}
/>
}
Expand Down Expand Up @@ -478,17 +497,17 @@ const AltTopNav: FC<IAltTopNavProps> = ({ path, hamburgerIconProps }) => {
// ...hamburgerIconProps,
//boxSize: '6',
//boxSize: '100%',
backgroundColor: 'brand.700'
backgroundColor: isOpen ? 'white' : 'brand.700'
}}
/>
}
filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"
//filter="drop-shadow(1px 2px 2px rgb(0 0 0 / 0.1))"

//variant="ghost"
fontWeight={'bold'}
aria-label={isOpen ? 'Close menu' : 'Open menu'}
onClick={toggleMobileMenu}
//bg={'white'}
bg={'brand.900'}
color={'black'}
/>
</Flex>
Expand Down
62 changes: 38 additions & 24 deletions src/components/sections/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@ const Footer: FC = () => {
const links = [
[
{
label: 'Links',
label: 'Seiten',
isTitle: true
},
{
label: 'GitHub',
label: 'Startseite',
href: 'https://github.com/netsnek/'
},
// {
Expand All @@ -48,46 +48,58 @@ const Footer: FC = () => {
// href: 'https://t.me/kleberbaum'
// },
{
label: 'Facebook',
label: 'Meine Beratung',
href: 'https://facebook.com/netsnek/'
},
{
label: 'Instagram',
label: 'Rezepte',
href: 'https://instagram.com/netsnek/'
},
{
label: 'Impressum',
label: 'Blog',
href: '/imprint'
},
{
label: 'Kontakt',
href: '/imprint'
}
],
[
{
label: 'Partner',
label: 'Wichtige Links',
isTitle: true
},
{
label: 'Kanbon',
label: 'Liste essentieller Lebensmittel',
href: 'https://kanbon.at'
},
{
label: 'Neurons',
label: 'Glykämischer Index (GI)-Tabellegängiger Lebensmittel',
href: 'https://neurons.at'
}
],
[
{
label: 'Gestaltet von',
isTitle: true
},
{
label: 'Florian H. Kleber',
href: 'https://fhkit.at'
label: 'Ernährungspläne für spezielle Diäten',
href: 'https://neurons.at'
},
{
label: 'Nico Schett',
href: 'https://schett.net'
label: 'Saisonkalender Obst und Gemüse',
href: 'https://neurons.at'
}
]
],
// [
// {
// label: 'Gestaltet von',
// isTitle: true
// },
// {
// label: 'Florian H. Kleber',
// href: 'https://fhkit.at'
// },
// {
// label: 'Nico Schett',
// href: 'https://schett.net'
// }
// ]
]

const linkElmnts: ReactNode[] = []
Expand All @@ -100,15 +112,17 @@ const Footer: FC = () => {
return (
<Field.Text
key={i}
color="white"
name={'FooterLinkTitle' + link.label}
defaultValue={link.label}
fontWeight="500"
/>
)
}
return (
<Link key={i} href={link.href} variant="hover-theme" opacity={0.7}>
<Link key={i} href={link.href} ariant="hover-theme" opacity={0.7}>
<Field.Text
color="white"
name={'FooterLink' + link.label}
defaultValue={link.label}
/>
Expand All @@ -130,13 +144,13 @@ const Footer: FC = () => {
//mt="-25px"
px={{base: 5, lg: 0}}
overflowX="hidden"
bgColor="#0A0A0A"
bgColor="brand.900"
zIndex={0}>
<Container maxW="7xl" h="100%">
<Flex mt={20} color="white" wrap={{base: 'wrap', sm: 'nowrap'}}>
<Flex mt={20} wrap={{base: 'wrap', sm: 'nowrap'}}>
<Box>
<Flex alignItems={'center'}>
<Logo h="100px" />
<Logo color="white" h="100px" />
</Flex>
</Box>
<Spacer minW={{base: '5rem', lg: '25%'}} />
Expand Down Expand Up @@ -251,7 +265,7 @@ const Footer: FC = () => {
<Divider mt={8} opacity={0.2} />
<Field.Text
name="FooterBottomText"
defaultValue="Copyright © 2024 Netsnek, Florian Herbert Kleber IT & Werbeagentur Nico Schett. All rights reserved."
defaultValue="Copyright © 2024 Netsnek, Florian Herbert Kleber IT & Kanbon GmbH. All rights reserved."
mt={5}
color="white"
opacity={0.2}
Expand Down
1 change: 1 addition & 0 deletions src/components/sections/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ const Hero: FC = () => {
<VStack pt={`calc(${navOffset})`} as={FadeIn} spacing={4} align="left" gridArea="content">
<Heading
as="h3"
variant="cursive"
size={{ base: 'sm', lg: 'md' }}
style={{ animationDelay: '300ms' }}
fontWeight="500"
Expand Down
49 changes: 49 additions & 0 deletions src/components/sections/Muffin.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import {
Image,
Box,
Container,
Heading,
Text,
GridItem,
Grid
} from '@chakra-ui/react'
import { Field } from '@atsnek/jaen'

const Muffin = () => {
return (
<Container
as="section"
maxW="4xl"
borderRadius="2xl"
mb={{ base: '0', lg: '16' }}
position="relative"
overflow={{ base: 'hidden', lg: 'visible' }}
px={{ base: 5, lg: 0 }}
py={8}
zIndex={0}>
<Image
margin="0 auto"
mb="8"
src="images/svg/muffin.svg"
alt="muffin"
/>
<Field.Text
as={Heading}
variant="cursive"
mb="8"
size={{ base: 'sm', lg: 'md' }}
style={{ animationDelay: '300ms' }}
fontWeight="500"
//textTransform="uppercase"
lineHeight="1.5em"
//letterSpacing="4.2px"
textAlign="center"
name="MuffinSectionHeading1"
defaultValue="Gesunde Ernährung lässt sich nur nachhaltig beibehalten, wenn du dich damit wohl fühlst."
/>
</Container>
)
}

export default Muffin

Loading

0 comments on commit adb5cf4

Please sign in to comment.