Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Introduce React FullPage for homepage scroll effect #64

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
+7,662 −686
Draft

Introduce React FullPage for homepage scroll effect #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
190 changes: 86 additions & 104 deletions components/layouts/hero_layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,10 @@ import Head from "components/head";
import Header from "components/header";
import Image from "next/image";
import arrowDown from "../../public/arrow_down.svg";
import orbitModelCoverImage from "../../public/cover_logo_orbit_model.svg";
import ReactFullpage from "@fullpage/react-fullpage";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import {
Animator,
ScrollContainer,
ScrollPage,
MoveOut,
} from "react-scroll-motion";
import Slide1 from "components/slides/slide1";
import Slide2 from "components/slides/slide2";
import Slide3 from "components/slides/slide3";
Expand Down Expand Up @@ -51,13 +45,16 @@ export default function HeroLayout() {
return (
<>
<Head />
{isBrowser && (
<ScrollContainer snap="none" inView={inView}>
{!inView && <Header />}
<ScrollPage page={0}>
<div className="flex flex-col justify-evenly items-center h-screen text-white">
<div className="hidden md:block md:py-16"></div>
<Animator animation={MoveOut(-1000, 0)}>
<ReactFullpage
//fullpage options
scrollingSpeed={1000}
continuousVertical="false"
scrollBar="true"
render={({ state, fullpageApi }) => {
return (
<ReactFullpage.Wrapper>
<div className="section flex flex-col justify-evenly items-center h-screen text-white">
<div className="hidden md:block md:py-16"></div>
<div
className="group relative"
onDragStart={preventDragHandler}
Expand All @@ -66,109 +63,94 @@ export default function HeroLayout() {
<div className="relative">
<img
src="/cover/orbits.svg"
className="relative mx-auto w-[70%] animate-spin-slow hover:"
className="relative mx-auto w-[90%] xs:w-[70%] animate-spin-slow hover:"
/>
<img
src="/cover/text.svg"
className="absolute top-[108px] p-4 bg-[#0E0A22]"
className="xs:absolute xs:top-[108px] p-4 bg-[#0E0A22]"
/>
</div>
</div>
</Animator>
{/* This ref is needed so that the app knows when to display Header */}
<div ref={ref} className="absolute top-36"></div>
{/* This ref is needed so that the app knows when to display Header */}
<div ref={ref} className="absolute top-36"></div>

<div className="hidden mt-8 md:block">
<div className="font-semibold text-center">
<div>Learn how to build and measure a thriving community</div>
<div>with the Orbit Model.</div>
</div>
<br></br>
<div className="text-center">
<p>Scroll down to start guide</p>
<div className="hidden mt-8 md:block">
<div className="font-semibold text-center">
<div>
Learn how to build and measure a thriving community
</div>
<div>with the Orbit Model.</div>
</div>
<br></br>
<Image
src={arrowDown}
alt="Purple arrow pointing down"
className="animate-bounce"
/>
<div className="text-center">
<p>Scroll down to start guide</p>
<br></br>
<Image
src={arrowDown}
alt="Purple arrow pointing down"
className="animate-bounce"
/>
</div>
</div>
</div>
</div>
</ScrollPage>

<ScrollPage page={1}>
<div className="flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide1 />
</div>
</ScrollPage>
<ScrollPage page={2}>
<div className="flex justify-center items-center h-screen text-white bg-[#0F0A25]">
<Slide2 />
</div>
</ScrollPage>
<ScrollPage page={3}>
<div className="flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide3 />
</div>
</ScrollPage>
<ScrollPage page={4}>
<div className="flex justify-center items-center h-screen text-white bg-[#0F0A25]">
<Slide4 />
</div>
</ScrollPage>
<ScrollPage page={5}>
<div className="flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide5 />
</div>
</ScrollPage>
<ScrollPage page={6}>
<div className="flex justify-center items-center h-screen text-white bg-[#0F0A25]">
<Slide6 />
</div>
</ScrollPage>
<ScrollPage page={7}>
<div className="flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide7 />
</div>
</ScrollPage>
<div className="xs:block hidden">
<ScrollPage page={8}>
<div className="md:my-32"></div>
<div className="xs:block hidden overflow-y-auto pb-12 my-24 text-center md:px-8">
<h1 className="xs:text-3xl px-6 text-xl font-extrabold md:text-4xl">
Speak the cosmic language
</h1>
<p className="xs:text-lg px-6 my-4 mx-auto w-full md:my-6 md:my-12 md:w-2/3 md:text-xl">
The model is a family of concepts designed to work together,
giving your team a vocabulary and framework for visualizing
how your community works.
</p>
<div className="my-12 mx-auto w-3/4 text-lg md:w-3/4">
<div className="flex flex-wrap justify-center">
<Icon name="Gravity" href="/love"></Icon>
<Icon name="Love" href="/love"></Icon>
<Icon
name={
<span>
Orbit <br />
Levels
</span>
}
icon=""
href="/love/orbit-levels"
></Icon>
<Icon name="Roles" href="/love/roles"></Icon>
<Icon name="Reach" href="/reach"></Icon>
<Icon name="Impact" href="/impact"></Icon>
<Icon name="...more" href="/introduction"></Icon>
<div className="section flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide1 />
</div>
<div className="section flex justify-center items-center h-screen text-white bg-[#0F0A25]">
<Slide2 />
</div>
<div className="section flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide3 />
</div>
<div className="section flex justify-center items-center h-screen text-white bg-[#0F0A25]">
<Slide4 />
</div>
<div className="section flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide5 />
</div>
<div className="section flex justify-center items-center h-screen text-white bg-[#0F0A25]">
<Slide6 />
</div>
<div className="section flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide7 />
</div>
<div className="section xs:block hidden">
<div className="md:my-24"></div>
<div className="xs:block hidden pb-6 text-center md:px-8">
<h1 className="xs:text-3xl px-6 text-xl font-extrabold md:text-4xl">
Speak the cosmic language
</h1>
<p className="xs:text-lg px-6 my-4 mx-auto w-full md:my-6 md:my-12 md:w-2/3 md:text-xl">
The model is a family of concepts designed to work together,
giving your team a vocabulary and framework for visualizing
how your community works.
</p>
<div className="mx-auto w-3/4 text-lg md:w-3/4">
<div className="flex flex-wrap justify-center">
<Icon name="Gravity" href="/love"></Icon>
<Icon name="Love" href="/love"></Icon>
<Icon
name={
<span>
Orbit <br />
Levels
</span>
}
icon=""
href="/love/orbit-levels"
></Icon>
<Icon name="Roles" href="/love/roles"></Icon>
<Icon name="Reach" href="/reach"></Icon>
<Icon name="Impact" href="/impact"></Icon>
<Icon name="...more" href="/introduction"></Icon>
</div>
</div>
</div>
</div>
</ScrollPage>
</div>
</ScrollContainer>
)}
</ReactFullpage.Wrapper>
);
}}
/>
</>
);
}
4 changes: 2 additions & 2 deletions components/slides/slide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ export default function Slide({
};

return (
<div className="py-12 w-full md:px-20">
<div className="overflow-hidden py-0 w-full md:px-20">
<div
className={`${
lastSlide ? "justify-center" : "justify-start"
} flex flex-col md:flex-row items-center pt-16 md:px-0 md:pb-16 pb-8 max-w-[1200px] mx-auto`}
} flex flex-col md:flex-row items-center pt-0 md:px-0 md:pb-16 pb-8 max-w-[1200px] mx-auto`}
>
<div className="flex flex-col mb-4 space-y-9 w-full md:w-3/5">
{children}
Expand Down
6 changes: 3 additions & 3 deletions components/slides/slide1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ export default function Slide1(props) {

return (
<Slide image={slideOneImage} altText={altText} {...props}>
<div className="xs:block flex hidden justify-center items-center px-12 mt-8 mx-auto w-96 text-center md:hidden md:p-12 md:mt-0">
<div className="xs:block flex hidden justify-center items-center px-12 mx-auto w-96 text-center md:hidden md:p-12 md:mt-0">
<Image src={slideOneImage} alt={altText} />
</div>
<div className="xs:text-3xl px-10 w-full text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
<div className="xs:text-3xl px-4 w-full text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
Grow the community,
<br /> keep the soul.
</div>
<div className="xs:text-lg px-10 w-full tracking-wide leading-relaxed md:px-0 md:w-4/5 md:text-xl">
<div className="xs:text-lg px-4 w-full tracking-wide leading-relaxed md:px-0 md:w-4/5 md:text-xl">
Legendary communities have one thing in common: they keep members happy
and fulfilled, even at scale. Take a tour of the Orbit Model to see how
it&apos;s possible.
Expand Down
38 changes: 17 additions & 21 deletions components/slides/slide2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,25 @@ export default function Slide2(props) {

return (
<Slide image={slideTwoImage} altText={altText} {...props}>
<div className="py-12 md:py-0">
<div className="xs:block flex hidden justify-center items-center mt-8 mx-auto w-96 text-center md:hidden md:p-12 md:mt-0">
<Image src={slideTwoImage} alt={altText} />
</div>
<br></br>
<div className="xs:text-3xl px-10 text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
The secret: gravity
<div className="xs:block flex hidden justify-center items-center mx-auto w-96 text-center md:hidden md:p-12 md:mt-0">
<Image src={slideTwoImage} alt={altText} />
</div>
<br></br>
<div className="xs:text-3xl px-4 text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
The secret: gravity
</div>
<div className="xs:text-lg pb-0 px-4 w-full tracking-wide leading-relaxed md:px-0 md:w-4/5 md:text-xl">
<div>
<span className="font-bold">Gravity</span> is the force of attraction
that holds the community together, drawing members into orbit and
pulling them toward the community&apos;s center.
</div>
<br></br>

<div className="xs:text-lg px-10 pb-10 w-full tracking-wide leading-relaxed md:px-0 md:w-4/5 md:text-xl">
<div>
<span className="font-bold">Gravity</span> is the force of
attraction that holds the community together, drawing members into
orbit and pulling them toward the community&apos;s center.
</div>
<br></br>
<div>
Gravity weakens when the community grows too fast. New members who
can&apos;t be integrated will leave quickly or stay and drive away
valuable long-time members. How do we avoid this and keep gravity
high?
</div>
<div>
Gravity weakens when the community grows too fast. New members who
can&apos;t be integrated will leave quickly or stay and drive away
valuable long-time members. How do we avoid this and keep gravity
high?
</div>
</div>
</Slide>
Expand Down
41 changes: 18 additions & 23 deletions components/slides/slide3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,29 +12,24 @@ export default function Slide3(props) {
needsLargerImageSize={true}
{...props}
>
<div className="py-12 md:py-0">
<div className="pt-6 pb-12 md:py-0">
<div className="mb-4 hidden xs:block mx-auto px-0 w-[425px] md:hidden md:p-12 md:mt-0">
<Image src={slideThreeImage} alt={altText} />
</div>
<br></br>
<div className="xs:text-3xl px-10 text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
Deepen the love
</div>
<br></br>
<div className="xs:text-lg px-10 w-full tracking-wide leading-relaxed md:px-0 md:w-4/5 md:text-xl">
<div>
To make room for growth, we must give members clear opportunities
to deepen their involvement—we call it love—and move further
towards the community&apos;s center.
</div>
<br></br>
<div>
The speed at which this happens makes up a community&apos;s
gravity metric. This metric helps determine readiness for growth
and find bottlenecks where members aren&apos;t moving in.
</div>
</div>
<div className="mb-4 hidden xs:block mx-auto px-0 w-[425px] md:hidden md:p-12 md:mt-0">
<Image src={slideThreeImage} alt={altText} />
</div>
<br></br>
<div className="xs:text-3xl px-4 text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
Deepen the love
</div>
<div className="xs:text-lg px-4 w-full tracking-wide leading-relaxed md:px-0 md:w-4/5 md:text-xl">
<div>
To make room for growth, we must give members clear opportunities to
deepen their involvement—we call it love—and move further towards the
community&apos;s center.
</div>
<br></br>
<div>
The speed at which this happens makes up a community&apos;s gravity
metric. This metric helps determine readiness for growth and find
bottlenecks where members aren&apos;t moving in.
</div>
</div>
</Slide>
Expand Down
33 changes: 14 additions & 19 deletions components/slides/slide4.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,22 @@ export default function Slide4(props) {

return (
<Slide image={slideFourImage} altText={altText} {...props}>
<div className="py-12 md:py-0">
<div className="xs:block flex hidden justify-center items-center px-12 mt-8 mx-auto w-96 md:hidden md:p-12 md:mt-0">
<Image src={slideFourImage} alt={altText} />
</div>
<div className="xs:text-3xl px-10 text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
Increase love and reach
<div className="xs:block flex hidden justify-center items-center px-12 mt-8 mx-auto w-96 md:hidden md:p-12 md:mt-0">
<Image src={slideFourImage} alt={altText} />
</div>
<div className="xs:text-3xl px-4 text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
Increase love and reach
</div>
<div className="xs:text-lg px-4 w-full md:px-0 md:w-4/5 md:text-xl md:tracking-wide md:leading-relaxed">
<div>
Love is a measure of a member&apos;s involvement, based on what
activities they do and how often. Reach is a measure of the
member&apos;s influence and degree of connectness with other members.
</div>
<br></br>
<div className="xs:text-lg pb-8 px-10 w-full md:px-0 md:w-4/5 md:text-xl md:tracking-wide md:leading-relaxed">
<div>
Love is a measure of a member&apos;s involvement, based on what
activities they do and how often. Reach is a measure of the
member&apos;s influence and degree of connectness with other
members.
</div>
<br></br>
<div>
Community builders create programs that increase the love and reach
of their members. This creates value for members and increases
gravity.
</div>
<div>
Community builders create programs that increase the love and reach of
their members. This creates value for members and increases gravity.
</div>
</div>
</Slide>
Expand Down
Loading