Feature/blog (#405)

* stachign code * adding cards * adding more card content * more card updates * more styles * finishing design * fixing padding * more plan id's * simplifying bar * fixing free card * clean up * adding version tracker * pr callouts * adding lilypad 2.0 (#401) * adding lilypad 2.0 * client --------- Co-authored-by: Nick Grato <[email protected]> * loading section * more marketing page designs and new utility classes * adding legacy section and breaking up the form component in the email section. * making the grid section * adding slider * adding assets * finishing touches * fixing chf price * fixing build * pr clean up * new pages: * staching code * more styles. * pr callouts * organizing dependancies * fixing file name --------- Co-authored-by: Nick Grato <[email protected]>
Hubs-Foundation · Sep 18, 2023 · d8825e0 · d8825e0
1 parent ae302b9
commit d8825e0
Show file tree

Hide file tree

Showing 17 changed files with 661 additions and 52 deletions.
diff --git a/marketing/components/modules/Blog/Blog/Blog.module.scss b/marketing/components/modules/Blog/Blog/Blog.module.scss
@@ -0,0 +1,38 @@
+@use 'styles/core/boilerplate' as *;
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 0 18px;
+}
+
+.container {
+  width: 100%;
+  max-width: $container-max-width;
+}
+
+.header {
+  padding: 60px 0 40px;
+  border-bottom: 2px solid $color-background-overlay;
+
+  @include tablet-down {
+    padding: 40px 0 20px;
+  }
+}
+
+.preview {
+  &_wrapper {
+    @include tablet-down {
+      display: flex;
+      justify-content: center;
+    }
+  }
+  &_container {
+    @include tablet-down {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 40px;
+      max-width: 540px;
+    }
+  }
+}
diff --git a/marketing/components/modules/Blog/Blog/Blog.tsx b/marketing/components/modules/Blog/Blog/Blog.tsx
@@ -0,0 +1,27 @@
+import styles from './Blog.module.scss';
+import BlogPreview from '../BlogPreview/BlogPreview';
+import { BlogT } from 'types';
+
+type BlogPropsT = {
+  blogData: BlogT;
+};
+
+const Blog = ({ blogData }: BlogPropsT) => (
+  <div className={styles.wrapper}>
+    <div className={styles.container}>
+      <section className={styles.header}>
+        <h1 className="heading-xxl">{blogData.name}</h1>
+      </section>
+
+      <section className={styles.preview_wrapper}>
+        <div className={styles.preview_container}>
+          {blogData.posts.map((post) => (
+            <BlogPreview key={post.sys.id} post={post} />
+          ))}
+        </div>
+      </section>
+    </div>
+  </div>
+);
+
+export default Blog;
diff --git a/marketing/components/modules/Blog/BlogPost/BlogPost.module.scss b/marketing/components/modules/Blog/BlogPost/BlogPost.module.scss
@@ -0,0 +1,55 @@
+@use 'styles/core/boilerplate' as *;
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.header {
+  a {
+    @include primary-link;
+    @include body-sm;
+  }
+}
+
+.bread_crumb {
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.container {
+  width: 100%;
+  max-width: $container-max-width;
+  padding: 40px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.attributes {
+  display: flex;
+  justify-content: space-between;
+  @include body-md-semi-bold;
+  @include tablet-down {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
+
+.post {
+  @include body-md();
+
+  & > p {
+    margin-bottom: 12px;
+    text-indent: 40px;
+  }
+}
+
+.back_button {
+  margin-right: 18px;
+
+  @include tablet-down {
+    display: none;
+  }
+}
diff --git a/marketing/components/modules/Blog/BlogPost/BlogPost.tsx b/marketing/components/modules/Blog/BlogPost/BlogPost.tsx
@@ -0,0 +1,66 @@
+import { BlogPostT } from 'types';
+import styles from './BlogPost.module.scss';
+import Bar from '@Shared/Bar/Bar';
+import Image from 'next/image';
+import Link from 'next/link';
+import { RoutesE } from 'types/Routes';
+import { useRouter } from 'next/router';
+import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
+import { Button } from '@mozilla/lilypad-ui';
+type BlogPostPropsT = {
+  rootLink?: string;
+  post: BlogPostT;
+};
+
+const BlogPost = ({ post, rootLink = 'Blog' }: BlogPostPropsT) => {
+  const router = useRouter();
+  const onBackClick = () => {
+    router.push(RoutesE.BLOG);
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.container}>
+        <section className={styles.header}>
+          <div className={styles.bread_crumb}>
+            <Button
+              icon="chevron-left"
+              category="primary_outline"
+              size="small"
+              onClick={onBackClick}
+              classProp={styles.back_button}
+            />
+            <Link className="primary-link" href={RoutesE.BLOG}>
+              {rootLink}
+            </Link>
+            <span className="body-sm">&nbsp; {'>'}&nbsp; </span>
+            <Link className="primary-link" href={`/blog/${post.slug}`}>
+              {post.title}
+            </Link>
+          </div>
+          <Bar />
+          <h1 className="heading-xl mb-18-dt mb-8-mb">{post.title}</h1>
+          <div className={styles.attributes}>
+            <p>{post.subtitle}</p>
+            <p>{post.date}</p>
+          </div>
+        </section>
+
+        <section className={styles.image}>
+          <Image
+            src={post.featuredImage.url}
+            height={550}
+            width={1200}
+            alt={post.imageAlt}
+          />
+        </section>
+
+        <section className={styles.post}>
+          {documentToReactComponents(post.post.json)}
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default BlogPost;
diff --git a/marketing/components/modules/Blog/BlogPreview/BlogPreview.module.scss b/marketing/components/modules/Blog/BlogPreview/BlogPreview.module.scss
@@ -0,0 +1,88 @@
+@use 'styles/core/boilerplate' as *;
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+
+  @include tablet-down {
+    width: 250px;
+  }
+
+  @include mobile-down {
+    width: 100%;
+  }
+}
+
+.container {
+  background: transparent;
+  text-align: left;
+  border: 0;
+  margin-top: 20px;
+  width: 100%;
+  max-width: $container-max-width;
+  display: flex;
+  transition: 0.5s ease;
+
+  @include tablet-down {
+    flex-direction: column;
+  }
+
+  &:hover {
+    cursor: pointer;
+    @include tablet-up {
+      color: $color-interaction-primary;
+    }
+
+    .image {
+      @include tablet-up {
+        transform: scale(1.03);
+        transition: 0.5s ease;
+      }
+    }
+
+    .content {
+      @include tablet-up {
+        margin-left: 15px;
+      }
+    }
+  }
+}
+
+.content {
+  margin: 20px 20px 20px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  justify-content: center;
+  transition: 0.5s ease;
+
+  @include tablet-down {
+    gap: 8px;
+  }
+}
+
+.image {
+  flex-shrink: 0;
+  width: 250px;
+  height: 250px;
+  transition: 0.5s ease;
+
+  @include tablet-up {
+    margin: 20px 20px 20px 0;
+  }
+
+  @include mobile-down {
+    flex-shrink: 1;
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.cta {
+  display: none;
+  @include tablet-down {
+    display: initial;
+    text-align: center;
+    margin-top: 20px;
+  }
+}
diff --git a/marketing/components/modules/Blog/BlogPreview/BlogPreview.tsx b/marketing/components/modules/Blog/BlogPreview/BlogPreview.tsx
@@ -0,0 +1,43 @@
+import styles from './BlogPreview.module.scss';
+import { BlogPostPreviewT } from 'types';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Button } from '@mozilla/lilypad-ui';
+
+type BlogPreviewPropsT = {
+  post: BlogPostPreviewT;
+};
+
+const BlogPreview = ({ post }: BlogPreviewPropsT) => (
+  <Link href={`/blog/${post.slug}`}>
+    <div className={styles.wrapper}>
+      <div className={styles.container}>
+        <div className={styles.image}>
+          <Image
+            src={post.thumbnailImage.url}
+            alt={post.imageAlt}
+            width={550}
+            height={550}
+          />
+        </div>
+        <div className={styles.content}>
+          <h3 className="heading-lg">{post.title}</h3>
+          <p className="body-md-bold">{post.subtitle}</p>
+          <p className="body-sm">{post.date}</p>
+          <p className="body-md">{post.preview}</p>
+          <div className={styles.cta}>
+            <Button
+              classProp="width-100"
+              text="Read More"
+              label="presentational"
+              category="primary_outline"
+              type="submit"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Link>
+);
+
+export default BlogPreview;
diff --git a/marketing/components/modules/Blog/index.ts b/marketing/components/modules/Blog/index.ts
@@ -0,0 +1 @@
+export { default } from './Blog/Blog';
diff --git a/marketing/components/shared/MobileCarousel/MobileCarousel.module.scss b/marketing/components/shared/MobileCarousel/MobileCarousel.module.scss
diff --git a/marketing/components/shared/MobileCarousel/MobileCarousel.tsx b/marketing/components/shared/MobileCarousel/MobileCarousel.tsx
@@ -1,4 +1,3 @@
-import styles from './MobileCarousel.module.scss';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import Image, { StaticImageData } from 'next/image';
 import 'swiper/css';
@@ -14,14 +13,17 @@ type MobileCarouselPropsT = {
 
 const MobileCarousel = ({ slides }: MobileCarouselPropsT) => {
   return (
-    <section className={styles.wrapper}>
-      <Swiper loop={true} slidesPerView={1.25}>
+    <section>
+      <Swiper
+        loop={true}
+        slidesPerView={1.25}
+        spaceBetween={18}
+        centeredSlides={true}
+      >
         {slides.map(({ src, alt }) => {
           return (
             <SwiperSlide key={alt}>
-              <div className={styles.image}>
-                <Image src={src} height={500} width={500} alt={alt} />
-              </div>
+              <Image src={src} height={500} width={500} alt={alt} />
             </SwiperSlide>
           );
         })}