apply page, web monietziation notice sunset

Prototypr · Mar 1, 2024 · 3e4ceb3 · 3e4ceb3
1 parent 00054b2
commit 3e4ceb3
Show file tree

Hide file tree

Showing 18 changed files with 205 additions and 51 deletions.
diff --git a/components/Navbar/parts/MenuItems.jsx b/components/Navbar/parts/MenuItems.jsx
@@ -268,20 +268,20 @@ const ContentList = styled("ul", {
     layout: {
       one: {
         "@media only screen and (min-width: 600px)": {
-          width: 500,
+          width: 400,
           gridTemplateColumns: ".75fr 1fr",
         },
       },
       two: {
         "@media only screen and (min-width: 600px)": {
-          width: 600,
+          width: 400,
           gridAutoFlow: "column",
           gridTemplateRows: "repeat(3, 1fr)",
         },
       },
       three: {
         "@media only screen and (min-width: 600px)": {
-          width: 650,
+          width: 450,
           gridAutoFlow: "column",
           gridTemplateRows: "repeat(3, 1fr)",
         },
@@ -548,24 +548,18 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => {
                 </div>
               <NavigationMenuContent showCaret={false} className="normal-case">
                 <ContentList layout="two">
-                  <ContentListItem
-                    title={'People'}
-                    href="/people"
-                  >
-                    Browse all contributors and members on Prototypr.
-                  </ContentListItem>
                   <ContentListItem
                     title={'Publish with us'}
-                    href="/post/write-for-us"
+                    href="/apply"
                   >
-                    Find out how to publish on Prototypr and get featured.
+                    Apply for a creator account.
                   </ContentListItem>
-                  <ContentListItem
+                  {/* <ContentListItem
                     title={'Join Network'}
-                    href="/network"
+                    href="/apply"
                   >
                     Get feedback on your writing, and meet like minded creators.
-                  </ContentListItem>
+                  </ContentListItem> */}
                   {/* <ContentListItem
                     title={'Earn micropayments'}
                     href="/web-monetization"
@@ -576,7 +570,13 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => {
                     title={'Open Source'}
                     href="https://open.prototypr.io"
                   >
-                    Learn how we built this platform by looking at the code and design.
+                    See the code for this platform.
+                  </ContentListItem>
+                  <ContentListItem
+                    title={'People'}
+                    href="/people"
+                  >
+                    Browse all Prototypr contributors.
                   </ContentListItem>
                 </ContentList>
               </NavigationMenuContent>

diff --git a/components/Sidebar/NetworkCTA2.js b/components/Sidebar/NetworkCTA2.js
@@ -4,7 +4,7 @@ import Button from "@/components/Primitives/Button";
 const PrototyprNetworkCTA = ({ data }) => {
   return (
     <div className="w-full p-5 mt-3 bg-[#EAE9F5] bg-opacity-50 rounded-2xl mb-1">
-<Link href="/network">
+<Link href="/apply">
       <div className="flex flex-col gap-1 justify-end items-end">
         <div className="w-full flex space-between rounded-[12px] h-auto p-5">
           <div className="w-2/3 flex flex-col">

diff --git a/components/footer.js b/components/footer.js
@@ -59,7 +59,7 @@ export default function Footer() {
               </p> */}
               <p className="text-sm text-gray-700 font-semibold mt-2">
                 {" "}
-                © 2022 Prototpyr,{" "}
+                © 2024 Prototpyr,{" "}
                 {intl.formatMessage({ id: "footer.copyright" })}
               </p>
 

diff --git a/components/landing-pages/components/common/button.js b/components/landing-pages/components/common/button.js
@@ -3,7 +3,7 @@ import Link from "next/link";
 const CTAButton = () => {
   return (
     <div>
-      <Link href="https://discord.gg/bYexuA3932">
+      <Link href="/apply/form">
         <button className="p-4 px-8 w-full max-w-[200px] text-[16px] rounded-full bg-[#195DE2] text-white font-medium font-inter border border-[#9DDBFD] border-opacity-40">
           Apply to join
         </button>

diff --git a/components/landing-pages/components/common/header.js b/components/landing-pages/components/common/header.js
@@ -7,6 +7,7 @@ import MobileActiveLink from "@/components/Navbar/parts/MobileActiveLink";
 // import LocationMenu from "@/components/Navbar/parts/LocationMenu";
 import MenuItems from "@/components/Navbar/parts/MenuItems";
 import UserMenu from "@/components/Navbar/UserMenu";
+import Button from "@/components/Primitives/Button";
 const WMButton = dynamic(() => import("@/components/Navbar/parts/WMButton"), 
 {
   ssr: false,
@@ -93,12 +94,17 @@ const Header = ({collapsed, hideLocaleSwitcher, editor, showWriteButton}) => {
                     />
                   </NavigationMenuList>
                 </NavigationMenu> */}
-                 <div className={`hidden mr-2 md:block my-auto`}>
+                 {/* <div className={`hidden mr-2 md:block my-auto`}>
                 <WMButton />
-              </div>
-                <div className="relative ml-3">
+              </div> */}
+                {/* <div className="relative ml-3">
                   <UserMenu userLoading={isLoading} user={user} />
-                </div>
+                </div> */}
+                 <Link href="/apply/form">
+                  <Button className="text-sm bg-blue-600 hover:bg-blue-500" variant={"confirmRounded"}>
+                  Apply to join
+                </Button>
+                </Link>
               </div>
             </div>
             {/* movil menu */}

diff --git a/components/landing-pages/components/network/hero.js b/components/landing-pages/components/network/hero.js
@@ -7,11 +7,11 @@ const Hero = () => {
         <div className="flex flex-col grid gap-5 lg:flex lg:flex-row lg:gap-1 md:flex md:flex-col">
           <div className="flex flex-col max-w-xl z-[2] translate-y-20 md:translate-y-0">
             <h1 className="text-[#0F1F40] max-w-md mb-5 md:max-w-lg font-semibold text-4xl md:text-6xl font-inter md:leading-tight ">
-             Get your creator profile
+             Apply to become a Prototypr contributor
             </h1>
             <p className="mb-5 text-[#335f8b] md:leading-[32px] leading-[28px] text-[16px] md:text-[18px] font-inter md:pr-6">
-              Prototypr content is open to all, but only invited members can create profiles and posts. 
-              You can get an invite from current members or submit an application form to join as a creator.
+              Prototypr content is open to all, but only invited members can currently get a profile and create posts. 
+              You can get an invite from existing members or submit an application form.
             </p>
 
             <CTAButton />

diff --git a/components/landing-pages/components/network/networkCTA.js b/components/landing-pages/components/network/networkCTA.js
@@ -11,7 +11,7 @@ const NetworkCTA = () => {
         <div className=" max-w-6xl mx-auto flex flex-col justify-center items-center  h-full">
           <div className="w-full flex flex-col space-y-4 items-center pt-32 pb-10 z-[1]">
             <h4 className="md:text-[60px] text-[40px] font-inter text-center font-semibold text-[#0F1F40] leading-[40px] md:leading-[70px] max-w-lg">
-            Let's rewrite the story of the web
+            Become a contributor
             </h4>
             <CTAButton />
           </div>

diff --git a/components/landing-pages/components/network/pitch.js b/components/landing-pages/components/network/pitch.js
@@ -25,7 +25,7 @@ const PitchSection = () => {
                   {/* Thoughts into words. Words into designs. Designs into the hands of users. */}
                 </h2>
                 <p className="text-white/80 max-w-lg text-[18px] font-inter leading-[32px]">
-                 Prototypr is a place for genuine stories from real people. Having been unindated with spam profiles and AI-generated posts, we're now invite-only 
+                 Prototypr is a place for genuine stories from real people. Having been unindated with spam profiles and AI-generated posts, we're currently invite-only 
                  to maintain high quality content.
                 </p>
                 <div className="flex flex-row -ml-2 md:-ml-5 flex-wrap max-w-3xl mt-5">

diff --git a/components/landing-pages/components/web-mon/SunsetNotice.js b/components/landing-pages/components/web-mon/SunsetNotice.js
@@ -0,0 +1,45 @@
+import Container from "@/components/container"
+
+const SunsetNotice = () =>{
+    return(
+        <div className="w-full flex justify-center relative ">
+        <div className="fixed bottom-0 w-full md:bottom-3 shadow-md overflow- border border-indigo-900/10 bg-yellow-300 md:w-[80%] md:max-w-[1120px] md:rounded-2xl h-auto z-[100]">
+              <img src={`/static/images/robo2.png`} className="w-[76px] md:w-[104px] drop-shadow-xl z-40 ml-4 md:ml-0 left-0 absolute bottom-0 -mb-[15px] md:-mb-[25px] -scale-x-100"/>
+          <Container  maxWidth="max-w-[1320px] z-30 relative overflow-hidden">
+              <div  className="absolute top-0 left-0 w-full h-full md:rounded-2xl -ml-0.5 -mt-0.5" />
+
+            <div className="w-full z-10 relative px-1 py-3  flex flex-col gap-4 md:gap-3 md:flex-row justify-between">
+              <div className="hidden md:flex flex-row justify-center items-center gap-4 md:gap-4">
+                <div>
+                </div>
+                <div className="flex flex-col md:ml-[80px]">
+                  <h1 className="text-xl font-semibold text-black/00">
+                    This service currently unavailable
+                  </h1>
+                  <p className="text-lg text-black/80">
+                    Coil was discontinued so this initiative is on hold. Learn more at <a href="https://interledger.org/?ref=prototypr" className="underline font-medium">Interledger</a>.
+                  </p>
+                </div>
+              </div>
+              {/* <div className="my-auto w-full md:w-[fit-content] md:block flex justify-center md:justify-end">
+                    <Link className="w-[fit-content]" href="/onboard">
+                        <Button className="mr-3 md:w-auto p-0 py-[0.05rem] px-[1rem] border-blue-800 text-blue-800" variant={"confirmRoundedGhost"}>
+                            {buttonText?buttonText:`Log in`}
+                        </Button>
+                    </Link>
+                  <Link className="w-[fit-content]" href="/onboard">
+                      <Button className="py-1 md:w-auto p-0 py-[0.1rem] bg-blue-600 px-[1rem]" variant={"confirmRounded"}>
+                          {buttonText?buttonText:`Sign up`}
+                      </Button>
+                  </Link>
+              </div> */}
+              {/* <button className="px-7 h-10 md:h-auto text-sm text-black shadow-sm py-0 rounded-full bg-white">
+                Sign up
+              </button> */}
+            </div>
+          </Container>
+        </div>
+      </div>
+    )
+}
+export default SunsetNotice
diff --git a/components/landing-pages/components/web-mon/hero.js b/components/landing-pages/components/web-mon/hero.js
@@ -7,14 +7,14 @@ const Hero = () => {
           A new way for creators to earn
           </h1>
           <p className="mb-4 text-[#1f322b] text-[18px] leading-[34px] max-w-lg font-medium font-inter">
-          With our Web-Monetized platform, you can earn tips and micropayments directly from readers, thanks to payment providers like <span className="font-bold text-black">Coil</span>.
+          With our Web-Monetized platform, you can earn tips and micropayments directly from readers, thanks to payment providers like Coil (now sunset).
           {/* Micro payments are a new and exciting way to earn money with your website. With web monetization you can offer premium content to your users, as well as set up micro payment systems. When your website visitors use these payment methods, they aren't charged any extra fees. This is great if you want to offer subscriptions or premium content on demand. */}
             {/* Web Monetization provides an open, native, efficient, and automatic way to compensate creators 
             through payment providers like <span className="font-bold text-black">Coil</span>. Finally, an alternative to intrusive ads. */}
           </p>
           <div className="my-4">
             <a
-              href="https://coil.com/about?ref=prototypr.io"
+              href="https://coil.com/?ref=prototypr.io"
               target={"_blank"}
               className="px-10 py-5 bg-black rounded-full text-sm text-white "
             >

diff --git a/components/sign-in/LoginForm.jsx b/components/sign-in/LoginForm.jsx
@@ -62,7 +62,7 @@ return(
     </p>
     <p className="my-4 mb-8">
 
-    Prototypr content is open to all, but only invited members can create posts. Get an invite from current members or submit an application form to <span className="text-underline">join as a creator</span>.
+    Prototypr content is open to all, but only invited members can create posts. Get an invite from current members or submit an <Link href="/apply"><span className="text-blue-600">application</span></Link> form to <span className="text-underline">join as a creator</span>.
     </p>
     {/* <div className="max-w-[90%] md:max-w-[340px] flex flex-col"> */}
     {showInputForm == false ? (
@@ -188,10 +188,15 @@ return(
                       onClick={toggleSignIn}
                       className="text-primary-400 cursor-pointer"
                     >
-                      {isSignUp ? " Sign in." : " Sign up"}
-                    </a>
+                      {isSignUp ? " Sign in" : " Sign up"}
+                    </a>.
                   </div>
                 </div>
+
+                {/* {isSignUp
+                        ? 
+                        <div className="mt-2 text-center text-sm text-gray-700">Need a an invite? <Link href="/apply"><span className="text-blue-500">Apply here</span></Link>.</div>
+                        :null} */}
   </div>
 )
 
@@ -374,8 +379,8 @@ const ProviderForm = ({ isSignUp, title = "Sign up", inviteCode, toggleSignIn })
                       onClick={toggleSignIn}
                       className="text-primary-400 cursor-pointer"
                     >
-                      {isSignUp ? " Sign in." : " Sign up"}
-                    </a>
+                      {isSignUp ? " Sign in" : " Sign up"}
+                    </a>.
                   </div>
                 </div>
       </div>

diff --git a/components/sign-in/LoginSide.jsx b/components/sign-in/LoginSide.jsx
@@ -3,23 +3,12 @@ const LoginSide = ({ user, title, showArrow }) => {
   return (
     <div className="flex flex-col w-full h-full relative">
 
-
-       {/* <img src='/static/images/toolbox/squares.svg' className="opacity-20 absolute w-full h-full object-cover top-0 left-0"/> */}
       <div className="z-10 relative max-w-[420px] -mt-4 mx-auto flex flex-col h-full justify-center">
         <div className="relative">
         {showArrow!==false?<svg className="absolute left-0 -scale-x-100 -ml-[18vw] bottom-0 -mb-[240px]"width="360" height="323" viewBox="0 0 360 323" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M341.516 142.568C342.382 141.155 344.229 140.711 345.641 141.576C347.054 142.442 347.499 144.288 346.633 145.701L341.516 142.568ZM155.689 135L155.559 132.003L155.56 132.003L155.689 135ZM194.721 237.947L192.649 235.778L192.649 235.778L194.721 237.947ZM27.6653 119.144C27.5385 117.492 28.7748 116.05 30.4268 115.923C32.0788 115.796 33.5209 117.033 33.6477 118.685L27.6653 119.144ZM352.818 167.075C353.097 168.708 352 170.259 350.367 170.538C348.734 170.818 347.184 169.721 346.904 168.088L352.818 167.075ZM345.502 142.138L345.376 139.141C346.884 139.078 348.204 140.144 348.458 141.632L345.502 142.138ZM319.376 145.693C317.723 145.591 316.465 144.167 316.568 142.513C316.67 140.86 318.094 139.602 319.748 139.705L319.376 145.693ZM344.075 144.135C346.633 145.701 346.633 145.703 346.632 145.704C346.631 145.705 346.63 145.707 346.628 145.709C346.626 145.713 346.622 145.719 346.618 145.727C346.609 145.741 346.596 145.762 346.579 145.789C346.546 145.843 346.497 145.922 346.433 146.024C346.305 146.228 346.116 146.527 345.868 146.914C345.372 147.688 344.639 148.813 343.681 150.235C341.764 153.079 338.945 157.11 335.318 161.891C328.069 171.446 317.567 184.027 304.568 196.095C278.707 220.107 242.254 242.724 201.587 234.031L202.841 228.164C240.527 236.22 275.005 215.356 300.486 191.698C313.158 179.933 323.43 167.633 330.538 158.265C334.089 153.584 336.843 149.645 338.705 146.882C339.636 145.5 340.344 144.414 340.817 143.676C341.053 143.308 341.23 143.027 341.348 142.84C341.406 142.746 341.45 142.676 341.478 142.631C341.492 142.608 341.502 142.591 341.509 142.581C341.512 142.575 341.514 142.572 341.515 142.57C341.516 142.569 341.516 142.568 341.517 142.568C341.517 142.568 341.516 142.568 344.075 144.135ZM201.587 234.031C161.406 225.442 140.343 201.031 133.935 178.13C130.75 166.748 131.165 155.626 134.847 147.094C138.569 138.47 145.709 132.431 155.559 132.003L155.819 137.998C148.675 138.308 143.34 142.556 140.356 149.471C137.332 156.478 136.812 166.148 139.713 176.513C145.475 197.103 164.669 220.004 202.841 228.164L201.587 234.031ZM155.56 132.003C164.977 131.597 175.008 135.675 183.937 142.307C192.906 148.97 201.033 158.401 206.67 169.197C217.963 190.825 219.443 218.488 196.793 240.117L192.649 235.778C212.832 216.504 211.787 191.96 201.352 171.974C196.125 161.964 188.587 153.236 180.359 147.124C172.09 140.982 163.392 137.671 155.818 137.998L155.56 132.003ZM196.793 240.117C185.254 251.138 169.106 254.764 151.7 252.797C134.298 250.831 115.357 243.264 97.6766 231.503C62.3528 208.004 31.3613 167.269 27.6653 119.144L33.6477 118.685C37.1683 164.525 66.8 203.756 101 226.507C118.081 237.87 136.127 244.999 152.374 246.835C168.617 248.671 182.779 245.205 192.649 235.778L196.793 240.117ZM346.904 168.088L342.545 142.645L348.458 141.632L352.818 167.075L346.904 168.088ZM345.502 142.138C345.627 145.136 345.627 145.136 345.627 145.136C345.627 145.136 345.626 145.136 345.626 145.136C345.625 145.136 345.624 145.136 345.623 145.136C345.62 145.136 345.617 145.136 345.611 145.136C345.601 145.137 345.586 145.137 345.566 145.138C345.526 145.14 345.467 145.142 345.389 145.146C345.234 145.152 345.006 145.161 344.715 145.173C344.133 145.196 343.295 145.229 342.275 145.268C340.234 145.345 337.459 145.445 334.524 145.535C328.738 145.713 322.083 145.861 319.376 145.693L319.748 139.705C322.108 139.851 328.423 139.719 334.34 139.538C337.256 139.448 340.016 139.349 342.048 139.272C343.063 139.234 343.896 139.201 344.475 139.178C344.764 139.166 344.99 139.157 345.143 139.151C345.219 139.148 345.278 139.145 345.317 139.143C345.337 139.143 345.352 139.142 345.361 139.142C345.366 139.141 345.37 139.141 345.372 139.141C345.374 139.141 345.375 139.141 345.375 139.141C345.375 139.141 345.376 139.141 345.376 139.141C345.376 139.141 345.376 139.141 345.502 142.138Z" fill="#3EA7F3"/>
 </svg>:null}
-          {/* <a href="/"> */}
               <Sparkle size={44}/>
-            {/* <div className="w-16 h-16 p-4 bg-white rounded-2xl">
-              <img
-                src={`/static/images/logo-small.svg`}
-                data-gumlet="false"
-                alt="Prototypr Logo"
-              />
-            </div> */}
-          {/* </a> */}
           <h1 className="text-4xl leading-snug text-white font-medium font-inter mt-4">
           {title?title: 'From concept to creation, start here.'}
           </h1>

diff --git a/components/v4/layout/SingleFancyCard.js b/components/v4/layout/SingleFancyCard.js
@@ -1,6 +1,6 @@
 const post = {
     image:'/static/images/jobs1.png',
-    slug:'/network',
+    slug:'/apply',
     class:'bg-blue-800',
     title:'Post an article',
     description:'Join the Prototypr Discord community and write with us.'

diff --git a/components/v4/layout/TwoColumnCardsB.js b/components/v4/layout/TwoColumnCardsB.js
@@ -2,13 +2,13 @@ import Link from "next/link";
 
 const dummyData = [{
 image:'/static/images/jobs.svg',
-slug:'/network',
+slug:'/apply',
 class:'bg-gray-50',
 title:'Post an article',
 description:'Share your story with us and get featured in the newsletter.'
 },
 {image:'/static/images/botty.svg',
-slug:'/toolbox',
+slug:'/apply',
 class:'bg-gray-50',
 title:'Get your tool featured',
 description:'List your tool in the Prototypr Toolbox and claim your page.'}