feat: add playbook page (#127)

* feat: add playbook page

* feat: translate playbook page to ua

* fix: link in new tabs

* fix: missing import

* fix: update layout

* fix: text

* feat: add lightbox

* fix: playbook lightbox

* fix: headline

* fix: base url in pdf path

* fix: image bug

* feat: add playbook news slider card

* fix: mobile view

src/components/CarCard.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import CalendarIcon from "@assets/fa-calendar.svg?react";
-import TruckIcon from "@assets/fa-truck.svg?react";
-import CogIcon from "@assets/fa-cog.svg?react";
-import HammerIcon from "@assets/fa-hammer.svg?react";
-import ToolboxIcon from "@assets/fa-toolbox.svg?react";
-import ScrewdriverIcon from "@assets/fa-screwdriver.svg?react";
+import CalendarIcon from "@assets/icons/calendar.svg?react";
+import TruckIcon from "@assets/icons/truck.svg?react";
+import CogIcon from "@assets/icons/cog.svg?react";
+import HammerIcon from "@assets/icons/hammer.svg?react";
+import ToolboxIcon from "@assets/icons/toolbox.svg?react";
+import ScrewdriverIcon from "@assets/icons/screwdriver.svg?react";
 
 interface Props {
   className?: string;

src/components/HeadlineUnderlined.tsx

@@ -9,6 +9,7 @@ import Underline7Svg from "@assets/tolocar_underline_7.svg";
 import Underline8Svg from "@assets/tolocar_underline_8.svg";
 import Underline9Svg from "@assets/tolocar_underline_9.svg";
 import Underline10Svg from "@assets/tolocar_underline_10.svg";
+import Underline11Svg from "@assets/tolocar_underline_11.svg";
 import CircularUnderlineSvg from "@assets/tolocar_circular_underline.svg";
 
 interface Props {
@@ -36,6 +37,7 @@ const underlineSvgAndClassesMapping = [
   },
   { component: Underline9Svg, classes: "bottom-0" },
   { component: Underline10Svg, classes: "top-6 w-full" },
+  { component: Underline11Svg, classes: "top-10 w-full" },
 ];
 
 const HeadlineUnderlined: React.FC<Props> = ({

src/components/InfoItem.tsx

@@ -5,14 +5,20 @@ import LeafIcon from "@assets/icons/leaf.svg?react";
 import LightbulbOnIcon from "@assets/icons/lightbulb-on.svg?react";
 import MaximizeIcon from "@assets/icons/maximize.svg?react";
 import UsersIcon from "@assets/icons/users.svg?react";
+import TruckFastIcon from "@assets/icons/truck-fast.svg?react";
+import GearIcon from "@assets/icons/gear.svg?react";
+import ScrewdriverWrenchIcon from "@assets/icons/screwdriver-wrench.svg?react";
 
 type Icons =
   | "bullseye_arrow"
   | "feather"
   | "leaf"
   | "lightbulb"
   | "maximize"
-  | "users";
+  | "users"
+  | "truck"
+  | "gear"
+  | "screwdriver-wrench";
 
 interface Props {
   className?: string;
@@ -35,6 +41,9 @@ const InfoItem: React.FC<Props> = ({
       lightbulb: LightbulbOnIcon,
       maximize: MaximizeIcon,
       users: UsersIcon,
+      truck: TruckFastIcon,
+      gear: GearIcon,
+      "screwdriver-wrench": ScrewdriverWrenchIcon,
     };
 
     const IconComponent = iconMapping[icon as Icons] || (() => <></>);

src/components/Lightbox.astro

@@ -0,0 +1,28 @@
+---
+import CommonUtils from "@util/CommonUtils";
+
+const { image, alt, path } = Astro.props;
+
+const baseUrl = CommonUtils.getBaseUrl(false);
+---
+
+<div class="">
+  <a href={baseUrl + path + "#lightbox"} id={"nolightbox"} class="scroll-mt-20">
+    <img
+      src={image}
+      class="focus-visible:outline-none rounded-lg object-cover object-center"
+      {alt}
+    />
+  </a>
+  <a
+    href={baseUrl + path + "#nolightbox"}
+    class="hidden fixed z-50 inset-0 p-4 sm:p-24 bg-black/50 target:block items-center"
+    id={"lightbox"}
+  >
+    <img
+      src={image}
+      class="w-full h-full object-center object-contain"
+      {alt}
+    />
+  </a>
+</div>

src/components/LinkNewTab.astro

@@ -0,0 +1,4 @@
+---
+const { href, caption } = Astro.props;
+---
+<a href={href} target="_blank">{caption}</a>

src/components/NewsItem.tsx

@@ -1,69 +1,145 @@
 import React from "react";
 import ArrowIcon from "@assets/arrow.svg?react";
 import InstagramIcon from "@assets/instagram.svg?react";
+import { ConditionalWrapper } from "@components";
+
+type ItemType = "cta" | "instagram" | "fullImage";
 
 interface Props {
   href: string;
   image?: string;
-  isInstagram?: boolean;
-  green?: boolean;
   title?: string;
   description?: string;
+  type?: ItemType;
+  newTab?: boolean;
 }
 
 const NewsItem: React.FC<Props> = ({
   href,
   image,
-  isInstagram,
-  green,
   title,
   description,
-}) => (
-  <article className="block mr-3 -ml-5 pl-5 sm:-ml-8 sm:pl-8 sm:mr-6 lg:mr-8">
-    <div
-      className={`group relative flex flex-col h-full hover:-translate-y-4 duration-200 transition ${
-        green
-          ? "bg-tolo-green hover:bg-tolo-dark-green text-white bg-[position:bottom_-16px_left_-16px] bg-[url('/bulb-cog.svg')] hover:bg-[url('/bulb-cog-dark.svg')] bg-no-repeat"
-          : "bg-white text-black"
-      }`}
-    >
-      {href && (
-        <a
-          href={href}
-          {...(isInstagram
-            ? { target: "_blank", rel: "noopener nofollow noreferer" }
-            : {})}
-          className=""
-        >
-          {green ? (
-            <>
-              <h1 className="font-aktiv font-semibold px-5 pt-6 text-[2.5rem]/[1.1]">{title}</h1>
-              <ArrowIcon className="absolute bottom-4 right-4 z-10 text-white h-6 w-6" />
-            </>
-          ) : (
-            <div className={`pb-[100%] h-0 w-full relative overflow-hidden`}>
-              {isInstagram && (
-                <InstagramIcon className="absolute top-4 left-4 z-10 text-white h-6 w-6" />
-              )}
-              {image && (
-                <img
-                  src={image}
-                  loading="lazy"
-                  className="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform"
-                />
-              )}
-              <ArrowIcon className="absolute bottom-4 right-4 z-10 text-white h-6 w-6" />
-            </div>
+  type = "instagram",
+  newTab,
+}) => {
+  const containerClasses: Record<ItemType | "common", string> = {
+    common:
+      "group relative flex flex-col h-full hover:-translate-y-4 duration-200 transition",
+    cta: "bg-tolo-green hover:bg-tolo-dark-green text-white bg-[position:bottom_-16px_left_-16px] bg-[url('/bulb-cog.svg')] hover:bg-[url('/bulb-cog-dark.svg')] bg-no-repeat",
+    instagram: "bg-white text-black",
+    fullImage: "",
+  };
+
+  const contentComponent: Record<ItemType, React.ReactElement> = {
+    cta: <NewsItemContentCta title={title} description={description} />,
+    instagram: (
+      <NewsItemContentSocial image={image} description={description} />
+    ),
+    fullImage: <NewsItemFullImage fullImage={image} alt={description} />,
+  };
+
+  return (
+    <article className="block mr-3 -ml-5 pl-5 sm:-ml-8 sm:pl-8 sm:mr-6 lg:mr-8">
+      <div className={containerClasses.common + " " + containerClasses[type]}>
+        <ConditionalWrapper
+          condition={Boolean(href)}
+          wrapper={(children) => (
+            <a
+              href={href}
+              {...(newTab
+                ? { target: "_blank", rel: "noopener nofollow noreferer" }
+                : {})}
+              className=""
+            >
+              {children}
+            </a>
           )}
-          <div className={`px-5 py-6 grow`}>
-            <p className={`text-lg/6 ${green ? "" : "line-clamp-3"}`}>
-              {description}
-            </p>
-          </div>
-        </a>
-      )}
-    </div>
-  </article>
-);
+        >
+          <>{contentComponent[type]}</>
+        </ConditionalWrapper>
+      </div>
+    </article>
+  );
+};
 
 export default NewsItem;
+
+interface NewsItemContentSocialProps {
+  showIcon?: boolean;
+  image?: string;
+  description?: string;
+}
+const NewsItemContentSocial: React.FC<NewsItemContentSocialProps> = ({
+  image,
+  showIcon = true,
+  description,
+}) => {
+  return (
+    <>
+      <div className={`pb-[100%] h-0 w-full relative overflow-hidden`}>
+        {showIcon && (
+          <InstagramIcon className="absolute top-4 left-4 z-10 text-white h-6 w-6" />
+        )}
+        {image && (
+          <img
+            src={image}
+            loading="lazy"
+            className="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform"
+          />
+        )}
+        <ArrowIcon className="absolute bottom-4 right-4 z-10 text-white h-6 w-6" />
+      </div>
+      <div className={`px-5 py-6 grow`}>
+        {description && (
+          <p className={`text-lg/6 line-clamp-3`}>{description}</p>
+        )}
+      </div>
+    </>
+  );
+};
+
+interface NewsItemContentCtaProps {
+  title?: string;
+  description?: string;
+}
+const NewsItemContentCta: React.FC<NewsItemContentCtaProps> = ({
+  title,
+  description,
+}) => {
+  return (
+    <>
+      {title && (
+        <h1 className="font-aktiv font-semibold px-5 pt-6 text-[2.5rem]/[1.1]">
+          {title}
+        </h1>
+      )}
+      <ArrowIcon className="absolute bottom-4 right-4 z-10 text-white h-6 w-6" />
+      <div className={`px-5 py-6 grow`}>
+        {description && <p className={`text-lg/6`}>{description}</p>}
+      </div>
+    </>
+  );
+};
+
+interface NewsItemContentCtaProps {
+  fullImage?: string;
+  alt?: string;
+}
+const NewsItemFullImage: React.FC<NewsItemContentCtaProps> = ({
+  fullImage,
+  alt,
+}) => {
+  return (
+    <>
+      {fullImage && (
+        <img
+          src={fullImage}
+          {...(alt ? { alt } : {})}
+          loading="lazy"
+          className="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform"
+        />
+      )}
+      <ArrowIcon className="absolute bottom-4 right-4 z-10 text-white h-6 w-6" />
+    </>
+  );
+};

src/components/NewsSlider.tsx

@@ -85,10 +85,10 @@ const NewsSlider: React.FC<Props> = ({
                 key={index}
                 image={item.image}
                 href={item.target}
-                isInstagram={item.instagram}
-                green={item.green}
+                type={item.type}
                 description={item.description}
                 title={item.title}
+                newTab={item.newTab}
               />
             ))}
         </div>

src/components/NewsSliderDataWrapper.astro

@@ -14,11 +14,13 @@ const stickyNews = (
   await getCollection("news", ({ id }) => {
     return id.startsWith(localeFromUrl);
   })
-).map((item) => ({
-  ...item.data,
-  id: item.id,
-  target: baseUrl + "/" + localeFromUrl + "/" + item.data.target,
-}));
+)
+  .map((item) => ({
+    ...item.data,
+    id: item.id,
+    target: baseUrl + "/" + localeFromUrl + "/" + item.data.target,
+  }))
+  .sort((a, b) => (a?.order || 0) - (b?.order || 0));
 ---
 
 <NewsSliderComponent

src/components/WideCard.tsx

@@ -12,6 +12,7 @@ interface Props {
   newTab?: boolean;
   buttonClasses?: string;
   centerImage?: string;
+  centerImageClasses?: string;
   children?: React.ReactNode;
 }
 
@@ -27,6 +28,7 @@ const WideCard: React.FC<Props> = ({
   buttonClasses,
   centerImage,
   children,
+  centerImageClasses
 }) => {
   const bgMapping = [
     "bg-illustration-4-wide mask-illustration-vertical md:mask-illustration-horizontal bg-no-repeat bg-[position:right_-80px_top_-40px] mt-24 md:mt-0",
@@ -44,13 +46,13 @@ const WideCard: React.FC<Props> = ({
       <div className="bg-tolo-green relative overflow-hidden z-10">
         {(centerImage || title || text) && (
           <div
-            className={`p-5 lg:p-10 text-white absolute h-full flex flex-col gap-4 lg:gap-6 z-20 ${
+            className={`text-white absolute h-full flex flex-col gap-4 lg:gap-6 z-20 ${
               centerImage
                 ? "items-center justify-center w-full"
-                : "items-start justify-start md:w-[65%]"
+                : "items-start justify-start md:w-[65%] p-5 lg:p-10"
             }`}
           >
-            {centerImage && <img src={centerImage} />}
+            {centerImage && <img src={centerImage} className={centerImageClasses} />}
             {title && (
               <h1 className="font-semibold text-2xl leading-7 md:text-[40px] md:leading-[48px] font-aktiv">
                 {title}

src/content/config.ts

@@ -4,9 +4,12 @@ const newsCollection = defineCollection({
   type: "data",
   schema: z.object({
     target: z.string(),
-    title: z.string(),
+    title: z.string().optional(),
     description: z.string(),
-    green: z.boolean(),
+    type: z.enum(["instagram", "cta", "fullImage"]),
+    newTab: z.boolean().optional(),
+    image: z.string().optional(),
+    order: z.number().optional()
   }),
 });
 

src/content/news/en/makers-innovation-awards.yaml

@@ -1,4 +1,5 @@
 title: "Makers Innovation Award"
 description: "Where Networking Meets Funding, Mentoring Sparks Ideas, and Innovation Comes to Life!"
 target: makersinnovationaward
-green: true
+type: cta
+order: 1