102 lines
3.4 KiB
TypeScript
102 lines
3.4 KiB
TypeScript
|
// SECTION: WHATSNEW
|
||
|
|
|
||
|
|
import { createClient } from '@sanity/client'
|
||
|
|
import axios from 'axios'
|
||
|
|
import { projectId } from 'lib/sanity.api'
|
||
|
|
import Image from 'next/image'
|
||
|
|
import Link from 'next/link'
|
||
|
|
import React, { Children, useEffect, useState } from 'react'
|
||
|
|
import Tippy from '@tippyjs/react'
|
||
|
|
import Container from 'components/BlogContainer'
|
||
|
|
|
||
|
|
// import { Carousel, Typography, Button } from '@material-tailwind/react'
|
||
|
|
import { Fade, Slide } from 'react-awesome-reveal'
|
||
|
|
|
||
|
|
//import { getImageLink } from '../../lib/wordpress.image'
|
||
|
|
|
||
|
|
import WhatsNewMediaCorner from 'components/Sections/WhatsNewMediaCorner'
|
||
|
|
import WhatsNewMonthlyUpdate from 'components/Sections/WhatsNewMonthlyUpdate'
|
||
|
|
import WhatsNewMonthlyUpdate2 from 'components/Sections/WhatsNewMonthlyUpdate2'
|
||
|
|
import WhatsNewBanner from 'components/Sections/WhatsnewSectionBanner'
|
||
|
|
|
||
|
|
const client = projectId
|
||
|
|
? createClient({
|
||
|
|
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
|
||
|
|
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
|
||
|
|
apiVersion: process.env.NEXT_PUBLIC_SANITY_API_VERSION,
|
||
|
|
useCdn: true,
|
||
|
|
token: process.env.SANITY_API_READ_TOKEN,
|
||
|
|
})
|
||
|
|
: null
|
||
|
|
|
||
|
|
const WhatsNewSection = () => {
|
||
|
|
return (
|
||
|
|
<Container>
|
||
|
|
<div className="">
|
||
|
|
<div className="mb-2 grid grid-cols-3 gap-0 pt-5">
|
||
|
|
<div className="col-span-3 sm:col-span-2">
|
||
|
|
<Fade
|
||
|
|
direction={'up'}
|
||
|
|
duration={1200}
|
||
|
|
fraction={1}
|
||
|
|
delay={300}
|
||
|
|
triggerOnce
|
||
|
|
>
|
||
|
|
<h2 className="mb-0 text-center font-serif text-3xl font-semibold leading-none text-yellow-500 sm:text-left sm:text-3xl">
|
||
|
|
What’s New in GWK
|
||
|
|
</h2>
|
||
|
|
</Fade>
|
||
|
|
<Fade duration={3000} fraction={0} delay={1200} triggerOnce>
|
||
|
|
<p className="text-stone-700 text-center text-4xl font-bold tracking-tight sm:text-left sm:text-6xl">
|
||
|
|
This Month
|
||
|
|
</p>
|
||
|
|
</Fade>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* col 1 */}
|
||
|
|
<div className="grid grid-cols-1 gap-0 sm:grid-cols-3">
|
||
|
|
<div className="bg-stone-500 col-auto sm:col-span-2">
|
||
|
|
<Fade duration={2400} fraction={0} delay={300} triggerOnce>
|
||
|
|
<WhatsNewMediaCorner />
|
||
|
|
</Fade>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* col 2 // Banner */}
|
||
|
|
<Fade duration={2400} fraction={0} delay={300} triggerOnce>
|
||
|
|
<div
|
||
|
|
className="bg-slate-0 aspect-square h-48 w-full align-top sm:aspect-auto sm:h-full"
|
||
|
|
style={{
|
||
|
|
backgroundImage:
|
||
|
|
"url('/images/2d0255c0d035d62a70edb7f7275256bc9db9b73f-1920x1080.jpg')",
|
||
|
|
backgroundSize: 'cover',
|
||
|
|
backgroundPosition: 'center',
|
||
|
|
}}
|
||
|
|
></div>
|
||
|
|
</Fade>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid gap-0 p-0 sm:grid-cols-3">
|
||
|
|
<div className="w-full bg-stone-50 p-5 duration-300 sm:p-10">
|
||
|
|
<Fade duration={1200} fraction={0} delay={0} triggerOnce cascade>
|
||
|
|
<WhatsNewMonthlyUpdate />
|
||
|
|
</Fade>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-slate-100 w-full">
|
||
|
|
<WhatsNewBanner />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="w-full bg-stone-100 p-5 duration-300 ease-in-out hover:bg-white sm:p-10">
|
||
|
|
<Fade duration={1200} fraction={0} delay={0} triggerOnce cascade>
|
||
|
|
<WhatsNewMonthlyUpdate2 />
|
||
|
|
</Fade>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Container>
|
||
|
|
)
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
export default WhatsNewSection
|