chore: layout, metadata, navigation adjustments

bitcashorg · Apr 15, 2024 · 4c6f898 · 4c6f898
1 parent 8180a4f
commit 4c6f898
Show file tree

Hide file tree

Showing 12 changed files with 171 additions and 104 deletions.
diff --git a/apps/webapp/.env.example b/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"

diff --git a/apps/webapp/app/[project]/page.tsx b/apps/webapp/app/[project]/page.tsx
@@ -1,6 +1,7 @@
 import { getProjectBySlug } from '@/lib/projects'
 import { redirect } from 'next/navigation'
 import { cn } from '@/lib/utils'
+import { ProjectHeader } from '@/components/routes/auction/project-header'
 
 export default async function ProjectPage({ params }: ProjectPageProps) {
   const project = await getProjectBySlug(params.project)
@@ -11,64 +12,70 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
 
   return (
     <>
-      <div id="project-details" />
-      {projectContentObjectKeys.map((key, index) => {
-        const pcKey = key as keyof typeof projectContent
+      <div className="flex flex-col">
+        <header className="relative min-h-[calc(83vh-4rem)] w-screen  py-40 backdrop-blur-[2.5px]">
+          <ProjectHeader project={project} />
+        </header>
 
-        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' : ''
-            )}
-          >
-            {/* <ProjectHeader projectData={project} /> */}
-            <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>
+        <div className="container py-24">
+          {projectContentObjectKeys.map((key, index) => {
+            const pcKey = key as keyof typeof projectContent
+
+            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 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 px-6 list-disc list-outside"
+                          >
+                            {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>
                             ))}
-                          </li>
-                        ))}
-                      </ul>
-                    )
-                  }
+                          </ul>
+                        )
+                      }
 
-                  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>
-        )
-      })}
+                      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="mx-auto mt-24 max-w-screen-xl border-gray-600/80" />
+        <hr className="max-w-screen-xl mx-auto mt-24 border-gray-600/80" />
+      </div>
     </>
   )
 }

diff --git a/apps/webapp/app/about/page.tsx b/apps/webapp/app/about/page.tsx
@@ -52,7 +52,7 @@ const content: PageContentData = [
 ]
 
 export const metadata: Metadata = {
-  title: 'how it works | bitlauncher',
+  title: 'About | Bitlauncher',
   description:
     'Invest in the intelligent future and join the Ai/Web3 revolution now!'
 }
diff --git a/apps/webapp/app/globals.css b/apps/webapp/app/globals.css
@@ -99,6 +99,14 @@
 /* 5. #140E40 4. #1F124C 3. #2F1758 2. #401D66 1. #512275 0.#060A35 */
 
 @layer base {
+  * {
+    @apply border-border ring-offset-ring focus-within:ring-ring focus-within:ring-offset-ring focus-visible:ring-ring focus-visible:ring-offset-ring before:focus-visible:ring-ring before:focus-visible:ring-offset-ring;
+  }
+  a:focus-visible {
+    outline: 3px solid hsl(var(--ring));
+    outline-offset: 2px;
+    outline-radius: 2px;
+  }
   body {
     @apply bg-background text-foreground;
   }
@@ -248,3 +256,8 @@ input[type='number'] {
 .content-container {
   @apply flex flex-col w-full max-w-screen-lg gap-10 py-24 mx-auto;
 }
+
+.header-link:hover {
+  text-decoration: underline;
+  text-underline-offset: 4px; /* Adjust the offset as needed */
+}
diff --git a/apps/webapp/app/layout.tsx b/apps/webapp/app/layout.tsx
@@ -33,9 +33,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
         >
           <Header />
           <Toaster />
-          <main className="container flex flex-1 flex-col py-5">
-            {children}
-          </main>
+          <main className="flex flex-col flex-1 py-5">{children}</main>
           <Footer />
         </Providers>
         <GoogleAnalytics gaId="G-78N0Z7NPQJ" />
@@ -50,8 +48,8 @@ interface RootLayoutProps {
 
 export const metadata: Metadata = {
   title: {
-    absolute: 'bitlauncher',
-    template: '%s | bitlauncher'
+    absolute: 'Bitlaucher',
+    template: '%s | Bitlauncher'
   },
   description:
     'Invest in the intelligent future and join the Ai/Web3 revolution now!',

diff --git a/apps/webapp/app/security/page.tsx b/apps/webapp/app/security/page.tsx
@@ -15,7 +15,7 @@ export default function SecurityTips() {
 }
 
 export const metadata: Metadata = {
-  title: 'security | bitlauncher',
+  title: 'Security Tips | Bitlauncher',
   description:
     'Invest in the intelligent future and join the Ai/Web3 revolution now!'
 }

diff --git a/apps/webapp/app/terms/page.tsx b/apps/webapp/app/terms/page.tsx
@@ -1,20 +1,65 @@
-import { PageContent, PageContentData } from '@/components/shared/content'
+import React from 'react'
 import { Metadata } from 'next'
+import {
+  PageContent,
+  PageContentData,
+  ContentTextType
+} from '@/components/shared/content'
 
-export default function TermsPage() {
+export default function PrivacyPolicy() {
   return (
     <div className="content-container">
       <PageContent data={content} />
     </div>
   )
 }
 
-const content: PageContentData = [
-  { type: 'h1', text: '   Terms & Privacy Policy' }
-]
-
 export const metadata: Metadata = {
-  title: 'terms and conditions | bitlauncher',
+  title: 'Privacy Policy | Bitlauncher',
   description:
-    'Invest in the intelligent future and join the Ai/Web3 revolution now!'
+    'Read our Privacy Policy to understand how we protect and manage your data in our crypto launchpad application.'
 }
+
+const policiesAndTerms = [
+  {
+    title: 'Privacy Policy',
+    content:
+      'We respect your privacy. No personal data is stored or shared with third parties. We only collect emails for our newsletter subscribers and ensure their protection against unauthorized access.'
+  },
+  {
+    title: 'Terms of Service',
+    content:
+      'By using our services, you agree to our terms. Ensure you understand the risks associated with digital currencies and platforms. We do not store your personal data except for email subscriptions.'
+  },
+  {
+    title: 'No Cookie Policy',
+    content:
+      'Our website does not use cookies. Your navigation and interaction with our services are private and not tracked by cookies.'
+  },
+  {
+    title: 'Newsletter Subscription',
+    content:
+      'Subscribers to our newsletter agree to provide their email addresses for regular updates. You can unsubscribe at any time through the link provided in each email.'
+  },
+  {
+    title: 'Data Protection',
+    content:
+      'We implement rigorous security measures to protect your information. Your email is securely stored and is only used for sending newsletters.'
+  }
+] as const
+
+// Define the content using mapped policies and terms
+const content: PageContentData = [
+  {
+    type: 'h1',
+    text: 'Privacy Policy and Terms of Service for Bitlauncher Participants'
+  },
+  {
+    type: 'p',
+    text: 'Understand our commitment to your privacy and your responsibilities when using our crypto launchpad services:'
+  },
+  ...policiesAndTerms.flatMap((item, index) => [
+    { type: 'h2' as ContentTextType, text: `${index + 1}. ${item.title}` },
+    { type: 'p' as ContentTextType, text: item.content }
+  ])
+]
diff --git a/apps/webapp/app/wallet/page.tsx b/apps/webapp/app/wallet/page.tsx
@@ -9,12 +9,12 @@ import { Suspense } from 'react'
 export default function WalletPage() {
   return (
     <div className="mb-20 flex size-full min-h-[512px] max-w-[100vw] flex-col gap-16 px-2">
-      <div className="space-between flex flex-col gap-5 md:flex-row">
+      <div className="flex flex-col gap-5 space-between md:flex-row">
         <div className="md:w-2/3">
           <h1 className="mb-4 text-2xl font-bold">Wallet</h1>
           <BalancesTable />
         </div>
-        <div className="flex w-full flex-col gap-5 md:w-1/3">
+        <div className="flex flex-col w-full gap-5 md:w-1/3">
           <DepositCard />
           <WithdrawCard />
         </div>
@@ -36,7 +36,7 @@ export default function WalletPage() {
 }
 
 export const metadata: Metadata = {
-  title: 'wallet | bitlauncher',
+  title: 'Wallet | Bitlauncher',
   description:
     'Invest in the intelligent future and join the Ai/Web3 revolution now!'
 }
diff --git a/apps/webapp/components/layout/header.tsx b/apps/webapp/components/layout/header.tsx
@@ -10,18 +10,24 @@ import { Suspense } from 'react'
 
 export function Header() {
   return (
-    <div className="container sticky top-0 z-50 flex h-16 items-center justify-between bg-background p-10">
-      <div className="flex h-full items-center">
+    <div className="container sticky top-0 z-50 flex items-center justify-between h-16 p-10 bg-background">
+      <div className="flex items-center h-full">
         <Link shallow href="/">
           <IconBitlauncher />
         </Link>
         <div className="flex gap-5 pl-10">
-          <Link shallow href="/about">
-            About
-          </Link>
-          <Link shallow href="/security">
-            Security
-          </Link>
+          {links.map(link => {
+            return (
+              <Link
+                shallow
+                key={link.href}
+                className="header-link"
+                href={link.href}
+              >
+                {link.text}
+              </Link>
+            )
+          })}
         </div>
       </div>
 
@@ -49,3 +55,9 @@ export function Header() {
     </div>
   )
 }
+
+const links = [
+  { href: '/about', text: 'About' },
+  { href: '/security', text: 'Security' },
+  { href: '/terms', text: 'Privacy' }
+] as const
diff --git a/apps/webapp/components/providers.tsx b/apps/webapp/components/providers.tsx
@@ -38,13 +38,14 @@ export function Providers({ children, ...props }: ThemeProviderProps) {
       )
   }, [location])
 
-  useEffect(() => {
-    async function loadVConsoleModule() {
-      await import('@/lib/devtools')
-    }
+  // TODO: disabled momentarily
+  // useEffect(() => {
+  //   async function loadVConsoleModule() {
+  //     await import('@/lib/devtools')
+  //   }
 
-    loadVConsoleModule()
-  }, [])
+  //   loadVConsoleModule()
+  // }, [])
 
   return (
     <NextThemesProvider {...props}>