add new landing

xavimondev · Jun 3, 2024 · db3a897 · db3a897
1 parent 27f339e
commit db3a897
Show file tree

Hide file tree

Showing 17 changed files with 91 additions and 156 deletions.
diff --git a/public/emojis/ai.webp b/public/emojis/ai.webp
diff --git a/public/emojis/antenna.webp b/public/emojis/antenna.webp
diff --git a/public/emojis/clipboard.webp b/public/emojis/clipboard.webp
diff --git a/public/emojis/key.webp b/public/emojis/key.webp
diff --git a/public/emojis/rocket.webp b/public/emojis/rocket.webp
diff --git a/public/emojis/wrench.webp b/public/emojis/wrench.webp
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,8 +7,6 @@ import { APP_URL } from '@/constants'
 import '../styles/globals.css'
 import '../styles/confetti.css'
 
-import { GeistMono } from 'geist/font/mono'
-import { GeistSans } from 'geist/font/sans'
 import { Toaster } from 'sonner'
 
 const title = 'Easyreadme - IA Powered README Builder'
@@ -38,11 +36,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html
-      lang='en'
-      suppressHydrationWarning
-      className={`${GeistSans.variable} ${GeistMono.variable} dark`}
-    >
+    <html lang='en' suppressHydrationWarning className='dark'>
       <body>
         {children}
         <Analytics />

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import { PenLine } from 'lucide-react'
 
 import { AppLogo } from '@/components/app-logo'
 import { Hero } from '@/components/hero'
@@ -9,51 +10,59 @@ import { Sparkles } from '@/components/sparkles'
 export default function Home() {
   return (
     <>
-      <div className='absolute inset-0 -z-10 size-full bg-transparent bg-[radial-gradient(#e5e7eb_-4px,transparent_1px)] [background-size:18px_18px]'></div>
-      <div className='h-screen flex flex-col max-w-4xl lg:max-w-7xl xl:max-w-[96rem] mx-auto'>
-        <header className='sticky top-0 px-8 xl:px-20 py-2'>
+      <div className='absolute size-full bg-transparent'>
+        <div className='size-full bg-[radial-gradient(#101010_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]'></div>
+      </div>
+      <div className='h-screen flex flex-col'>
+        <header className='sticky top-0 px-8 xl:px-20 py-2 w-full'>
           <div className='flex h-14 items-center justify-between'>
-            <div className='flex items-center cursor-pointer text-white'>
+            <div className='hidden sm:flex items-center cursor-pointer text-white'>
               <AppLogo />
             </div>
-            <div className='flex gap-2 items-center'>
+            <div className='flex gap-2 items-center justify-between w-full sm:w-auto'>
               <Link
+                className='flex px-4 py-2 bg-[#171524] dark:hover:bg-[#27263b] text-zinc-300 hover:bg-primary/90 rounded-md font-medium transition-colors animate-fade-in text-sm border'
+                href='/builder'
+              >
+                <PenLine className='size-5 mr-2' />
+                <span>Build a Readme</span>
+              </Link>
+              <a
                 aria-label='View app repository on GitHub'
-                href='https://github.com/xavimondev/readme-creator'
+                href='https://github.com/xavimondev/easyreadme'
                 target='_blank'
                 rel='noreferrer'
-                className='rounded-md p-2.5 hover:bg-accent transition-colors ease-out'
+                className='rounded-md p-2.5 hover:bg-accent transition-colors duration-300 z-10 bg-[#171524] dark:hover:bg-[#27263b]'
               >
-                <GitIc className='size-5 text-black dark:text-white' />
-              </Link>
+                <GitIc className='size-5 bg-transparent' />
+              </a>
             </div>
           </div>
         </header>
-        <main className='flex items-center flex-grow px-8 xl:px-20 mt-4 sm:mt-0'>
-          <section className='size-full flex gap-2 items-center'>
-            <Hero />
-            <ListFeatures />
-          </section>
-        </main>
-        <footer className='w-full flex items-center justify-center'>
-          <div className='text-center py-4 sm:py-3.5 px-6'>
-            <span className='text-gray-500 dark:text-purple-200 text-base sm:text-lg'>
-              Built with 💜 by{' '}
-              <Sparkles color='#FFC700'>
-                <a
-                  href='https://twitter.com/xavimonp'
-                  rel='noopener'
-                  target='_blank'
-                  className='underline underline-offset-4'
-                >
-                  xavimon
-                </a>
-              </Sparkles>
-            </span>
+        <main className='flex items-center flex-grow px-8 xl:px-11 w-full sm:max-w-5xl mx-auto'>
+          <div className='flex items-center'>
+            <section className='size-full flex flex-col gap-10'>
+              <ListFeatures />
+              <Hero />
+            </section>
           </div>
+        </main>
+        <footer className='w-full flex items-center justify-center px-8 xl:px-20 py-2'>
+          <span className='text-purple-100 text-base'>
+            Built with 💜 by{' '}
+            <Sparkles color='#FFC700'>
+              <a
+                href='https://twitter.com/xavimonp'
+                rel='noopener'
+                target='_blank'
+                className='underline underline-offset-4'
+              >
+                xavimon
+              </a>
+            </Sparkles>
+          </span>
         </footer>
       </div>
-      <div className='absolute border-t border-gray-400 border-opacity-50 dark:border-opacity-20 bottom-14 w-full h-0.5'></div>
     </>
   )
 }
diff --git a/src/components/heading-hero.tsx b/src/components/heading-hero.tsx
@@ -1,27 +1,25 @@
+import { GeistSans } from 'geist/font/sans'
+
 import { cn } from '@/lib/utils'
 
 type HeadingHeroProps = {
   title?: string
   textColorTitle?: string
 }
 
-const DEFAULT_HEADING = 'Craft Stunning READMEs'
-
 export function HeadingHero({ title, textColorTitle }: HeadingHeroProps) {
   return (
     <h1
       key={title}
       className={cn(
-        'text-4xl sm:text-[4rem] lg:text-[5rem] 2xl:text-[7rem] leading-tight font-medium text-balance capitalize text-transparent bg-clip-text bg-gradient-to-r animate-blurred-fade-in',
+        `${GeistSans.className} text-4xl sm:text-6xl lg:text-7xl 2xl:text-8xl leading-tight font-semibold text-balance text-transparent bg-clip-text bg-gradient-to-r animate-blurred-fade-in`,
         textColorTitle
-          ? textColorTitle
-          : 'from-blue-600 to-violet-700 dark:from-orange-200 dark:to-violet-800'
       )}
       style={{
         animationDelay: '100ms'
       }}
     >
-      {title ? title : DEFAULT_HEADING}
+      {title}
     </h1>
   )
 }
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
@@ -1,34 +1,15 @@
 'use client'
 
-import Link from 'next/link'
-
 import { useBuilder } from '@/store'
 import { HeadingHero } from '@/components/heading-hero'
 
 export function Hero() {
   const featureSelected = useBuilder((store) => store.featureSelected)
-  const { title, description, textColorTitle } = featureSelected ?? {}
+  const { description, textColorTitle } = featureSelected ?? {}
 
   return (
-    <div className='w-full lg:w-2/3 flex flex-col justify-start'>
-      <HeadingHero title={title} textColorTitle={textColorTitle} />
-      <p
-        className='text-gray-500 dark:text-gray-300/90 text-base md:text-lg xl:text-2xl text-pretty mt-2 sm:mt-4 animate-fade-in max-w-4xl'
-        style={{ animationDelay: '300ms' }}
-      >
-        {featureSelected
-          ? description
-          : 'Generate visually stunning READMEs with AI and elegant pre-designed templates.'}
-      </p>
-      <div className='pt-8 lg:pt-10'>
-        <Link
-          className='py-4 px-6 bg-[#27263b] dark:hover:bg-[#1a172a] text-zinc-300 hover:bg-primary/90 rounded-xl text-sm sm:text-lg 2xl:text-2xl font-medium transition-colors animate-fade-in'
-          style={{ animationDelay: '400ms' }}
-          href='/builder'
-        >
-          Get Started
-        </Link>
-      </div>
+    <div className='w-full'>
+      <HeadingHero title={description} textColorTitle={textColorTitle} />
     </div>
   )
 }
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
@@ -11,6 +11,7 @@ export function GitIc(props: SVGProps<SVGSVGElement>) {
       strokeWidth='2'
       strokeLinecap='round'
       strokeLinejoin='round'
+      fill='none'
       {...props}
     >
       <path d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4' />

diff --git a/src/components/list-features.tsx b/src/components/list-features.tsx
@@ -4,119 +4,91 @@ import { Feature } from '@/types/feature'
 
 import { cn } from '@/lib/utils'
 import { useBuilder } from '@/store'
-import { Separator } from '@/components/ui/separator'
-import { StickerFeature } from '@/components/sticker-feature'
 
 const LIST_FEATURES: Feature[] = [
   {
     id: 'ai',
-    title: 'AI Simplifies Complexity',
-    description:
-      'Simplify README creation with AI-powered tools. Reduce complexity and enhance productivity effortlessly.',
-    background: 'from-[#f7e397] to-[#c2bb3d] hover:to-[#f0e84e] lg:[--delay:0.4s]',
-    textColorCard: 'text-yellow-800',
+    title: 'AI',
+    description: 'Reduce complexity and enhance productivity effortlessly with AI.',
     textColorTitle: 'from-yellow-100 to-yellow-700',
-    emojiUrl: '/emojis/ai.webp'
+    background: 'from-[#f7e397] to-[#c2bb3d] hover:to-[#f0e84e]',
+    textColorCard: 'text-yellow-800'
   },
   {
     id: 'ease',
-    title: 'copy-paste markdown',
-    description:
-      'Copy and paste with ease. Save time and effort while creating stunning READMEs for your projects.',
-    background: 'from-[#f2c8ec] to-[#e180f4] hover:to-[#e061f9] lg:[--delay:0.6s]',
-    textColorCard: 'text-pink-800',
+    title: 'Copy-Paste',
+    description: 'Copy and paste with ease. Save time and effort while creating stunning READMEs.',
     textColorTitle: 'from-pink-200 to-pink-700',
-    emojiUrl: '/emojis/clipboard.webp'
+    background: 'from-[#f2c8ec] to-[#e180f4] hover:to-[#e061f9]',
+    textColorCard: 'text-pink-800'
   },
   {
     id: 'templates',
-    title: 'elegant templates',
+    title: 'Templates',
     description:
-      'Choose from a variety of sleek and elegant templates. Enhance readability and organization for your READMEs.',
-    background: 'from-sky-200 to-[#58a6c7] hover:to-[#39819f] lg:[--delay:0.8s]',
-    textColorCard: 'text-sky-800',
+      'Choose from a variety of elegant templates. Enhance readability for your READMEs.',
     textColorTitle: 'from-sky-200 to-blue-600',
-    emojiUrl: '/emojis/rocket.webp'
+    background: 'from-sky-200 to-[#58a6c7] hover:to-[#39819f]',
+    textColorCard: 'text-sky-800'
   },
   {
     id: 'customization',
-    title: 'effortless customization',
-    description:
-      'Customize your README effortlessly. Add or remove sections seamlessly to tailor templates to your project needs.',
-    background: 'from-[#27224d] to-[#151229] hover:to-[#0a071e] lg:[--delay:1s]',
-    textColorCard:
-      'text-transparent bg-clip-text bg-gradient-to-r from-indigo-100 via-red-300 to-yellow-100',
+    title: 'Customization',
+    description: 'Add or remove sections seamlessly to tailor templates to your project needs.',
     textColorTitle: 'from-indigo-300 via-orange-200 to-red-800',
-    emojiUrl: '/emojis/wrench.webp'
-  },
-  {
-    id: 'flexibility',
-    title: 'your own api key',
-    description:
-      'Enter your own API key for flexibility. Seamlessly integrate OpenAI functionalities and customize your experience.',
-    background: 'from-[#ffeda0] to-[#cb6c4a] hover:to-[#ea5a26] lg:[--delay:1.2s]',
-    textColorCard: 'text-orange-700',
-    textColorTitle: 'from-orange-200 to-amber-700',
-    emojiUrl: '/emojis/key.webp'
+    background: 'from-[#27224d] to-[#151229] hover:to-[#0a071e]',
+    textColorCard: 'text-purple-100'
   },
   {
     id: 'offline',
-    title: 'local AI execution',
-    description:
-      'Execute locally with ollama. Enjoy offline capabilities and manage your READMEs without an API key.',
-    background: 'from-[#525a64] to-[#121212] hover:to-[#0b0a0a] lg:[--delay:1.4s]',
-    textColorCard: 'text-zinc-300',
-    textColorTitle: 'from-slate-300 to-stone-600',
-    emojiUrl: '/emojis/antenna.webp'
+    title: 'Local',
+    description: 'Enjoy offline capabilities and manage your READMEs without an API key.',
+    textColorTitle: 'from-orange-200 to-amber-700',
+    background: 'from-[#ffeda0] to-[#cb6c4a] hover:to-[#ea5a26]',
+    textColorCard: 'text-orange-700'
   }
 ]
 
 type FeatureItemProps = {
   id: string
   title: string
   description: string
+  textColorTitle: string
   background: string
   textColorCard: string
-  textColorTitle: string
-  emojiUrl: string
 }
 
 function FeatureItem({
-  id,
   title,
   description,
-  background,
-  textColorCard,
   textColorTitle,
-  emojiUrl
+  background,
+  textColorCard
 }: FeatureItemProps) {
   const setFeatureSelected = useBuilder((store) => store.setFeatureSelected)
+  const featureSelected = useBuilder((store) => store.featureSelected)
 
   return (
     <div
       className={cn(
-        'w-full h-auto flex items-center rounded-lg p-3 border bg-gradient-to-r transition-all duration-300 cursor-default hover:scale-105 hover:-translate-y-1 animate-beauty-fade-in',
-        background
+        'group z-10 w-full h-auto flex items-center bg-gradient-to-tr rounded-md p-2 border bg-transparent cursor-pointer',
+        featureSelected?.title === title && background
       )}
-      onMouseOver={() =>
+      onClick={() =>
         setFeatureSelected({
           title,
           description,
           textColorTitle
         })
       }
     >
-      <StickerFeature title={`Sticker for ${title}`} url={emojiUrl!} />
-      <Separator
-        orientation='vertical'
-        className={cn('h-full mx-4 bg-gradient-to-l', background)}
-      />
       <div className='flex flex-col gap-1'>
-        <div className={cn('flex gap-1 font-bold text-sm', textColorCard)}>
-          <span>•</span>
-          <span>{id}</span>
-        </div>
-        <h3 className={cn('text-base lg:text-xl 2xl:text-2xl text-balance', textColorCard)}>
+        <h3
+          className={cn(
+            'text-xs md:text-sm text-balance font-semibold text-[#737373] group-hover:pointer-events-none transition-all duration-300 ease-in-out',
+            featureSelected?.title === title ? `${textColorCard}` : 'group-hover:text-white'
+          )}
+        >
           {title}
         </h3>
       </div>
@@ -126,7 +98,7 @@ function FeatureItem({
 
 export function ListFeatures() {
   return (
-    <div className='w-1/3 h-full hidden lg:flex flex-col gap-3 justify-center'>
+    <div className='w-full h-auto hidden sm:flex gap-3'>
       {LIST_FEATURES.map((feature) => (
         <FeatureItem key={feature.id} {...feature} />
       ))}

diff --git a/src/components/sticker-feature.tsx b/src/components/sticker-feature.tsx