Adds website launch phases section to Tangle website (#1118)

apps/tangle-website/src/components/Header.tsx

@@ -4,8 +4,8 @@ import { Navbar } from '.';
 
 export const Header = () => {
   return (
-    <header className="sticky top-0 z-50 bg-mono-0 min-h-[72px] webb-shadow-sm block max-w-[1440px] mx-auto px-[20px] md:px-[24px] lg:px-[156.5px]">
-      <div className="py-4 flex items-center justify-between">
+    <header className="sticky top-0 z-50 bg-mono-0 min-h-[72px] webb-shadow-sm">
+      <div className="mx-auto max-w-[1440px] px-[20px] md:px-[24px] lg:px-[156.5px] py-4 flex items-center justify-between">
         <Link href="/">
           <TangleLogo hideNameOnMobile />
         </Link>

apps/tangle-website/src/components/SectionDescription2.tsx

@@ -0,0 +1,20 @@
+import { Typography } from '@webb-tools/webb-ui-components';
+import { PropsOf } from '@webb-tools/webb-ui-components/types';
+import React, { forwardRef } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export const SectionDescription2 = forwardRef<
+  HTMLParagraphElement,
+  PropsOf<'p'>
+>(({ className, ...props }, ref) => {
+  return (
+    <Typography
+      variant="para1"
+      {...props}
+      className={twMerge('section-description-2', className)}
+      ref={ref}
+    />
+  );
+});
+
+SectionDescription2.displayName = 'SectionDescription2';

apps/tangle-website/src/components/SectionHeader.tsx

@@ -10,7 +10,7 @@ export const SectionHeader = forwardRef<HTMLHeadingElement, PropsOf<'h5'>>(
         variant="h5"
         {...props}
         className={twMerge(
-          'uppercase font-bold text-tangle_purple dark:text-tangle_dark_purple',
+          'uppercase font-bold text-purple-70 dark:text-tangle_dark_purple',
           className
         )}
         ref={ref}

apps/tangle-website/src/components/SectionTitle2.tsx

@@ -17,4 +17,4 @@ export const SectionTitle2 = forwardRef<HTMLHeadingElement, PropsOf<'h3'>>(
   }
 );
 
-SectionTitle2.displayName = 'SectionTitle';
+SectionTitle2.displayName = 'SectionTitle2';

apps/tangle-website/src/components/index.ts

@@ -4,12 +4,11 @@ export * from './Heading';
 export * from './InternalOrExternalLink';
 export * from './LinkButton';
 export * from './Navbar';
-export * from './ParticipationTabTrigger';
 export * from './SectionDescription';
+export * from './SectionDescription2';
 export * from './SectionHeader';
 export * from './SectionTitle';
 export * from './SectionTitle2';
-export * from './TangleFeatureCard';
 // Section components
 export * from './sections';
 // Svg components

apps/tangle-website/src/components/sections/CommunitySection.tsx

@@ -13,7 +13,7 @@ import {
   WebsiteCommunity,
 } from '@webb-tools/webb-ui-components';
 import { NextSeo } from 'next-seo';
-import { SectionDescription } from '../SectionDescription';
+import { SectionDescription, SectionDescription2 } from '..';
 
 type LinksType = {
   Icon: (props: IconBase) => JSX.Element;
@@ -82,11 +82,11 @@ export const CommunitySection = () => {
             Tangle Community
           </Typography>
 
-          <SectionDescription className="text-center mt-[16px] px-3 lg:px-0">
+          <SectionDescription2 className="text-center mt-[16px] px-3 lg:px-0">
             The Tangle network doubles as hub for routing cross chain messages
             and for anchoring itself as a bridge endpoint for cross chain
             zero-knowledge applications.
-          </SectionDescription>
+          </SectionDescription2>
 
           <WebsiteCommunity links={links} />
         </div>

apps/tangle-website/src/components/sections/FeaturesSection.tsx

@@ -1,3 +1,6 @@
+import { FC } from 'react';
+import Image from 'next/image';
+import { Typography } from '@webb-tools/webb-ui-components';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { FreeMode } from 'swiper';
 import 'swiper/css';
@@ -7,10 +10,19 @@ import {
   SectionHeader,
   SectionTitle,
   SectionDescription,
-  TangleFeatureCard,
+  SectionDescription2,
+  LinkButton,
 } from '..';
 import { TANGLE_OVERVIEW_URL, WANT_TO_LEARN_MORE_URL } from '../../constants';
 
+interface TangleFeatureCardProps {
+  img: string;
+  index: number;
+  title: string;
+  description: string;
+  link: string;
+}
+
 const tangleFeatures = [
   {
     title: 'Proof-of-Stake Authority Selection',
@@ -34,60 +46,86 @@ const tangleFeatures = [
 
 export const FeaturesSection = () => {
   return (
-    <section className="flex flex-col items-center gap-[60px] py-[94px]">
-      <div className="flex flex-col items-center gap-4 px-5">
-        <div className="flex flex-col items-center gap-2">
-          <SectionHeader>Features</SectionHeader>
-          <SectionTitle>What makes Tangle Unique?</SectionTitle>
+    <section className="py-[94px]">
+      <div className="max-w-[1440px] mx-auto flex flex-col items-center gap-[60px]">
+        <div className="flex flex-col items-center gap-4 px-5">
+          <div className="flex flex-col items-center gap-2">
+            <SectionHeader>Features</SectionHeader>
+            <SectionTitle>What makes Tangle Unique?</SectionTitle>
+          </div>
+          <SectionDescription className="text-center lg:w-[65%]">
+            The Tangle network doubles as hub for routing cross chain messages
+            and for anchoring itself as a bridge endpoint for cross chain
+            zero-knowledge applications.
+          </SectionDescription>
         </div>
-        <SectionDescription className="text-center lg:w-[65%]">
-          The Tangle network doubles as hub for routing cross chain messages and
-          for anchoring itself as a bridge endpoint for cross chain
-          zero-knowledge applications.
-        </SectionDescription>
-      </div>
-
-      {/* Desktop + Mobile */}
-      <div className="md:hidden flex lg:flex flex-col items-stretch justify-items-stretch gap-6 lg:flex-row lg:w-[77.5%] px-5 lg:px-0">
-        {tangleFeatures.map((feat, i) => {
-          return (
-            <TangleFeatureCard
-              img={`/static/assets/tangle-features-${i + 1}.png`}
-              index={i + 1}
-              title={feat.title}
-              description={feat.description}
-              link={feat.link}
-              key={i}
-            />
-          );
-        })}
-      </div>
 
-      {/* Tablet */}
-      <Swiper
-        spaceBetween={16}
-        slidesPerView="auto"
-        freeMode={true}
-        modules={[FreeMode]}
-        className="hidden md:block lg:hidden w-full !pl-5"
-      >
-        {tangleFeatures.map((feat, i) => {
-          return (
-            <SwiperSlide
-              key={i}
-              style={{ width: 'auto', height: 'auto', alignSelf: 'stretch' }}
-            >
+        {/* Desktop + Mobile */}
+        <div className="md:hidden flex lg:flex flex-col items-stretch justify-items-stretch gap-6 lg:flex-row lg:w-[77.5%] px-5 lg:px-0">
+          {tangleFeatures.map((feat, i) => {
+            return (
               <TangleFeatureCard
                 img={`/static/assets/tangle-features-${i + 1}.png`}
                 index={i + 1}
                 title={feat.title}
                 description={feat.description}
                 link={feat.link}
+                key={i}
               />
-            </SwiperSlide>
-          );
-        })}
-      </Swiper>
+            );
+          })}
+        </div>
+
+        {/* Tablet */}
+        <Swiper
+          spaceBetween={16}
+          slidesPerView="auto"
+          freeMode={true}
+          modules={[FreeMode]}
+          className="hidden md:block lg:hidden w-full !pl-5"
+        >
+          {tangleFeatures.map((feat, i) => {
+            return (
+              <SwiperSlide
+                key={i}
+                style={{ width: 'auto', height: 'auto', alignSelf: 'stretch' }}
+              >
+                <TangleFeatureCard
+                  img={`/static/assets/tangle-features-${i + 1}.png`}
+                  index={i + 1}
+                  title={feat.title}
+                  description={feat.description}
+                  link={feat.link}
+                />
+              </SwiperSlide>
+            );
+          })}
+        </Swiper>
+      </div>
     </section>
   );
 };
+
+const TangleFeatureCard: FC<TangleFeatureCardProps> = (props) => {
+  const { img, index, title, description, link } = props;
+  return (
+    <div className="bg-mono-0 rounded-lg overflow-hidden flex flex-col md:w-[300px] min-h-[647px] md:min-h-min md:h-full lg:h-auto flex-1">
+      <div className="relative h-[150px] w-full object-contain">
+        <Image src={img} alt={title} fill />
+      </div>
+      <div className="py-[42px] px-6 flex flex-col justify-between flex-1">
+        <div>
+          <p className="mono1 mb-4">0{index}</p>
+          <hr />
+          <Typography variant="h4" fw="bold" className="mt-4 mb-6">
+            {title}
+          </Typography>
+          <SectionDescription2>{description}</SectionDescription2>
+        </div>
+        <LinkButton href={link} className="mt-4">
+          Learn More
+        </LinkButton>
+      </div>
+    </div>
+  );
+};