Merge pull request #24 from DominMFD/issue-12

Complete 'How It Works' section

app/octopost/layout.tsx

@@ -2,9 +2,6 @@ import "../../styles/globals.css";
 import type { Metadata } from "next";
 import { Poppins } from "next/font/google";
 import React from "react";
-import Navbar from "./components/Navbar";
-import Hero from "./components/Hero";
-import About from "./components/About";
 
 const poppins = Poppins({
   subsets: ["latin"],

app/octopost/page.tsx

@@ -2,14 +2,15 @@ import About from "@/components/octopost/About/About";
 import Datas from "@/components/octopost/Datas/Datas";
 import Hero from "@/components/octopost/Hero/Hero";
 import Navbar from "@/components/octopost/Navbar/Navbar";
+import Works from "@/components/octopost/Works/Works";
 
 function Page() {
   return (
     <>
       <Navbar />
       <Hero />
       <About />
-
+      <Works />
       <Datas />
     </>
   );

components/octopost/Datas/Datas.tsx

@@ -27,7 +27,7 @@ export default function Datas() {
   return (
     <section
       className="h-[247px]  flex-center relative bg-gradient-to-r flex-wrap
-      from-octopost-primaryViolet to-octopost-primaryPink"
+      from-octopost-primaryViolet to-octopost-primaryPink overflow-hidden"
     >
       <div
         className="

components/octopost/Works/Card.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { motion } from "framer-motion";
+import React, { useState } from 'react';
+import ColorfulEllipse from "./assets/ ColorfulEllipse";
+import CloudIcon from "./assets/CloudIcon";
+import Ellipse from "./assets/Ellipse";
+import ColorfulCloud from "./assets/ColorfulCloud";
+
+type CardProps = {
+  title: string,
+  text: string,
+}
+
+function Card({
+  title,
+  text,
+}: CardProps) {
+  const [isHovered, setIsHovered] = useState(false);
+
+
+  return (
+    <motion.div className="w-[265px] bg-white shadow-dropshadow-card h-96 rounded-xl px-8 pt-16 pb-10 flex flex-col justify-between items-center relative overflow-hidden group"
+    whileHover={{scale: 1.02}}
+    transition={{duration: 0.5}}
+    onMouseEnter={() => setIsHovered(true)}
+    onMouseLeave={() => setIsHovered(false)}>
+      <div className="absolute top-0 left-0">
+        <Ellipse/>
+      </div>
+      <motion.div className="absolute top-0 left-0 z-20"
+        initial={{ x: -100, y: -100, opacity: 0 }}
+        animate={{ x: isHovered ? 0 : -100, y: isHovered ? 0 : -100, opacity: isHovered ? 1 : 0 }}
+        transition={{ duration: 0.8 }}
+      >
+        <ColorfulEllipse />
+      </motion.div>
+      <div className="mb-9 relative">
+        <CloudIcon />
+         <motion.div className="absolute top-0"
+         initial={{opacity: 0}}
+         animate={{opacity: isHovered ? 1 : 0}}
+         transition={{duration:  0.8}}>
+           <ColorfulCloud />
+         </motion.div>
+      </div>
+      <div className="overflow-hidden z-20">
+        <h3 className="font-bold text-xl text-center text-octopost-tertiaryViolet mb-3">{title}</h3>
+        <div className="">
+          <p className="text-sm text-center text-[#2E2667] leading-6 text-ellipsis">{text}</p>
+        </div>
+      </div>
+      <div className="absolute bottom-0 right-0 rotate-180 z-10">
+        <Ellipse/>
+      </div>
+      <motion.div
+        initial={{ width: 0 }}
+        animate={{ width: isHovered ? '108px' : '0px', height: isHovered ? '8px' : '0px'}}
+        transition={{ width: {duration: 0.5}, height: {duration: isHovered ? 0 : 0.5, delay: isHovered ? 0 : 0.2} }}
+        className="h-2 rounded-full absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gradient-purplebar z-40"
+      ></motion.div>
+    </motion.div>
+  )
+}
+
+export default Card;

components/octopost/Works/Works.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react';
+import Bubble from "./assets/Bubble";
+import VectorLeft from "./assets/VectorLeft";
+import VectorRight from "./assets/VectorRight";
+import Card from "./Card";
+
+import { CARDS } from './utils/Cards';
+
+function Works() {
+  const [activeSlide, setActiveSlide] = useState<number>(0);
+  const scrollContainerRef = useRef<HTMLUListElement>(null);
+
+  const handleScrollEvent = (): void => {
+    if (scrollContainerRef.current) {
+      const scrollLeft = scrollContainerRef.current.scrollLeft;
+      const width = scrollContainerRef.current.clientWidth;
+      const newActiveSlide = Math.round(scrollLeft / width);
+      setActiveSlide(newActiveSlide);
+    }
+  };
+
+  return (
+    <section className="h-screen bg-octopost-primaryWhite flex items-center relative overflow-hidden">
+      <div className="m-auto flex flex-col max-w-7xl z-20 overflow-hidden gap-9 desktop:gap-32">
+
+        <div className="flex flex-col max-w-[589px] m-0 items-center gap-10 px-10 self-center desktop:px-5">
+          <h2 className="font-semibold text-octopost-primaryViolet text-4xl text-center">Como Funciona?</h2>
+          <p className="h-24 overflow-hidden text-ellipsis leading-6 text-octopost-tertiaryViolet text-center tracking-tighter">
+            O OctoPost simplifica o compartilhamento de conteúdo em diversas plataformas. Veja como podemos transformar sua experiência online. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+
+            <ul className="flex overflow-x-auto gap-4 no-scrollbar desktop:gap-7" ref={scrollContainerRef} onScroll={handleScrollEvent}>
+            <li className="flex-none">
+                <div className='w-7'>
+                </div>
+              </li>
+              {CARDS.map((card, index) => (
+                <li className="flex-none"
+                key={index}>
+                  <Card 
+                    title={card.title}
+                    text={card.text}
+                  />
+              </li>
+              ))}
+              <li className="flex-none">
+                <div className='w-7'>
+
+                </div>
+              </li>
+            </ul>
+
+      </div>
+      <div className="w-fit absolute bottom-12 inset-x-0 mx-auto z-50 gap-3 hidden mobile:flex">
+        {Array.from({ length: CARDS.length }).map((_, index) => (
+          <div 
+            key={index}
+            className={`w-3 h-3 border-[1px] rounded-full transition-all duration-500 ${index === activeSlide ? 'bg-octopost-primaryViolet border-octopost-primaryViolet' : 'border-[#A1A1A1]'}`}
+          ></div>
+        ))}
+      </div>
+
+      <div className="w-full h-3/5 absolute bg-gradient-works bottom-0 opacity-40"></div>
+
+      <div className="absolute right-0 top-0 mobile:-right-[31rem]">
+        <VectorRight />
+      </div>
+      <div className="absolute left-0 bottom-0 mobile:-left-[38rem]">
+        <VectorLeft />
+      </div>
+
+      <div className="absolute left-[10%] bottom-[8%] mobile:-left-20 mobile:bottom-1 desktop:animate-pulse mobile:opacity-40">
+        <Bubble />
+      </div>
+      <div className="absolute left-[24.3%] top-[30.2%] scale-[.71] rotate-90 mobile:left-72 mobile:top-52 desktop:animate-pulse mobile:opacity-40">
+        <Bubble />
+      </div>
+      <div className="absolute right-[15%] top-[25%] scale-75  mobile:-left-36 mobile:top-28 desktop:animate-pulse mobile:opacity-40">
+        <Bubble />
+      </div>
+      <div className="absolute right-[12%] bottom-[5%] scale-[1.31] -rotate-90  mobile:left-96 mobile:-bottom-32 desktop:animate-pulse mobile:opacity-40">
+        <Bubble />
+      </div>
+    </section>
+  );
+}
+
+export default Works;

components/octopost/Works/assets/ ColorfulEllipse.tsx

@@ -0,0 +1,15 @@
+function ColorfulEllipse() {
+  return (
+    <svg width="87" height="109" viewBox="0 0 87 109" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="-30.5" cy="-8.49878" r="117.5" fill="url(#paint0_linear_1719_687)" fill-opacity="0.51"/>
+      <defs>
+      <linearGradient id="paint0_linear_1719_687" x1="-148" y1="-8.49878" x2="93.5538" y2="-8.49878" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#894DF6"/>
+      <stop offset="1" stop-color="#F7288E"/>
+      </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default ColorfulEllipse;