feat: small tweaks to landing (#551)

gregkonush · Nov 14, 2024 · aea9180 · aea9180
1 parent bf8c5f1
commit aea9180
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 12 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -2,6 +2,9 @@
   "recommendations": [
     "HashiCorp.terraform",
     "ms-kubernetes-tools.vscode-kubernetes-tools",
-    "github.vscode-pull-request-github"
+    "bradlc.vscode-tailwindcss",
+    "biomejs.biome",
+    "esbenp.prettier-vscode",
+    "yoavbls.pretty-ts-errors"
   ]
 }
diff --git a/services/ecran/src/app/layout.tsx b/services/ecran/src/app/layout.tsx
@@ -22,13 +22,51 @@ export const dynamic = 'force-dynamic'
 export const metadata: Metadata = {
   title: {
     template: '%s | ProomptEng',
-    default: 'ProomptEng - Practice Programming Problems with AI',
+    default: 'ProomptEng - AI-Powered Programming Practice Platform',
   },
-  description: 'Practice programming problems with AI assistance',
+  description:
+    'Level up your coding skills with ProomptEng - An innovative AI-powered platform for practicing programming problems. Get real-time feedback, personalized assistance, and improve your problem-solving abilities.',
   metadataBase: new URL('https://proompteng.ai'),
+  keywords:
+    'programming practice, coding problems, AI assistance, learning to code, algorithm practice, coding interview prep, programming exercises',
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    url: 'https://proompteng.ai',
+    siteName: 'ProomptEng',
+    title: 'ProomptEng - AI-Powered Programming Practice Platform',
+    description:
+      'Level up your coding skills with ProomptEng - An innovative AI-powered platform for practicing programming problems.',
+    images: [
+      {
+        url: '/og-image.png',
+        width: 1200,
+        height: 630,
+        alt: 'ProomptEng - AI-Powered Programming Practice',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'ProomptEng - AI-Powered Programming Practice Platform',
+    description:
+      'Level up your coding skills with ProomptEng - An innovative AI-powered platform for practicing programming problems.',
+    images: ['/og-image.png'],
+    creator: '@proompteng',
+  },
   robots: {
     index: true,
     follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+  verification: {
+    google: 'your-google-verification-code',
   },
 }
 
@@ -40,28 +78,35 @@ export default async function RootLayout({ children }: { children: React.ReactNo
     <html lang="en" suppressHydrationWarning>
       <head />
       <body
-        className={`${jetbrains.variable} font-mono tracking-normal antialiased leading-6 text-base bg-zinc-900 text-zinc-300 min-h-screen`}
+        className={`${jetbrains.variable} font-mono tracking-normal antialiased leading-6 text-base bg-gradient-to-b from-zinc-900 to-zinc-950 text-zinc-300 min-h-screen`}
         suppressHydrationWarning
       >
         <Providers>
           <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
-            <header className="flex items-center space-x-10 px-10 py-6 border-b border-zinc-800 justify-center">
-              <div className="text-2xl uppercase font-bold">
-                <Link href="/" className="hover:text-indigo-400 transition-colors duration-200">
-                  proompteng<span className="text-indigo-400 hover:text-rose-400">▪</span>ai
+            <header className="flex items-center space-x-10 px-10 py-6 border-b border-zinc-800/50 justify-center backdrop-blur-sm bg-zinc-900/30 relative">
+              <div className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
+                <div className="relative left-[50%] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[45deg] bg-gradient-to-br from-indigo-400 to-pink-400 opacity-20"/>
+              </div>
+              <div className="text-2xl uppercase font-bold group">
+                <Link href="/" className="hover:text-indigo-400 transition-all duration-300 relative">
+                  proompteng<span className="text-indigo-400 group-hover:text-rose-400 inline-block transition-all duration-300 group-hover:animate-pulse">▪</span>ai
+                  <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-indigo-400 group-hover:w-full transition-all duration-300"/>
                 </Link>
               </div>
-              <Link href="/problems" className="hover:text-indigo-400 transition-colors duration-200">
+              <Link href="/problems" className="relative group hover:text-indigo-400 transition-colors duration-200">
                 Problems
+                <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-indigo-400 group-hover:w-full transition-all duration-300"/>
               </Link>
-              <Link href="/practice" className="hover:text-indigo-400 transition-colors duration-200">
+              <Link href="/practice" className="relative group hover:text-indigo-400 transition-colors duration-200">
                 Practice
+                <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-indigo-400 group-hover:w-full transition-all duration-300"/>
               </Link>
               {session?.user ? (
                 <UserMenu />
               ) : (
-                <Link href="/sign-in" className="hover:text-indigo-400 transition-colors duration-200">
+                <Link href="/sign-in" className="relative group hover:text-indigo-400 transition-colors duration-200">
                   Sign In
+                  <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-indigo-400 group-hover:w-full transition-all duration-300"/>
                 </Link>
               )}
               <div className="text-zinc-400 absolute right-5 text-sm">Version: {version}</div>

diff --git a/services/ecran/src/app/problems/layout.tsx b/services/ecran/src/app/problems/layout.tsx
@@ -1,3 +1,3 @@
 export default async function ProblemsLayout({ children }: { children: React.ReactNode }) {
-  return <div className="flex flex-col">{children}</div>
+  return <div className="flex flex-col px-10">{children}</div>
 }