diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs index 1c5e4f3..8bb052d 100644 --- a/frontend/next.config.mjs +++ b/frontend/next.config.mjs @@ -2,13 +2,15 @@ const nextConfig = { reactStrictMode: true, images: { + minimumCacheTTL: 31536000, + deviceSizes: [640, 750, 828, 1080, 1200, 1920], remotePatterns: [ { protocol: "https", - hostname: "delicate-eggs-595f0e58b8.media.strapiapp.com" - } - ] - } + hostname: "delicate-eggs-595f0e58b8.media.strapiapp.com", + }, + ], + }, }; export default nextConfig; diff --git a/frontend/src/app/for-lawyers/components/Hero.tsx b/frontend/src/app/for-lawyers/components/Hero.tsx index de4efff..78af22d 100644 --- a/frontend/src/app/for-lawyers/components/Hero.tsx +++ b/frontend/src/app/for-lawyers/components/Hero.tsx @@ -40,7 +40,7 @@ const Hero: React.FC = async () => { src={background.url} alt="Hero Image Background" fill - priority + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 7ad4e63..1d79f5b 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -7,7 +7,9 @@ import Footer from "@/components/Footer"; import Navbar from "@/components/Navbar"; import { navbarQuery, NavbarQueryType } from "@/queries/navbar"; import "@/styles/globals.css"; +import { getHeroImgsProps } from "@/utils/getHeroImgsProps"; import { request } from "@/utils/graphQLClient"; +import { HeroImagesQueryType, herosImagesQuery } from "@/queries/heroImages"; const urbanist = Urbanist({ weight: ["400", "500"], @@ -20,9 +22,23 @@ export default async function RootLayout({ children: React.ReactNode; }) { const navbarData = await request(navbarQuery); + const herosImgs = await request(herosImagesQuery); + const props = getHeroImgsProps(herosImgs); return ( + + {props.map((prop) => ( + + ))} +
diff --git a/frontend/src/components/BrandAssets/Hero.tsx b/frontend/src/components/BrandAssets/Hero.tsx index 05b793a..43fb4dd 100644 --- a/frontend/src/components/BrandAssets/Hero.tsx +++ b/frontend/src/components/BrandAssets/Hero.tsx @@ -31,7 +31,7 @@ const Hero: React.FC = ({ heroData }) => { src={heroData.background.url} alt="Hero Image Background" fill - priority + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/Community/hero.tsx b/frontend/src/components/Community/hero.tsx index 99e02bc..f75d969 100644 --- a/frontend/src/components/Community/hero.tsx +++ b/frontend/src/components/Community/hero.tsx @@ -34,7 +34,7 @@ const Hero: React.FC = ({ heroData }) => { src={background.url} alt="Hero Image Background" fill - priority + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/Cooperative/hero.tsx b/frontend/src/components/Cooperative/hero.tsx index 0a90d6d..e61594d 100644 --- a/frontend/src/components/Cooperative/hero.tsx +++ b/frontend/src/components/Cooperative/hero.tsx @@ -42,7 +42,7 @@ const Hero: React.FC = ({ heroData }) => { src={background.url} alt="Hero Image Background" fill - priority + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/Earn/Hero.tsx b/frontend/src/components/Earn/Hero.tsx index 7203d8b..28fcf67 100644 --- a/frontend/src/components/Earn/Hero.tsx +++ b/frontend/src/components/Earn/Hero.tsx @@ -49,7 +49,7 @@ const Hero: React.FC = ({ heroData }) => { src={background.url} alt="Hero Image Background" fill - priority + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/ForBuilders/Hero.tsx b/frontend/src/components/ForBuilders/Hero.tsx index 91ed5d7..341b063 100644 --- a/frontend/src/components/ForBuilders/Hero.tsx +++ b/frontend/src/components/ForBuilders/Hero.tsx @@ -46,7 +46,7 @@ const Hero: React.FC = ({ heroData }) => { src={heroData.background.url} alt="Hero Image Background" fill - priority + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/PNKToken/Hero.tsx b/frontend/src/components/PNKToken/Hero.tsx index e4c165d..0db7e9a 100644 --- a/frontend/src/components/PNKToken/Hero.tsx +++ b/frontend/src/components/PNKToken/Hero.tsx @@ -35,7 +35,7 @@ const Hero: React.FC = ({ heroData }) => { src={background.url} alt="Hero Image Background" fill - priority + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/ResearchDevelopment/Hero.tsx b/frontend/src/components/ResearchDevelopment/Hero.tsx index dda1c4f..219e5d2 100644 --- a/frontend/src/components/ResearchDevelopment/Hero.tsx +++ b/frontend/src/components/ResearchDevelopment/Hero.tsx @@ -48,7 +48,7 @@ const Hero: React.FC = ({ heroData }) => { src={background.url} alt="Hero Image Background" fill - priority + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/queries/heroImages.ts b/frontend/src/queries/heroImages.ts new file mode 100644 index 0000000..5ad5e08 --- /dev/null +++ b/frontend/src/queries/heroImages.ts @@ -0,0 +1,68 @@ +import { gql } from "graphql-request"; + +export const herosImagesQuery = gql` + { + earnPageHero { + background { + name + url + } + } + forBuildersPageHero { + background { + name + url + } + } + forLawyersPageHero { + background { + name + url + } + } + communityPageHero { + background { + name + url + } + } + cooperativePageHero { + background { + name + url + } + } + rAndDPageHero { + background { + name + url + } + } + brandAssetsPageHero { + background { + name + url + } + } + pnkTokenPageHero { + background { + name + url + } + } + } +`; +type Hero = { + background: { name: string; url: string }; +}; + +export type HeroImagesQueryType = { + earnPageHero: Hero; + forBuildersPageHero: Hero; + forLawyersPageHero: Hero; + communityPageHero: Hero; + cooperativePageHero: Hero; + rAndDPageHero: Hero; + brandAssetsPageHero: Hero; + pnkTokenPageHero: Hero; +}; diff --git a/frontend/src/utils/getHeroImgsProps.ts b/frontend/src/utils/getHeroImgsProps.ts new file mode 100644 index 0000000..6c1cedd --- /dev/null +++ b/frontend/src/utils/getHeroImgsProps.ts @@ -0,0 +1,17 @@ +import { getImageProps } from "next/image"; + +import { HeroImagesQueryType } from "@/queries/heroImages"; + +export const getHeroImgsProps = (data: HeroImagesQueryType) => { + type Keys = keyof HeroImagesQueryType; + const keys = Object.keys(data) as Keys[]; + return keys.map((key) => + getImageProps({ + // these should match the props we will define for Background Image in Heros.tsx + src: data[key].background.url, + alt: data[key].background.name, + fill: true, + unoptimized: true, + }), + ); +};