crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-17 06:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add new font for about and news pages

Browse Source
This commit is contained in:
Daniele Pancottini 2023-02-10 14:52:14 +01:00
parent 87c0b21943
commit 06e16e3a4b
6 changed files with 97 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
site/components/common/About/AboutSlider.module.css Normal file
View File

@ -0,0 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
.aboutSliderText {
font-family: 'Dancing Script', cursive;
}

6
site/components/common/About/AboutSlider.tsx
View File

@ -8,6 +8,7 @@ import {
Text, Text,
Container, Container,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import style from "./AboutSlider.module.css"
// Here we have used react-icons package for the icons // Here we have used react-icons package for the icons
import { BiLeftArrowAlt, BiRightArrowAlt } from 'react-icons/bi' import { BiLeftArrowAlt, BiRightArrowAlt } from 'react-icons/bi'
// And react-slick as our Carousel Lib // And react-slick as our Carousel Lib
@ -110,9 +111,10 @@ export default function AboutSlider() {
{card.title} {card.title}
</Heading> </Heading>
<Text <Text
as={'i'} as={"span"}
fontSize={{ base: 'md', lg: 'lg' }} fontSize={{ base: 'lg', lg: 'xl' }}
color="GrayText" color="GrayText"
className={style.aboutSliderText}
> >
{card.text.split('<br/>').map((str, index) => ( {card.text.split('<br/>').map((str, index) => (
<p key={index}>{str}</p> <p key={index}>{str}</p>

6
site/components/common/News/NewsSlider.module.css Normal file
View File

@ -0,0 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
.newsSliderText {
font-family: 'Dancing Script', cursive;
}

6
site/components/common/News/NewsSlider.tsx
View File

@ -8,6 +8,7 @@ import {
Text, Text,
Container, Container,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import style from "./NewsSlider.module.css"
// Here we have used react-icons package for the icons // Here we have used react-icons package for the icons
import { BiLeftArrowAlt, BiRightArrowAlt } from 'react-icons/bi' import { BiLeftArrowAlt, BiRightArrowAlt } from 'react-icons/bi'
// And react-slick as our Carousel Lib // And react-slick as our Carousel Lib
@ -110,9 +111,10 @@ export default function NewsSlider() {
{card.title} {card.title}
</Heading> </Heading>
<Text <Text
as={'i'} as={'span'}
fontSize={{ base: 'md', lg: 'lg' }} fontSize={{ base: 'xl', lg: '2xl' }}
color="GrayText" color="GrayText"
className={style.newsSliderText}
> >
{card.text.split('<br/>').map((str, index) => ( {card.text.split('<br/>').map((str, index) => (
<p className='mb-5' key={index}>{str}</p> <p className='mb-5' key={index}>{str}</p>

3
site/pages/about.tsx
View File

@ -1,11 +1,10 @@
import { Layout } from '@components/common' import { Layout } from '@components/common'
import AboutSlider from '@components/common/About/AboutSlider' import AboutSlider from '@components/common/About/AboutSlider'
import MessageMap from '@components/common/About/TestimonialCard'
export default function About() { export default function About() {
return ( return (
<> <>
<div className="mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit"> <div style={{backgroundColor: "rgba(240, 226, 123, 0.9)"}} className={"mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit"}>
<AboutSlider></AboutSlider> <AboutSlider></AboutSlider>
</div> </div>
</> </>

2
site/pages/news.tsx
View File

@ -3,7 +3,7 @@ import NewsSlider from '@components/common/News/NewsSlider'
export default function News() { export default function News() {
return ( return (
<div className="mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit"> <div style={{backgroundColor: "rgba(240, 226, 123, 0.9)"}} className="mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
<NewsSlider></NewsSlider> <NewsSlider></NewsSlider>
</div> </div>
) )