diff --git a/components/carousel/EmblaCarousel.jsx b/components/carousel/EmblaCarousel.jsx index 92c2c8d3..d0212ac3 100644 --- a/components/carousel/EmblaCarousel.jsx +++ b/components/carousel/EmblaCarousel.jsx @@ -137,6 +137,7 @@ const EmblaCarousel = (props) => { }} loader={gumletLoader} layout="fill" + key={item.original} objectFit="cover" priority={index == 0 ? true : false} fetchpriority={index == 0 ? "true" : "false"} @@ -147,7 +148,7 @@ const EmblaCarousel = (props) => { // data-src={current.original} alt={`Gallery Image ${index}`} sizes={"(max-width: 300px) 100vw, 600px"} - className='embla__slide__img cursor-pointer rounded-xl bg-white border border-gray-300/70' + className='embla__slide__img cursor-pointer rounded-xl border border-gray-300/50' /> diff --git a/components/toolbox/HeroCard.js b/components/toolbox/HeroCard.js new file mode 100644 index 00000000..0e63cfe1 --- /dev/null +++ b/components/toolbox/HeroCard.js @@ -0,0 +1,143 @@ +import Image from "next/image"; +import gumletLoader from "@/components/new-index/gumletLoader"; +import Link from "next/link"; +import Button from "@/components/Primitives/Button" +const HeroCard = ({logo, post, tags, featuredImage}) =>{ + return( +
+ +
+
+ {/*
*/} +
+
+
+
+
+
+ Brand logo for external website's link +
+
+

+ {post?.attributes?.title} +

+ {post?.attributes?.excerpt ? ( +

+ {post?.attributes?.excerpt} +

+ ) : null} +
+ +
+
+
+
+ +
+
+ + + +
+
+ Is this your tool?{" "} + + Claim this page + + . +
+
+
+ {/* hide on mobile */} + +
+
+
+
+ {tags.map((tag, i) => { + if (i < 4) { + return ( + + + + ); + } + })} +
+
+
+
+ ) +} + +export default HeroCard; \ No newline at end of file diff --git a/components/toolbox/HeroCardSection.js b/components/toolbox/HeroCardSection.js new file mode 100644 index 00000000..df6cb6b7 --- /dev/null +++ b/components/toolbox/HeroCardSection.js @@ -0,0 +1,149 @@ +import Image from "next/image"; +import gumletLoader from "@/components/new-index/gumletLoader"; +import Link from "next/link"; +import Button from "@/components/Primitives/Button" + +/** + * HeroCardSection + * this one is rounded at the top only + * so it connects with the next card + * + * also has no border/shadow and no button + * @param {*} param0 + * @returns + */ +const HeroCardSection = ({logo, post, tags, featuredImage}) =>{ + return( +
+ +
+
+ {/*
*/} +
+
+
+
+
+
+ Brand logo for external website's link +
+
+

+ {post?.attributes?.title} +

+ {post?.attributes?.excerpt ? ( +

+ {post?.attributes?.excerpt} +

+ ) : null} +
+ +
+
+
+
+ +
+
+ + + +
+ Is it yours?{" "} + + Claim page + + . +
+
+ {/* hide on mobile */} + +
+
+ +
+
+ {tags.map((tag, i) => { + if (i < 4) { + return ( + + + + ); + } + })} +
+
+
+
+ ) +} + +export default HeroCardSection; \ No newline at end of file diff --git a/pages/toolbox/[slug].js b/pages/toolbox/[slug].js index 7765681a..c5e8d92a 100644 --- a/pages/toolbox/[slug].js +++ b/pages/toolbox/[slug].js @@ -1,15 +1,13 @@ import { useRouter } from "next/router"; import dynamic from "next/dynamic"; import { useEffect } from "react"; - -import Image from "next/image"; - +import Button from "@/components/Primitives/Button"; +import Link from "next/link"; import ErrorPage from "next/error"; import Container from "@/components/container"; import Layout from "@/components/new-index/layoutForIndex"; // import stc from "string-to-color"; // import { ToolBoxDisplay } from "../../components/toolbox/ToolboxGrid"; -import gumletLoader from "@/components/new-index/gumletLoader"; import useUser from "@/lib/iron-session/useUser"; // import { SealQuestion } from "@phosphor-icons/react"; import { SocialShareVertical } from "@/components/SocialShare"; @@ -37,8 +35,7 @@ import NewsletterSection from "@/components/v4/section/NewsletterSection"; // import TwoColumnCards from "@/components/v4/layout/TwoColumnCardsB"; import PopularTagsSection from "@/components/v4/section/PopularTagsSection"; import SectionDivider from "@/components/v4/section/SectionDivider"; -import Link from "next/link"; -import Button from "@/components/Primitives/Button"; + import { TOTAL_STATIC_POSTS } from "@/lib/constants"; import ToolLargeCardRow from "@/components/v4/layout/ToolLargeCardRow"; import AuthorCard from "@/components/toolbox/AuthorCard"; @@ -51,6 +48,7 @@ import buildToolboxGallery, { } from "@/lib/utils/buildGallery"; import { formatAllTools } from "@/lib/utils/formatToolContent"; import ToolIconCard from "@/components/v4/card/ToolIconCard"; +import HeroCardSection from "@/components/toolbox/HeroCardSection"; const ToolContent = ({ post, @@ -98,161 +96,38 @@ const ToolContent = ({ return ( <>
-
-
- -
-
- {/*
*/} -
-
-
-
-
-
- Brand logo for external website's link -
-
-

- {post?.attributes?.title} -

- {post?.attributes?.excerpt ? ( -

- {post?.attributes?.excerpt} -

- ) : null} -
- -
-
-
-
- -
-
- - - -
-
- Is this your tool?{" "} - - Claim this page - - . -
-
-
- {/* hide on mobile */} - -
-
-
-
- {tags.map((tag, i) => { - if (i < 4) { - return ( - - - - ); - } - })} -
-
-
-
+
- + */} {/* Content under header */}
-
+
+
+ +
{gallery.length ? (
+
) : null}
@@ -286,7 +161,7 @@ const ToolContent = ({
-

+

Overview

@@ -327,8 +202,23 @@ const ToolContent = ({
+ {/* */} {post?.attributes?.author && ( -
+

) : null}

+ {/* + + */}
)}
-
-
-

- Get weekly handpicked tools -

-

- Join the 1000s who receive curated products from Graeme @ - Prototypr. -

-
- {/*
- -
*/} - - {/* */} -
- -
-
-
-
-
+

+ +
+
+
+

+ Get weekly handpicked tools +

+

+ Join the 1000s who receive curated products from Graeme @ + Prototypr. +

+
+ {/*
+ +
*/} + + {/* */} +
+ +
+
+
{/*
@@ -656,7 +555,7 @@ export async function getStaticProps({ params, preview = null, locale }) { export async function getStaticPaths() { // const allPosts = await getAllPostsWithSlug("tool", TOTAL_STATIC_POSTS); const allPosts = await getAllPostsWithSlug( - 'tool', + "tool", process.env.NODE_ENV || process.env.NEXT_PUBLIC_HOME_URL.indexOf("localhost") > -1 ? TOTAL_STATIC_POSTS