chore: slow transitions, layout, cls, remove motion [closed]

.github/workflows/lighthouse.yml

@@ -25,7 +25,7 @@ jobs:
         env:
           VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
         with:
-          vercel_project_id: prj_k5bYwz7n5hAUFdrWE986D91RiMbW
+          vercel_project_id: prj_Bf0q4Q5mAwPh404L36RsGFOB84Qu
           vercel_team_id: team_7PAgeqjbXkY6qdxNIEKLbVSC
       - name: Get URL
         run: echo "https://${{ steps.vercel_preview_url.outputs.preview_url }}"

README.md

@@ -29,7 +29,7 @@ SmartSale is committed to compliance and security, rigorously adhering to emergi
 
 ## Requirements
 
-- **NodeJS**: Recommended for managing server-side scripting and backend interactions. 
+- **NodeJS**: Recommended for managing server-side scripting and backend interactions.
 - **Bun**: Provides a faster runtime for JavaScript, enhancing development efficiency.
 - **Supabase CLI**: Facilitates local development and effective database schema management.
 - **Docker**: Essential for creating isolated environments, ensuring consistent operation across different setups.
@@ -39,6 +39,7 @@ SmartSale is committed to compliance and security, rigorously adhering to emergi
 ### Backend & APIs
 
 - **Supabase**
+
   - Manages authentication and real-time data interactions.
   - **Advanced Search**: Supports complex queries necessary for managing auction data.
 
@@ -48,6 +49,7 @@ SmartSale is committed to compliance and security, rigorously adhering to emergi
 ### Frontend & Design
 
 - **Next.js 14**
+
   - Utilizes efficient routing mechanisms and server-side data fetching to provide a smooth user experience.
   - [Learn more about Next.js](https://nextjs.org/docs/routing/introduction)
 
@@ -64,6 +66,7 @@ SmartSale is committed to compliance and security, rigorously adhering to emergi
 ### DevOps and Tools
 
 - **Turbo Monorepo**
+
   - Enhances codebase management with efficient build processes and dependency caching.
   - [Learn more about Turbo Monorepo](https://turborepo.org/)
 
@@ -74,6 +77,7 @@ SmartSale is committed to compliance and security, rigorously adhering to emergi
 ### Animation
 
 - **Framer Motion for React**
+
   - Provides dynamic visual feedback through animations, enhancing user interface interactions.
   - [Learn more about Framer Motion](https://www.framer.com/motion/)
 

apps/webapp/.env.example

@@ -1,16 +1,7 @@
-# You must first activate a Billing Account here: https://platform.openai.com/account/billing/overview
-# Then get your OpenAI API Key here: https://platform.openai.com/account/api-keys
-OPENAI_API_KEY=XXXXXXXX
-
 # dub.co short link keys
 DUB_API_KEY=XXXXXXXX
 DUB_WORKSPACE_ID=XXXXXXXX
 
-# Create a GitHub OAuth app here: https://github.com/settings/applications/new
-# Authorization callback URL: https://authjs.dev/reference/core/providers_google#callback-url
-GOOGLE_CLIENT_ID=XXXXXXXX
-GOOGLE_CLIENT_SECRET=XXXXXXXX
-
 # Supabase
 DATABASE_URL="postgres://postgres.xxx:[email protected]:6543/postgres?pgbouncer=true&connection_limit=10&connect_timeout=300"
 DIRECT_URL="postgres://postgres.xxx:[email protected]:5432/postgres?pgbouncer=true&connection_limit=10&connect_timeout=300"

apps/webapp/actions.ts

@@ -1,6 +1,6 @@
 'use server'
 
-import { registerAddressSchema } from '@/lib/validators'
+import { RegisterAddressSchema } from '@/lib/validators'
 import { cookies } from 'next/headers'
 import { db } from 'smartsale-db'
 import { fromEntries } from 'smartsale-lib'
@@ -13,7 +13,7 @@ import { z } from 'zod'
 export async function registerAddress(formData: FormData) {
   try {
     const o = fromEntries(formData)
-    const data = registerAddressSchema.parse({
+    const data = RegisterAddressSchema.parse({
       ...o,
       project_id: parseInt(o.project_id)
     })
@@ -83,19 +83,21 @@ export async function generateShortLink(path: string) {
     const getShareLinkCookies = cookieStorage.get('bitlauncher-share-link')
     const resolved: DubShareLinkResponse = !getShareLinkCookies
       ? await axios
-        .post(
-          `https://api.dub.co/links?workspaceId=${process.env.DUB_WORKSPACE_ID}`,
-          {
-            domain: 'bitcash.to',
-            url: `https://bitlauncher.ai${path}`
-          }, {
-          headers: {
-            Authorization: `Bearer ${process.env.DUB_API_KEY}`,
-            'Content-Type': 'application/json'
-          },
-        })
-        .then(res => res.data)
-      : JSON.parse(getShareLinkCookies.value) as DubShareLinkResponse
+          .post(
+            `https://api.dub.co/links?workspaceId=${process.env.DUB_WORKSPACE_ID}`,
+            {
+              domain: 'bitcash.to',
+              url: `https://bitlauncher.ai${path}`
+            },
+            {
+              headers: {
+                Authorization: `Bearer ${process.env.DUB_API_KEY}`,
+                'Content-Type': 'application/json'
+              }
+            }
+          )
+          .then(res => res.data)
+      : (JSON.parse(getShareLinkCookies.value) as DubShareLinkResponse)
 
     if (!resolved) throw new Error('Failed to generate short link')
 
@@ -123,14 +125,14 @@ export async function getShortLink(key: string) {
     const getShareLinkCookies = cookieStorage.get('bitlauncher-share-link')
     const resolved: DubShareLinkResponse = !getShareLinkCookies
       ? await axios
-        .get(`https://api.dub.co/links/info?key=${key}`, {
-          headers: {
-            Authorization: `Bearer ${process.env.DUB_API_KEY}`,
-            'Content-Type': 'application/json'
-          }
-        })
-        .then(res => res.data)
-      : JSON.parse(getShareLinkCookies.value) as DubShareLinkResponse
+          .get(`https://api.dub.co/links/info?key=${key}`, {
+            headers: {
+              Authorization: `Bearer ${process.env.DUB_API_KEY}`,
+              'Content-Type': 'application/json'
+            }
+          })
+          .then(res => res.data)
+      : (JSON.parse(getShareLinkCookies.value) as DubShareLinkResponse)
 
     if (!resolved) throw new Error('Failed to retrieve short link')
 
@@ -158,7 +160,6 @@ export interface DubShareLinkResponse {
   qrCode: string
 }
 
-
 export type ActionState = {
   data?: string
   error?: string

apps/webapp/app/[project]/auction/page.tsx

@@ -1,18 +1,12 @@
-import { AuctionBids } from '@/components/pages/auction/auction-bids'
-import { AuctionOrders } from '@/components/pages/auction/auction-orders'
-import { ClaimTokens } from '@/components/pages/auction/claim-tokens'
-import { RegisterAddress } from '@/components/pages/auction/register-address'
+import { AuctionBids } from '@/components/routes/auction/auction-bids'
+import { AuctionOrders } from '@/components/routes/auction/auction-orders'
+import { ClaimTokens } from '@/components/routes/auction/claim-tokens'
+import { RegisterAddress } from '@/components/routes/project/register-address'
 import { Tabs } from '@/components/ui/tabs'
-import { ProjectWithAuction, projects } from '@/lib/projects'
-import { Metadata } from 'next'
+import { ProjectWithAuction, getProjectBySlug } from '@/lib/projects'
 import { redirect } from 'next/navigation'
 import React from 'react'
 
-export const metadata: Metadata = {
-  title: 'bitcash auction | bitlauncher',
-  description: 'Invest in the intelligent future and join the Ai/Web3 revolution now!',
-}
-
 const auctionPageClassNames = {
   tabCard:
     'border border-primary/50 bg-card w-full h-[512px] overflow-y-auto scrollbar rounded-lg p-0 md:p-10'
@@ -23,7 +17,7 @@ export default async function AuctionPage({
 }: {
   params: { project: string }
 }) {
-  const p = await new Promise((resolve) => resolve(projects.find(p => p.slug == params.project))).then((p) => p as ProjectWithAuction)
+  const p = await getProjectBySlug(params.project)
   if (!p || (!p.auctionId && !p.registrationOpen)) redirect('/')
   const project = p as ProjectWithAuction
 
@@ -74,7 +68,7 @@ export default async function AuctionPage({
         <Tabs tabs={tabs} />
       </section>
 
-      <hr className="border-gray-600/80 mt-24 mx-auto max-w-screen-xl" />
+      <hr className="max-w-screen-xl mx-auto mt-24 border-gray-600/80" />
     </div>
   )
 }

apps/webapp/app/[project]/layout.tsx

@@ -1,31 +1,23 @@
-import { LayoutContainer } from '@/components/layout-container'
-import { ProjectHeader } from '@/components/pages/auction/project-header'
-import { projects } from '@/lib/projects'
+import { getProjectBySlug } from '@/lib/projects'
 import { Metadata } from 'next'
-import React, { Suspense } from 'react'
 
-export const metadata: Metadata = {
-  title: 'bitcash | bitlauncher',
-  description: 'Invest in the intelligent future and join the Ai/Web3 revolution now!',
+export default function ProjectPagesLayout({ children }: ProjectPageProps) {
+  return children
 }
 
-export default function ProjectLayout({ children, params, ...props }: RootLayoutProps) {
-  const project = projects.find(p => p.slug === params.project)
+export async function generateMetadata({
+  params
+}: ProjectPageProps): Promise<Metadata> {
+  const project = await getProjectBySlug(params.project)
 
-  return (
-    <LayoutContainer
-      projectHeader={project ? (
-        <Suspense fallback={<section className="relative bg-black/40 w-screen py-40 min-h-[calc(83vh-4rem)]" />}>
-          <ProjectHeader projectData={project} />
-        </Suspense>
-      ) : null
-      }
-    >
-      {children}
-    </LayoutContainer>
-  )
+  return {
+    title: project?.title,
+    openGraph: {
+      images: [project?.heroImage || '']
+    }
+  }
 }
-interface RootLayoutProps {
+interface ProjectPageProps {
   children: React.ReactNode
   params: { project: string }
 }

apps/webapp/app/[project]/page.tsx

@@ -1,64 +1,83 @@
-import { projects, ProjectWithAuction } from '@/lib/projects'
-
+import { getProjectBySlug } from '@/lib/projects'
 import { redirect } from 'next/navigation'
+import { cn } from '@/lib/utils'
+import { ProjectHeader } from '@/components/routes/project/project-header'
 
-const sectionWithBgClassNames = 'flex flex-col gap-11 px-3 w-full mx-auto max-w-screen-xl md:px-6 lg:px-11 w-full bg-primary/70 backdrop-xl rounded-3xl py-10 md:py-16 lg:py-24'
-const sectionWithoutBgClassNames = sectionWithBgClassNames.replace('bg-primary/70 backdrop-xl rounded-3xl ', '')
-
-export default async function ProjectPage({
-  params
-}: {
-  params: { project: string }
-}) {
-  const project = await new Promise((resolve) => resolve(projects.find(p => p.slug == params.project))).then((p) => p as ProjectWithAuction)
+export default async function ProjectPage({ params }: ProjectPageProps) {
+  const project = await getProjectBySlug(params.project)
   if (!project) redirect('/')
 
   const projectContentObjectKeys = Object.keys(project.content)
   const projectContent = project.content
 
   return (
     <>
-      <div id="project-details" />
-      {/* // ! ========= CONTENT ORDER MUST BE AS: 1. highlights, 2. product, 3. problem, 4. solution, 5. bussinessModel and 6. tokenomics ========= */}
-      {projectContentObjectKeys.map((key, index) => {
-        const pcKey = key as keyof typeof projectContent
+      <div className="flex min-h-[calc(83vh-4rem)] flex-col">
+        <ProjectHeader project={project} />
+
+        <div className="container py-24">
+          {projectContentObjectKeys.map((key, index) => {
+            const pcKey = key as keyof typeof projectContent
 
-        return (
-          // ? Odds gets background, evens gets no background
-          <section key={key} className={index % 2 === 0 ? sectionWithBgClassNames : sectionWithoutBgClassNames}>
-            <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
-              {projectContent[pcKey].title}
-            </h2>
-            <div className="flex flex-col w-full gap-6">
-              {(projectContent[pcKey].content as string[][]).map((content, index) => {
-                if (content.every((c, i) => c.includes(':'))) {
-                  return (
-                    <ul key={`${index}__${(projectContent[pcKey].title as string).replace(/\s/g, '-')}`} className="flex flex-col gap-2 list-outside list-disc px-6">
-                      {content.map(item => (
-                        <li key={`${item}__list-item`}>
-                          {item.split(':').map((text, index) => (
-                            <span key={index} className={!index ? 'font-bold' : ''}>
-                              {text}{!index ? ': ' : ''}
-                            </span>
-                          ))}
-                        </li>
-                      ))}
-                    </ul>
-                  )
-                }
+            return (
+              <section
+                key={key}
+                className={cn(
+                  'mx-auto flex w-full max-w-screen-xl flex-col gap-11 px-3 py-10 md:px-6 md:py-16 lg:px-11 lg:py-24',
+                  index % 2 === 0 ? 'backdrop-xl rounded-3xl bg-primary/70' : ''
+                )}
+              >
+                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
+                  {projectContent[pcKey].title}
+                </h2>
+                <div className="flex w-full flex-col gap-6">
+                  {(projectContent[pcKey].content as string[][]).map(
+                    (content, index) => {
+                      if (content.every((c, i) => c.includes(':'))) {
+                        return (
+                          <ul
+                            key={`${index}__${(projectContent[pcKey].title as string).replace(/\s/g, '-')}`}
+                            className="flex list-outside list-disc flex-col gap-2 px-6"
+                          >
+                            {content.map(item => (
+                              <li key={`${item}__list-item`}>
+                                {item.split(':').map((text, index) => (
+                                  <span
+                                    key={index}
+                                    className={index === 0 ? 'font-bold' : ''}
+                                  >
+                                    {text}
+                                    {index === 0 ? ': ' : ''}
+                                  </span>
+                                ))}
+                              </li>
+                            ))}
+                          </ul>
+                        )
+                      }
 
-                return content.map((item, index) => (
-                  <p key={`${index}__${(projectContent[pcKey].title as string).replace(/\s/g, '-')}`} className="md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
-                    {item}
-                  </p>
-                ))
-              })}
-            </div>
-          </section>
-        )
-      })}
+                      return content.map((item, index) => (
+                        <p
+                          key={`${index}__${(projectContent[pcKey].title as string).replace(/\s/g, '-')}`}
+                          className="md:text-xl lg:text-base xl:text-xl"
+                        >
+                          {item}
+                        </p>
+                      ))
+                    }
+                  )}
+                </div>
+              </section>
+            )
+          })}
+        </div>
 
-      <hr className="border-gray-600/80 mt-24 mx-auto max-w-screen-xl" />
+        <hr className="mx-auto mt-24 max-w-screen-xl border-gray-600/80" />
+      </div>
     </>
   )
 }
+
+type ProjectPageProps = {
+  params: { project: string }
+}