From 70e25b1d31965d1a4b9103e9bbf15ceaffc21a00 Mon Sep 17 00:00:00 2001
From: anteqkois <anteqkois.dev@gmail.com>
Date: Fri, 17 May 2024 23:11:34 +0200
Subject: [PATCH] feat(landing): v.1

---
 .../app/(landing)/components/Connectors.tsx   |   2 +-
 apps/web/app/(landing)/components/Hero.tsx    |   7 +-
 .../app/(landing)/components/HeroImage.tsx    |   9 +-
 apps/web/app/(landing)/components/RoadMap.tsx | 100 ++++++++++++++++++
 apps/web/app/(landing)/config.tsx             |   6 +-
 apps/web/app/(landing)/editor/page.tsx        |  10 ++
 apps/web/app/(landing)/layout.tsx             |   4 +-
 apps/web/app/(landing)/page.tsx               |   2 -
 apps/web/app/(landing)/road-map/page.tsx      |   8 +-
 apps/web/app/layout.tsx                       |   5 +-
 apps/web/shared/components/SiteFooter.tsx     |  54 ----------
 apps/web/shared/components/index.ts           |   1 -
 12 files changed, 137 insertions(+), 71 deletions(-)
 create mode 100644 apps/web/app/(landing)/components/RoadMap.tsx
 create mode 100644 apps/web/app/(landing)/editor/page.tsx
 delete mode 100644 apps/web/shared/components/SiteFooter.tsx

diff --git a/apps/web/app/(landing)/components/Connectors.tsx b/apps/web/app/(landing)/components/Connectors.tsx
index b24815f0..70ee6eb7 100644
--- a/apps/web/app/(landing)/components/Connectors.tsx
+++ b/apps/web/app/(landing)/components/Connectors.tsx
@@ -14,7 +14,7 @@ export const Connectors = () => {
           <ConnectorsList listClassName="bg-background h-100 overflow-y-scroll md:h-120 overflow-scroll" />
         </Card>
         <Heading className="text-center text-1xl lg:text-2xl font-semibold transition-colorstext-center text-muted-foreground">
-          More soon, focused on web3 and AI apps
+          More soon, focused on Web3 and AI apps
         </Heading>
         <div
           className="w-4/5 h-2/6 inline-block rotate-1 bg-primary absolute bottom-[15%] left-[40%] -translate-x-1/2 blur-[120px] -z-10 shadow"
diff --git a/apps/web/app/(landing)/components/Hero.tsx b/apps/web/app/(landing)/components/Hero.tsx
index c234fdaf..1aec1086 100644
--- a/apps/web/app/(landing)/components/Hero.tsx
+++ b/apps/web/app/(landing)/components/Hero.tsx
@@ -31,7 +31,10 @@ export const Hero = () => {
         </p>
 
         <div className="space-y-4 md:space-y-0 md:space-x-4">
-          <Button className="w-full md:w-1/2 text-xl p-5 font-bold" size={'lg'}>
+          <Button
+            className="w-full md:w-1/2 text-xl p-5 font-bold bg-gradient-to-r from-[hsl(262,83%,57%)] via-[hsl(262,93%,55%)] to-[hsl(262,93%,50%)]"
+            size={'lg'}
+          >
             Start Free
           </Button>
         </div>
@@ -40,7 +43,7 @@ export const Hero = () => {
       <div className="z-10 col-span-12 md:col-span-6 skew-y-1 md:skew-y-3">
         <HeroImage />
         <div
-          className="w-3/5 h-4/6 inline-block rotate-1 bg-primary absolute top-[20%] left-[50%] -translate-x-1/2 blur-[120px] -z-10 shadow"
+          className="w-4/5 h-4/6 inline-block rotate-1 bg-primary absolute top-[20%] left-[50%] -translate-x-1/2 blur-[120px] -z-10 shadow"
           style={{ animation: 'shadow-slide infinite 4s linear alternate' }}
         />
       </div>
diff --git a/apps/web/app/(landing)/components/HeroImage.tsx b/apps/web/app/(landing)/components/HeroImage.tsx
index bdc2cd17..befb985d 100644
--- a/apps/web/app/(landing)/components/HeroImage.tsx
+++ b/apps/web/app/(landing)/components/HeroImage.tsx
@@ -2,15 +2,22 @@
 
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
+import { useEffect, useState } from 'react'
 import { MacOSWindow } from './MacOSWindow'
 
 export const HeroImage = () => {
   const { theme } = useTheme()
+  const [key, setKey] = useState<string>('default')
+
+  useEffect(() => {
+    setKey(theme ?? '')
+  }, [theme])
 
   return (
     <MacOSWindow className="absolute top-0 left-0">
       <Image
-        src={theme === 'dark' ? '/images/landing/hero-editor-dark-1-optymalized.png' : '/images/landing/hero-editor-light-1-optymalized.png'}
+        key={key}
+        src={theme === 'light' ? '/images/landing/hero-editor-light-1-optymalized.png' : '/images/landing/hero-editor-dark-1-optymalized.png'}
         // src={'/images/landing/hero-editor-dark-1.png'}
         width={2880}
         height={1800}
diff --git a/apps/web/app/(landing)/components/RoadMap.tsx b/apps/web/app/(landing)/components/RoadMap.tsx
new file mode 100644
index 00000000..83023264
--- /dev/null
+++ b/apps/web/app/(landing)/components/RoadMap.tsx
@@ -0,0 +1,100 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@linkerry/ui-components/server'
+import { HTMLAttributes } from 'react'
+import { Heading } from './Heading'
+
+export interface RoadMapProps extends HTMLAttributes<HTMLElement> {}
+
+export const RoadMap = () => {
+  return (
+    <section className="w-full flex-center pb-10 xl:pb-32 md:pt-20 2xl:pt-56" id="RoadMap">
+      <div className="flex flex-col gap-10  xl:gap-14 relative">
+        <Heading>Concept and Road Map</Heading>
+
+        <Card className="w-full xl:max-w-2xl relative">
+          <CardHeader>
+            <CardTitle className="text-3xl xl:text-4xl bg-gradient-to-r from-[hsl(262,83%,65%)] via-[hsl(262,93%,55%)] to-[hsl(262,93%,50%)] text-transparent bg-clip-text">
+              AI Flow Generator
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            AI Flow Generator simplifies the automation of tasks across multiple apps, it builds flows for you. This feature will use advanced AI to
+            intuitively generate workflows that connect various applications depending on your order, saving you time and effort. Automate repetitive
+            tasks and enhance your productivity with seamless integration and intelligent suggestions.
+          </CardContent>
+          <div
+            className="w-3/5 h-1/6 inline-block rotate-1 bg-primary absolute top-[0%] -left-[10%] blur-[75px] -z-10 shadow"
+            style={{ animation: 'shadow-slide infinite 4s linear alternate' }}
+          />
+        </Card>
+
+        <Card className="w-full xl:max-w-2xl relative">
+          <CardHeader>
+            <CardTitle className="text-3xl xl:text-4xl bg-gradient-to-r from-[hsl(292,83%,70%)] via-[hsl(292,93%,55%)] to-[hsl(292,93%,40%)] text-transparent bg-clip-text">
+              Linkerry DAO
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            DAO for Linkerry. Users will have the ability to vote on which app should be added first and which new features should be developed next.
+            This ensures that our platform evolves according to the needs and desires of its user base, fostering a collaborative and democratic
+            approach to development.
+          </CardContent>
+          <div
+            className="w-3/5 h-2/6 inline-block rotate-1 bg-primary absolute top-[0%] -right-[10%] blur-[75px] -z-10 shadow"
+            style={{ animation: 'shadow-slide infinite 4s linear alternate' }}
+          />
+        </Card>
+
+        <Card className="w-full xl:max-w-2xl relative">
+          <CardHeader>
+            <CardTitle className="text-3xl xl:text-4xl bg-gradient-to-r from-[hsl(262,83%,65%)] via-[hsl(262,93%,55%)] to-[hsl(262,93%,50%)] text-transparent bg-clip-text">
+              Focused on Web3 and AI Apps
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            Integrate effortlessly with the future of decentralized technology through our Web3 Decentralized Apps feature. This includes
+            compatibility with decentralized exchanges (DEX) and other blockchain-based applications. Enhance your workflows with the security,
+            transparency, and efficiency of decentralized applications, positioning your operations at the cutting edge of technology.
+          </CardContent>
+          <div
+            className="w-3/5 h-1/6 inline-block rotate-1 bg-primary absolute top-[0%] -left-[10%] blur-[75px] -z-10 shadow"
+            style={{ animation: 'shadow-slide infinite 4s linear alternate' }}
+          />
+        </Card>
+
+        <Card className="w-full xl:max-w-2xl relative">
+          <CardHeader>
+            <CardTitle className="text-3xl xl:text-4xl bg-gradient-to-r from-[hsl(292,83%,70%)] via-[hsl(292,93%,55%)] to-[hsl(292,93%,40%)] text-transparent bg-clip-text">
+              Many Triggers, One Flow
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            Increase the flexibility and efficiency of your workflows with the Many Triggers, One Flow feature. This allows a single automated flow to
+            be initiated by multiple triggers, providing a more dynamic and responsive automation experience. Whether it;&apos;s an email, a calendar
+            event, or a new database entry, multiple conditions can now seamlessly kickstart the same process.
+          </CardContent>
+          <div
+            className="w-3/5 h-1/6 inline-block rotate-1 bg-primary absolute top-[0%] -right-[10%] blur-[75px] -z-10 shadow"
+            style={{ animation: 'shadow-slide infinite 4s linear alternate' }}
+          />
+        </Card>
+
+        <Card className="w-full xl:max-w-2xl relative">
+          <CardHeader>
+            <CardTitle className="text-3xl xl:text-4xl bg-gradient-to-r from-[hsl(262,83%,65%)] via-[hsl(262,93%,55%)] to-[hsl(262,93%,50%)] text-transparent bg-clip-text">
+              Start Flow From Everywhere
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            Convenience is key with our Run From Everyday feature. Users can now initiate flows directly from their mobile devices using dynamic
+            inputs. Simply provide a string or other input on the go, and watch your automation flow activate instantly. This feature ensures that
+            your workflows are always at your fingertips, ready to respond to your daily needs.
+          </CardContent>
+          <div
+            className="w-3/5 h-1/6 inline-block rotate-1 bg-primary absolute top-[0%] -left-[10%] blur-[75px] -z-10 shadow"
+            style={{ animation: 'shadow-slide infinite 4s linear alternate' }}
+          />
+        </Card>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/web/app/(landing)/config.tsx b/apps/web/app/(landing)/config.tsx
index de36f8a5..31d5c9c1 100644
--- a/apps/web/app/(landing)/config.tsx
+++ b/apps/web/app/(landing)/config.tsx
@@ -17,7 +17,7 @@ export const landingConfig: LandingConfig = {
           title: 'App Connectors',
           titleIcon: <Icons.Connectors className="w-9 h-9 text-green-400" />,
           description: 'Connect multiple applications into one flow to automate tasks for your business or personal life.',
-          href: '#connectors',
+          href: '/#connectors',
         },
         {
           title: 'We Automate Your Business for You',
@@ -26,9 +26,9 @@ export const landingConfig: LandingConfig = {
           href: 'mailto:anteqkois@gmail.com',
         },
         {
-          title: 'Road Map',
+          title: 'Concept and Road Map',
           titleIcon: <Icons.RoadMap className="w-9 h-9 text-yellow-400" />,
-          description: 'Check out the upcoming features on Linkerry.',
+          description: 'Check out the planning and upcoming features on Linkerry.',
           href: '/road-map',
         },
         {
diff --git a/apps/web/app/(landing)/editor/page.tsx b/apps/web/app/(landing)/editor/page.tsx
new file mode 100644
index 00000000..40038aff
--- /dev/null
+++ b/apps/web/app/(landing)/editor/page.tsx
@@ -0,0 +1,10 @@
+import { PageContainer } from '../../app/components/PageContainer'
+import { HeroImage } from '../components/HeroImage'
+
+export default async function IndexPage() {
+  return (
+    <PageContainer variant={'fromTop'} className="p-10">
+      <HeroImage />
+    </PageContainer>
+  )
+}
diff --git a/apps/web/app/(landing)/layout.tsx b/apps/web/app/(landing)/layout.tsx
index a11eca20..dd7379cf 100644
--- a/apps/web/app/(landing)/layout.tsx
+++ b/apps/web/app/(landing)/layout.tsx
@@ -1,5 +1,5 @@
 import ReactQueryProvider from '../../libs/reactQueryProvider'
-import { SiteFooter } from '../../shared/components/SiteFooter'
+import { Footer } from './components/Footer'
 import { MainNav } from './components/MianNav'
 import { landingConfig } from './config'
 
@@ -19,7 +19,7 @@ export default async function MarketingLayout({ children }: MarketingLayoutProps
           </div>
         </header>
         {children}
-        <SiteFooter />
+        <Footer />
       </div>
     </ReactQueryProvider>
   )
diff --git a/apps/web/app/(landing)/page.tsx b/apps/web/app/(landing)/page.tsx
index d1a18bf2..bf7a993b 100644
--- a/apps/web/app/(landing)/page.tsx
+++ b/apps/web/app/(landing)/page.tsx
@@ -1,5 +1,4 @@
 import { Connectors } from './components/Connectors'
-import { Footer } from './components/Footer'
 import { Hero } from './components/Hero'
 import { Pricing } from './components/Pricing'
 
@@ -11,7 +10,6 @@ export default async function IndexPage() {
       <Hero />
       <Connectors />
       <Pricing />
-      <Footer />
     </>
   )
 }
diff --git a/apps/web/app/(landing)/road-map/page.tsx b/apps/web/app/(landing)/road-map/page.tsx
index c8099321..524493f6 100644
--- a/apps/web/app/(landing)/road-map/page.tsx
+++ b/apps/web/app/(landing)/road-map/page.tsx
@@ -1,6 +1,10 @@
-import { ConnectorsList } from '../../../modules/flows/connectors/ConnectorsList'
 import { PageContainer } from '../../app/components/PageContainer'
+import { RoadMap } from '../components/RoadMap'
 
 export default async function IndexPage() {
-  return <PageContainer variant={'fromTop'}></PageContainer>
+  return (
+    <PageContainer variant={'fromTop'}>
+      <RoadMap />
+    </PageContainer>
+  )
 }
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 36f0234c..42554308 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -3,7 +3,6 @@ import localFont from 'next/font/local'
 import './global.css'
 
 import { ThemeProvider, Toaster } from '@linkerry/ui-components/client'
-import { TailwindIndicator } from '@linkerry/ui-components/server'
 import { cn } from '@linkerry/ui-components/utils'
 import { LiveChatProvider } from '../libs/Tawk'
 import { siteConfig } from './webConfig'
@@ -76,13 +75,13 @@ export default function RootLayout({ children }: RootLayoutProps) {
         className={cn('min-h-screen-no-nav bg-background font-sans antialiased', fontSans.variable, fontHeading.variable)}
         suppressHydrationWarning={true}
       >
-        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+        <ThemeProvider attribute="class" defaultTheme="dark">
           <LiveChatProvider>
             {children}
             {/* <Analytics /> */}
             {/* <Toaster duration={5_000} viewportClassName='sm:top-0 sm:left-1/2 -translate-x-1/2'/> */}
             <Toaster duration={5_000} />
-            <TailwindIndicator />
+            {/* <TailwindIndicator /> */}
           </LiveChatProvider>
         </ThemeProvider>
       </body>
diff --git a/apps/web/shared/components/SiteFooter.tsx b/apps/web/shared/components/SiteFooter.tsx
deleted file mode 100644
index 057cf799..00000000
--- a/apps/web/shared/components/SiteFooter.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@linkerry/ui-components/utils"
-
-export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
-  return (
-    <footer className={cn(className)}>
-      {/* <div className="container flex flex-col items-center justify-between gap-4 py-10 md:h-24 md:flex-row md:py-0">
-        <div className="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
-          <Icons.logo />
-          <p className="text-center text-sm leading-loose md:text-left">
-            Built by{" "}
-            <a
-              href={siteConfig.links.twitter}
-              target="_blank"
-              rel="noreferrer"
-              className="font-medium underline underline-offset-4"
-            >
-              shadcn
-            </a>
-            . Hosted on{" "}
-            <a
-              href="https://vercel.com"
-              target="_blank"
-              rel="noreferrer"
-              className="font-medium underline underline-offset-4"
-            >
-              Vercel
-            </a>
-            . Illustrations by{" "}
-            <a
-              href="https://popsy.co"
-              target="_blank"
-              rel="noreferrer"
-              className="font-medium underline underline-offset-4"
-            >
-              Popsy
-            </a>
-            . The source code is available on{" "}
-            <a
-              href={siteConfig.links.github}
-              target="_blank"
-              rel="noreferrer"
-              className="font-medium underline underline-offset-4"
-            >
-              GitHub
-            </a>
-            .
-          </p>
-        </div>
-      </div> */}
-    </footer>
-  )
-}
diff --git a/apps/web/shared/components/index.ts b/apps/web/shared/components/index.ts
index 92d8ca68..4c9d12fd 100644
--- a/apps/web/shared/components/index.ts
+++ b/apps/web/shared/components/index.ts
@@ -5,7 +5,6 @@ export * from './Drawer/Index'
 export * from './Drawer/types'
 export * from './ErrorInfo'
 export * from './Markdown/MarkdownBase'
-export * from './SiteFooter'
 export * from './Spinner'
 export * from './Table/FacetedFilter'
 export * from './Table/Table'