fix: website build errors (#292)

website/src/app/components/ContributeSection.tsx

@@ -25,10 +25,11 @@ export function ContributeSection() {
  <p className="desktop:text-[24px] text-sm mb-10 w-[80%] desktop:w-[623px] text-center">
  Joyboy is available on iOS, Web and Android. It’s free and open source.
  </p>
- <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">
+ <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="" />

website/src/app/components/DescriptionSection.tsx

@@ -44,7 +44,7 @@ export function DescriptionSection() {
  title="Social Payment"
  description="Tip, pay, and gift your Friends in a Decentralized manner, bring with you a Social graph for Bitcoin & ETH."
  />
-  <Feature
+ <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."

website/src/app/components/Faq.tsx

@@ -9,10 +9,22 @@ 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="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!" />
+ <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>
  );

website/src/app/components/Footer.tsx

@@ -29,19 +29,15 @@ export function Footer() {
  </ul>
  </div>
  <div className="flex items-center gap-x-[14px] mt-5 tab:mt-0 self-center tab:self-end">
- <a
- href="https://x.com/joyboystarknet"
- target="_blank">
+ <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">
+ <a href="https://t.me/JoyboyStarknet" target="_blank">
  <img src="/assets/telegramIcon.svg" alt="Joyboy Community Telegram " />
  </a>
  </div>

website/src/app/components/Navbar.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import React, { useState } from 'react';
-import { createPortal } from 'react-dom';
-
-import { MobileNavBar } from './MobileNavBar';
-import { NavigationLinks } from './NavigationLinks';
 import Link from 'next/link';
+import React, {useState} from 'react';
+import {createPortal} from 'react-dom';
+
+import {MobileNavBar} from './MobileNavBar';
+import {NavigationLinks} from './NavigationLinks';
 
 export function Navbar() {
  const [toggleNav, setToggleNav] = useState(false);
@@ -26,7 +26,7 @@ export function Navbar() {
  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="" />

website/src/app/components/NavigationLinks.tsx

@@ -1,11 +1,12 @@
 'use client';
-import Link from "next/link";
-
+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><Link href="/features">Features </Link></li>
+ <li>
+ <Link href="/features">Features </Link>
+ </li>
  {/* <li>Ecosystem</li> */}
  {/* <li>Developers</li> */}
  </ul>

website/src/app/components/features/DescriptionFeatures.tsx

@@ -1,32 +1,31 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import {motion} from 'framer-motion';
 
-import { Feature } from '../Feature';
+import {Feature} from '../Feature';
 
 export function DescriptionFeatures() {
  return (
  <div className="flex flex-col items-center text-center text-white px-6 desktop:px-[120px] bg-gradientBg bg-no-repeat bg-contain">
  <div className="desktop:py-[112px] py-[50px] flex flex-col items-center desktop:gap-y-[72px] gap-y-[36px]">
  <motion.div
- initial={{ opacity: 0 }}
- whileInView={{ opacity: 1 }}
- transition={{ ease: 'easeOut', duration: 1 }}
+ initial={{opacity: 0}}
+ whileInView={{opacity: 1}}
+ transition={{ease: 'easeOut', duration: 1}}
  className="max-w-[951px] mb-6 tab:mb-[72px]"
  >
  <h1 className="text-xl tab:text-[82px] leading-5 tab:leading-[82px] font-bold">
  Freedom and Fair place
  </h1>
  <p className="text-sm tab:text-base leading-[30px] mt-4 text-[#9D9797]">
-
- Joyboy grants you access to the social network and payment that a genuinely free and healthy society
- necessitates — and merits.
+ Joyboy grants you access to the social network and payment that a genuinely free and
+ healthy society necessitates — and merits.
  </p>
  </motion.div>
  <motion.div
- initial={{ opacity: 0 }}
- whileInView={{ opacity: 1 }}
- transition={{ ease: 'easeOut', duration: 1 }}
+ initial={{opacity: 0}}
+ whileInView={{opacity: 1}}
+ transition={{ease: 'easeOut', duration: 1}}
  className="flex desktop:flex-row flex-col items-center gap-6"
  >
  <Feature
@@ -49,33 +48,36 @@ export function DescriptionFeatures() {
  <div className="desktop:pt-[140px] pt-[50px] w-full">
  <div className="flex desktop:flex-row items-center desktop:items-start flex-col-reverse justify-center gap-y-7 gap-x-[181px] mb-[100px] desktop:mb-[280px]">
  <motion.div
- animate={{ x: [-1200, 0] }}
+ animate={{x: [-1200, 0]}}
  transition={{
- x: { duration: 1 },
+ x: {duration: 1},
  ease: 'easeOut',
  duration: 1,
  }}
  className="desktop:w-[788px] desktop:text-left text-center"
- initial={{ opacity: 0 }}
- whileInView={{ opacity: 1 }}
+ initial={{opacity: 0}}
+ whileInView={{opacity: 1}}
  >
  <h2 className="desktop:text-[82px] text-xl desktop:leading-[90px] desktop:mb-4 mb-3">
- Absolute Freedom and Ownership 
+ Absolute Freedom and Ownership
  </h2>
  <h5 className="desktop:text-[24px] text-base desktop:leading-10 text-[#9D9797] desktop:mb-6 mb-2">
- Freedom requires censorship resistance, and Nostr provides exactly that for your Identity, Money, Data & Content.
+ Freedom requires censorship resistance, and Nostr provides exactly that for your
+ Identity, Money, Data & Content.
  </h5>
  <p className="text-sm leading-7 desktop:text-base desktop:leading-10">
- JoyBoy leverages Nostr’s decentralized and open social network to give you a platform and marketplace of the Content, DeSci, Education. Let's bring positivity and integrity to the world.
+ JoyBoy leverages Nostr’s decentralized and open social network to give you a platform
+ and marketplace of the Content, DeSci, Education. Let’s bring positivity and integrity
+ to the world.
  </p>
  </motion.div>
  <motion.img
  src="/assets/home-page.png"
  alt=""
- style={{borderRadius:"15px"}}
- animate={{ x: [1200, 0] }}
+ style={{borderRadius: '15px'}}
+ animate={{x: [1200, 0]}}
  transition={{
- x: { duration: 1 },
+ x: {duration: 1},
  ease: 'easeOut',
  duration: 1,
  }}
@@ -85,24 +87,24 @@ export function DescriptionFeatures() {
  <motion.img
  src="/assets/save-your-keys.png"
  alt=""
- animate={{ x: [-1200, 0] }}
+ animate={{x: [-1200, 0]}}
  transition={{
- x: { duration: 1 },
+ x: {duration: 1},
  ease: 'easeOut',
  duration: 1,
  }}
- initial={{ opacity: 0 }}
- whileInView={{ opacity: 1 }}
+ initial={{opacity: 0}}
+ whileInView={{opacity: 1}}
  />
  <motion.div
- animate={{ x: [1200, 0] }}
+ animate={{x: [1200, 0]}}
  transition={{
- x: { duration: 1 },
+ x: {duration: 1},
  ease: 'easeOut',
  duration: 1,
  }}
- initial={{ opacity: 0 }}
- whileInView={{ opacity: 1 }}
+ initial={{opacity: 0}}
+ whileInView={{opacity: 1}}
  className="desktop:w-[788px] desktop:text-left text-center"
  >
  <h2 className="desktop:text-[82px] text-xl desktop:leading-[90px] desktop:mb-4 mb-3">

website/src/app/features/page.tsx

@@ -1,7 +1,7 @@
 import {ContributeSection} from '../components/ContributeSection';
+import {DescriptionFeatures} from '../components/features/DescriptionFeatures';
 import {Footer} from '../components/Footer';
 import {Navbar} from '../components/Navbar';
-import { DescriptionFeatures } from '../components/features/DescriptionFeatures';
 
 export default function Features() {
  return (