Fix/landing link and add change and page (#254)

* fix link + text + start add page and description * link + typo + description * fix icon and typo * comment beta test link * fix typos * typo * fix
keep-starknet-strange · Jul 24, 2024 · e471854 · e471854
1 parent 9f0d974
commit e471854
Show file tree

Hide file tree

Showing 14 changed files with 215 additions and 44 deletions.
diff --git a/website/public/assets/home-page.png b/website/public/assets/home-page.png
diff --git a/website/public/assets/telegram.svg b/website/public/assets/telegram.svg
diff --git a/website/public/assets/telegramIcon.svg b/website/public/assets/telegramIcon.svg
diff --git a/website/src/app/components/ContributeSection.tsx b/website/src/app/components/ContributeSection.tsx
@@ -23,13 +23,16 @@ export function ContributeSection() {
           Contribute to Joyboy{' '}
         </h3>
         <p className="desktop:text-[24px] text-sm mb-10 w-[80%] desktop:w-[623px]  text-center">
-          Joyboy is available on iOS and Android. It’s free and open source.
+          Joyboy is available on iOS, Web and Android. It’s free and open source.
         </p>
-        <button className="py-[15px] desktop:px-[42px] px-[24px] bg-white rounded-[5px] flex gap-x-[10px] items-center text-black">
+        <a 
+        href='https://github.com/keep-starknet-strange/joyboy'
+        target="_blank"
+        className="py-[15px] desktop:px-[42px] px-[24px] bg-white rounded-[5px] flex gap-x-[10px] items-center text-black">
           <img src="/assets/githubLogoDark.svg" alt="" />
           See all issues on Github
           <img src="/assets/go-to.svg" alt="" />
-        </button>
+        </a>
       </motion.div>
     </div>
   );

diff --git a/website/src/app/components/DescriptionSection.tsx b/website/src/app/components/DescriptionSection.tsx
@@ -37,17 +37,17 @@ export function DescriptionSection() {
           <Feature
             img="/assets/noAdIcon.svg"
             title="No Advertisement"
-            description="No registration required. Use passkeys to log in and sign messages securely, ensuring your interactions remain private and effortless."
+            description="No intrusive advertisements. Your privacy is preserved and the Data is owned by you, not the protocol."
           />
           <Feature
             img="/assets/money-send.svg"
             title="Social Payment"
-            description="No registration required. Use passkeys to log in and sign messages securely, ensuring your interactions remain private and effortless."
+            description="Tip, pay, and gift your Friends in a Decentralized manner, bring with you a Social graph for Bitcoin & ETH."
           />
-          <Feature
-            img="/assets/key.svg"
-            title="No Registration Required"
-            description="No registration required. Use passkeys to log in and sign messages securely, ensuring your interactions remain private and effortless."
+            <Feature
+            img="/assets/money-send.svg"
+            title="Freedom vision"
+            description="Community project that aims to bring the Freedom and Integrity world. Own your Digital Identity & Money, Content, Data."
           />
         </motion.div>
       </div>

diff --git a/website/src/app/components/DownloadSection.tsx b/website/src/app/components/DownloadSection.tsx
@@ -25,6 +25,7 @@ export function DownloadSection() {
         <p className="text-sm desktop:text-[24px] desktop:leading-7 mb-6 tab:mb-[47px] desktop:w-[623px] w-[80%]">
           Joyboy is available on Android, iOS, iPadOS and macOS. It’s free and open source.
         </p>
+        <p>Coming soon</p>
         <div className="flex items-center gap-x-5">
           <button>
             <img src="/assets/appStoreBtn.svg" className="w-[100px] desktop:w-auto" alt="" />

diff --git a/website/src/app/components/Faq.tsx b/website/src/app/components/Faq.tsx
@@ -9,10 +9,10 @@ export function Faq() {
         Frequently asked Questions
       </h2>
       <div className="flex flex-col gap-y-[24px] items-center w-full">
-        <FaqBar question="How do i Join Joyboy?" answer="Joyboy" />
-        <FaqBar question="What kind of contents can i post?" answer="" />
-        <FaqBar question="How can i contribute to the Joyboy project?" answer="" />
-        <FaqBar question="How can I jointhe Joyboy community?" answer="" />
+        <FaqBar question="How do i Join Joyboy?" answer="Visit our mobile app and website. Join the Joyboy Community on Telegram, debate, discuss, and contribute to the Freedom vision." />
+        <FaqBar question="What kind of contents can i post?" answer="Whatever, it's a Censorship resistant Social Network and Graph. Express yourself, discuss, debate, see others content based on your interests and friends!" />
+        <FaqBar question="How can i contribute to the Joyboy project?" answer="Join us on Joyboy and Telegram! You can contribute in different way: as Content creator, Marketer, Dev or just a friend, it's a community project that collaborate for our vision!" />
+        <FaqBar question="How can I join the Joyboy community?" answer="It's a Freedom place. Everyone can join and use our Social network, and be a part of the community and contributors!" />
       </div>
     </div>
   );

diff --git a/website/src/app/components/Footer.tsx b/website/src/app/components/Footer.tsx
@@ -19,21 +19,31 @@ export function Footer() {
         <div className="flex gap-x-[40px] tab:gap-x-[122px] text-[14px] leading-[21px] font-normal pt-[46px]">
           <ul className="flex flex-col gap-y-10">
             <li className="font-bold text-base leading-6">Company</li>
-            <li>Sobre Nosotros</li>
-            <li>Soluciones</li>
-            <li>Insights</li>
+            <li>DAO and Community owned</li>
+            <li>Solutions</li>
           </ul>
           <ul className="flex flex-col gap-y-10">
             <li className="font-bold text-base leading-6">Product</li>
-            <li>Contratar Talento</li>
-            <li>Desarrollar Talento</li>
-            <li>Herramientas de Gamificación</li>
+            <li>Nostr client</li>
+            <li>SocialFi features</li>
           </ul>
         </div>
         <div className="flex items-center gap-x-[14px] mt-5 tab:mt-0 self-center tab:self-end">
-          <img src="/assets/facebookIcon.svg" alt="" />
-          <img src="/assets/linkedinIcon.svg" alt="" />
-          <img src="/assets/twitterIcon.svg" alt="" />
+          <a
+            href="https://x.com/joyboystarknet"
+            target="_blank">
+            <img src="/assets/twitterIcon.svg" alt="Joyboy Community Twitter / X" />
+          </a>
+          {/* <a
+            href="https://t.me/JoyboyStarknet"
+            target="_blank">
+            <img src="/assets/telegramIcon.svg" alt="" />
+          </a> */}
+          <a
+            href="https://t.me/JoyboyStarknet"
+            target="_blank">
+            <img src="/assets/telegramIcon.svg" alt="Joyboy Community Telegram " />
+          </a>
         </div>
       </div>
       <h6 className="text-xs tab:text-sm leading-[14px] font-normal text-center mt-4">

diff --git a/website/src/app/components/HeroSection.tsx b/website/src/app/components/HeroSection.tsx
@@ -31,14 +31,18 @@ export function HeroSection() {
         <p className="desktop:text-[24px] text-base leading-8 mb-8">
           Decentralized social built with Nostr and powered by Starknet account abstraction.
         </p>
-        <div className="flex desktop:flex-row flex-col items-center gap-y-4 gap-x-6 text-[18px] leading-[21px]">
+        {/* <div className="flex desktop:flex-row flex-col items-center gap-y-4 gap-x-6 text-[18px] leading-[21px]">
           <button className="desktop:py-5 text-sm desktop:text-base py-3 px-4 bg-black w-[200px] border-white border-[1px] border-solid desktop:border-none">
-            Sign up
+            <a href="https://app.joyboy.community" target="_blank">
+              Sign up
+            </a>
           </button>
           <button className="desktop:py-5 text-sm text-black desktop:text-base py-3 px-4 bg-white w-[200px]">
-            Download App
+            <a href="https://app.joyboy.community" target="_blank">
+              Download App
+            </a>
           </button>
-        </div>
+        </div> */}
       </motion.div>
       <motion.img
         src="/assets/joyboyMascot.png"

diff --git a/website/src/app/components/MobileNavBar.tsx b/website/src/app/components/MobileNavBar.tsx
@@ -53,12 +53,12 @@ export function MobileNavBar({setToggle, toggle}: Props) {
             <li className="">Features</li>
             <li className="">Ecosystem</li>
             <li className="">Developers</li>
-            <li>
-              <button className="py-[12px] w-[145px] bg-[#8DAEF1]">Sign up</button>
+            {/* <li>
+              <button className="py-[12px] w-[145px] bg-[#8DAEF1]"> <a href="https://app.joyboy.community" target='_blank'> Sign up</a></button>
             </li>
             <li>
-              <button className="py-[12px] w-[145px] bg-white text-black">Log in</button>
-            </li>
+              <button className="py-[12px] w-[145px] bg-white text-black"><a  href="https://app.joyboy.community" target='_blank'> Log in </a> </button>
+            </li> */}
           </ul>
         </motion.div>
       </div>

diff --git a/website/src/app/components/Navbar.tsx b/website/src/app/components/Navbar.tsx
@@ -1,29 +1,32 @@
 'use client';
 
-import React, {useState} from 'react';
-import {createPortal} from 'react-dom';
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
 
-import {MobileNavBar} from './MobileNavBar';
-import {NavigationLinks} from './NavigationLinks';
+import { MobileNavBar } from './MobileNavBar';
+import { NavigationLinks } from './NavigationLinks';
+import Link from 'next/link';
 
 export function Navbar() {
   const [toggleNav, setToggleNav] = useState(false);
   return (
     <div className="desktop:py-[26px] py-3 px-6 desktop:px-[120px] bg-black flex justify-between items-center">
       <div className="flex items-center gap-x-[10px] text">
         <img src="/assets/logo.svg" className="desktop:h-[52px] w-9 h-9 desktop:w-[52px]" alt="" />
-        <h5 className="desktop:text-2xl text-lg leading-7 font-bold text-white">Joyboy</h5>
+        <Link href="/">
+          <h5 className="desktop:text-2xl text-lg leading-7 font-bold text-white">Joyboy</h5>
+        </Link>
       </div>
       <NavigationLinks />
-      <div className="desktop:flex hidden items-center gap-x-4 font-bold text-sm leading-[16px]">
-        <button className="py-[15px] px-[48px] bg-[#8DAEF1]">Sign up</button>
-        <button className="py-[15px] px-[48px] bg-white">Log in</button>
-      </div>
+      {/* <div className="desktop:flex hidden items-center gap-x-4 font-bold text-sm leading-[16px]">
+        <button className="py-[15px] px-[48px] bg-[#8DAEF1]"><a href="https://app.joyboy.community" target='_blank'>Sign up</a></button>
+        <button className="py-[15px] px-[48px] bg-white"><a href="https://app.joyboy.community" target='_blank'>Log in</a></button>
+      </div> */}
       <button
         className="flex desktop:hidden"
         onClick={() => {
           setToggleNav(true);
-          window.scrollTo({top: 0, left: 0, behavior: 'smooth'});
+          window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
         }}
       >
         <img src="assets/hamburger-icon.svg" className="w-6 h-6" alt="" />

diff --git a/website/src/app/components/NavigationLinks.tsx b/website/src/app/components/NavigationLinks.tsx
@@ -1,12 +1,13 @@
 'use client';
+import Link from "next/link";
+
 
 export function NavigationLinks() {
   return (
     <ul className="items-center gap-x-[32px] font-normal text-lg leading-[21px] text-white hidden desktop:flex">
-      <li>Servers</li>
-      <li>Features</li>
-      <li>Ecosystem</li>
-      <li>Developers</li>
+      <li><Link href="/features">Features </Link></li>
+      {/* <li>Ecosystem</li> */}
+      {/* <li>Developers</li> */}
     </ul>
   );
 }