Integrations page, navigation tweaks, fix github links

README.md

@@ -11,7 +11,7 @@
 
 <p align="center">
   <a href="https://pr.new/ethereumfollowprotocol/app"><img src="https://developer.stackblitz.com/img/start_pr_dark_small.svg" alt="Start new PR in StackBlitz Codeflow" /></a>
-  <a href="https://discord.ethfollow.xyz"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord" alt="discord chat" /></a>
+  <a href="https://discord.com/invite/ZUyG3mSXFD"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord" alt="discord chat" /></a>
   <a href="https://x.com/efp"><img src="https://img.shields.io/twitter/follow/efp?label=%40efp&style=social&link=https%3A%2F%2Fx.com%2Fefp" alt="x account" /></a>
 </p>
 

next.config.mjs

@@ -139,7 +139,7 @@ const nextConfig = {
 		},
 		{
 			source: "/(chat|discord)",
-			destination: "https://discord.ethfollow.xyz",
+			destination: "https://discord.com/invite/ZUyG3mSXFD",
 			permanent: true,
 		},
 	],

public/locales/en/translations.json

@@ -19,6 +19,9 @@
   "sponsors": "Supported by grants from:",
   "support": "Support",
 
+  "integrate efp": "Integrate EFP",
+  "integrate efp description": "EFP is an onchain social graph protocol for Ethereum accounts, a primitive of the Ethereum identity stack designed to complement ENS and Sign-in with Ethereum.",
+
   "profile": "My Profile",
   "profile error": "User doesn't exist",
   "connect to see more": "Connect your wallet to start swiping!",

src/app/integrations/components/guide.tsx

@@ -1,16 +1,66 @@
 'use client'
 
+import Link from 'next/link'
+import { AiOutlineApi } from 'react-icons/ai'
 import { useTranslation } from 'react-i18next'
+import { BsBook, BsDiscord, BsGithub } from 'react-icons/bs'
+import { cn } from '#/lib/utilities'
+
+const RESOURCES = [
+  {
+    name: 'Docs',
+    icon: <BsBook />,
+    href: 'https://docs.ethfollow.xyz',
+    className: 'bg-followButton/90 text-darkGrey'
+  },
+  {
+    name: 'API',
+    icon: <AiOutlineApi />,
+    href: 'https://docs.ethfollow.xyz/api/',
+    className: 'bg-[#FFC7E9] text-darkGrey'
+  },
+  {
+    name: 'Discord',
+    icon: <BsDiscord />,
+    href: 'https://discord.com/invite/ZUyG3mSXFD',
+    className: 'bg-[#7289da] text-white'
+  },
+  {
+    name: 'Github',
+    icon: <BsGithub />,
+    href: 'https://github.com/ethfollow',
+    className: 'bg-darkGrey text-white'
+  }
+]
 
 const Guide = () => {
   const { t } = useTranslation()
 
   return (
-    <div className='glass-card flex flex-col p-14 rounded-xl border-[3px] w-full content-center items-center gap-6 max-w-[1370px] border-grey'>
-      <h2 className='text-3xl font-bold text-center '>{t('Integrations guide')}</h2>
-      <p className='text-lg text-text-neutral text-center text-text/80'>
-        {t('Integrations guide description')}
+    <div className='glass-card flex flex-col px-4 py-8 sm:p-6 md:p-8 lg:p-10 items-center xl:items-start rounded-xl border-[3px] w-full max-w-[700px] h-fit gap-4 border-grey'>
+      <h2 className='text-3xl xxs:text-4xl font-bold text-center xl:text-start'>
+        {t('integrate efp')}
+      </h2>
+      <p className='xxs:text-lg text-text/80 text-center xl:text-start'>
+        {t('integrate efp description')}
       </p>
+      <div className='flex flex-row flex-wrap justify-center items-center w-full xl:justify-start mt-4 gap-4 md:gap-6'>
+        {RESOURCES.map(resource => (
+          <Link
+            key={resource.name}
+            href={resource.href}
+            target='_blank'
+            rel='noopener noreferrer'
+            className={cn(
+              'flex flex-row w-36 xxs:w-40 sm:w-48 md:w-56 lg:w-64 rounded-xl hover:scale-105 font-semibold transition-transform p-3 xxs:p-4 lg:p-6 text-2xl xxs:text-3xl md:text-4xl lg:text-5xl md:h-24 lg:h-28 justify-between items-center text-text-neutral text-text/80',
+              resource.className
+            )}
+          >
+            <p className='text-xl xxs:text-2xl md:text-3xl lg:text-4xl'>{resource.name}</p>
+            {resource.icon}
+          </Link>
+        ))}
+      </div>
     </div>
   )
 }

src/app/integrations/components/live-intergrations.tsx

@@ -3,24 +3,20 @@
 import Link from 'next/link'
 import Image from 'next/image'
 import { useTranslation } from 'react-i18next'
-
 import { INTEGRATIONS } from '#/lib/constants/integrations'
-import { PrimaryButton } from '#/components/buttons/primary-button'
 
 const LiveIntegrations = () => {
   const { t } = useTranslation()
 
   return (
-    <div className='glass-card border-[3px] flex-col flex gap-12 items-center rounded-xl w-full p-10 max-w-[750px] border-grey'>
-      <div className='flex flex-col gap-6 items-center h-full w-full'>
-        <h1 className='text-4xl font-bold'>{t('integrations')}</h1>
-        <p className='text-lg text-center font-medium text-text/70'>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptas, et numquam
-          deserunt itaque ipsa. Inventore velit ex quo doloremque nobis earum, iusto placeat nulla
-          repellendus, veritatis quos non sapiente?
-        </p>
+    <div className='glass-card border-[3px] flex-col flex gap-8 sm:gap-10 md:gap-12 items-center xl:items-start rounded-xl w-full px-6 md:px-8 py-8 md:py-10 max-w-[700px] border-grey'>
+      <div className='flex gap-6 px-2 items-center h-full'>
+        <h1 className='text-3xl sm:text-4xl font-bold'>{t('integrations')}</h1>
+        <div className='flex flex-col gap-2 font-bold rounded-full bg-grey text-2xl sm:text-3xl px-4 sm:px-5 py-1'>
+          {INTEGRATIONS.length}
+        </div>
       </div>
-      <div className='flex flex-row w-full items-center justify-center flex-wrap gap-4'>
+      <div className='flex flex-row w-full items-center justify-evenly sm:justify-center xl:justify-start flex-wrap gap-4'>
         {INTEGRATIONS.map(integration => (
           <div
             key={integration.name}
@@ -48,13 +44,6 @@ const LiveIntegrations = () => {
           </div>
         ))}
       </div>
-      <PrimaryButton
-        label='Integrate Yourself'
-        className='w-fit text-xl px-6'
-        onClick={() => {
-          window.open('https://ethfollow.xyz/integrations', '_blank')
-        }}
-      />
     </div>
   )
 }

src/app/integrations/page.tsx

@@ -23,9 +23,9 @@ export const metadata: Metadata = {
 
 const Integrations = () => {
   return (
-    <main className='flex gap-4 px-4 md:px-8 lg:px-16 flex-col items-center relative pt-[6.75rem] sm:pt-[7.75rem]'>
-      <LiveIntegrations />
+    <main className='flex flex-row pb-28 lg:pb-10 gap-4 px-4 md:px-8 w-full justify-center flex-wrap relative pt-[6.75rem] sm:pt-[7.75rem]'>
       <Guide />
+      <LiveIntegrations />
     </main>
   )
 }

src/components/navigation/desktop.tsx

@@ -27,26 +27,14 @@ const Desktop: React.FC = () => {
             className='hidden dark:sm:block sm:max-w-[120px] select-none hover:scale-110 transition-transform'
             alt={'Ethereum Follow Protocol Logo'}
           />
-          {/* <Image
-            src={FullLogoHalloween}
-            priority={true}
-            className="hidden halloween:sm:block sm:max-w-[120px] select-none hover:scale-110 transition-transform"
-            alt={"Ethereum Follow Protocol Logo"}
-          /> */}
           <Image
             src={Logo}
             priority={true}
             className='w-[56px] halloween:hidden sm:hidden select-none hover:scale-110 transition-transform'
             alt='Ethereum Follow Protocol Logo'
           />
-          {/* <Image
-            src={LogoHalloween}
-            priority={true}
-            className="w-[56px] hidden halloween:block halloween:sm:hidden select-none hover:scale-110 transition-transform"
-            alt="Ethereum Follow Protocol Logo"
-          /> */}
         </Link>
-        <Search size='w-fit max-w-[200px] lg:w-5/6 xl:w-full xxs:max-w-[350px]' />
+        <Search size='w-fit max-w-[200px] lg:max-w-5/6 xl:w-3/5 2xl:w-full xxs:max-w-[350px]' />
       </div>
       <div className='items-center gap-1.5 hidden absolute left-1/2 -translate-x-36 xl:-translate-x-[153px] lg:flex'>
         <NavItems />

src/components/search/index.tsx

@@ -196,10 +196,10 @@ export function Search({
           )}
         </div>
       </div>
-      <div className={` relative z-50 ${isEditor ? 'hidden' : 'xl:hidden block'}`}>
+      <div className={`relative w-fit z-50 ${isEditor ? 'hidden' : 'xl:hidden block'}`}>
         <FiSearch
           onClick={() => setDialogOpen(true)}
-          className='text-3xl hover:scale-125 cursor-pointer transition-all hover:opacity-65'
+          className='text-3xl hover:scale-125 w-fit cursor-pointer transition-all hover:opacity-65'
           aria-hidden='true'
         />
         <div