Staging

.env

@@ -1,3 +1,11 @@
 # Create Beehiiv API key at https://developers.beehiiv.com/docs/v2/bktd9a7mxo67n-create-an-api-key
 BEEHIIV_API_KEY=J20sDZSTJcX68CV0Zab0EXepsw5pIUmJEL7Z6dv5NuwAyNkxoWqDiYB6sfYhgaGe
-BEEHIIV_PUBLICATION_ID=pub_1f36e102-35aa-4ee3-9b22-ad9c8131f4de
+BEEHIIV_PUBLICATION_ID=pub_1f36e102-35aa-4ee3-9b22-ad9c8131f4de
+
+# Giscus
+NEXT_PUBLIC_GISCUS_REPO=codust-dev/codust-comments
+NEXT_PUBLIC_GISCUS_REPOSITORY_ID=R_kgDOG_WZGw
+NEXT_PUBLIC_GISCUS_CATEGORY=General
+NEXT_PUBLIC_GISCUS_CATEGORY_ID=DIC_kwDOOS35mM4CotbV
+NEXT_PUBLIC_UTTERANCES_REPO=codust-dev/codust-comments
+NEXT_PUBLIC_DISQUS_SHORTNAME=codust

app/Main.tsx

@@ -4,19 +4,40 @@ import siteMetadata from '@/data/siteMetadata'
 import { formatDate } from 'pliny/utils/formatDate'
 import NewsletterForm from 'pliny/ui/NewsletterForm'
 
-const MAX_DISPLAY = 5
+const MAX_DISPLAY = 3
 
 export default function Home({ posts }) {
   return (
     <>
+      {/* Hero Section with Background */}
+      <div className="relative mb-16">
+        <div className="absolute inset-0 bg-gradient-to-r from-blue-900 to-purple-900 opacity-90" />
+        <div className="relative px-6 py-24 sm:px-8 sm:py-32">
+          <div className="mx-auto max-w-4xl space-y-6 text-center">
+            <h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl md:text-6xl">
+              Develop Cutting-Edge Technology
+            </h1>
+            <p className="mx-auto max-w-2xl text-xl text-gray-200">
+              Learn the way it truly matters and develop fast.
+            </p>
+            <div className="mt-8">
+              <Link
+                href="/learn"
+                className="rounded-md bg-white px-8 py-3 text-lg font-medium text-blue-900 hover:bg-gray-100"
+              >
+                Get Started
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Blog Posts Section */}
       <div className="divide-y divide-gray-200 dark:divide-gray-700">
         <div className="space-y-2 pt-6 pb-8 md:space-y-5">
           <h1 className="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 dark:text-gray-100">
-            Latest
+            Latest Blogs
           </h1>
-          <p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
-            {siteMetadata.description}
-          </p>
         </div>
         <ul className="divide-y divide-gray-200 dark:divide-gray-700">
           {!posts.length && 'No posts found.'}

app/about/page.tsx

@@ -1,73 +1,52 @@
-import { Authors, allAuthors } from 'contentlayer/generated'
-import { MDXLayoutRenderer } from 'pliny/mdx-components'
-import AuthorLayout from '@/layouts/AuthorLayout'
-import { coreContent } from 'pliny/utils/contentlayer'
+import PageLayout from '@/layouts/PageLayout'
 import { genPageMetadata } from 'app/seo'
-import { FaLaptopCode, FaNewspaper, FaRocket } from 'react-icons/fa'
-import siteMetadata from '@/data/siteMetadata'
-import NewsletterForm from 'pliny/ui/NewsletterForm'
+import { FaBrain, FaNewspaper, FaRocket } from 'react-icons/fa'
 
 export const metadata = genPageMetadata({ title: 'About Us' })
 
-export default function Page() {
-  const author = allAuthors.find((p) => p.slug === 'default') as Authors
-  const mainContent = coreContent(author)
-
+export default function AboutUsPage() {
   return (
     <>
-      <AuthorLayout content={mainContent}>
+      <PageLayout title="About Us">
         <div className="space-y-8">
           <p className="text-xl leading-relaxed text-gray-700 dark:text-gray-300">
-            Welcome to <span className="text-primary font-bold">codust.dev</span> — your go-to
-            platform for exploring forefront of technology.
+            Welcome to <span className="text-primary font-bold">codust.dev</span> — where we focus
+            on cutting-edge AI development and help you stay ahead with the latest tech trends.
           </p>
           <p className="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
-            At Codust, we dive deep into cutting-edge advancements across multiple domains: AI,
-            Robotics, and other emerging innovations shaping the future.
+            Our mission is to empower AI developers with practical, production-ready implementations
+            and keep you informed about the rapidly evolving AI landscape.
           </p>
 
-          <div className="grid grid-cols-1 gap-6 pt-8 md:grid-cols-3">
-            {/* Card 1 - Pink Theme */}
+          <div className="grid grid-cols-1 gap-6 pt-8 md:grid-cols-2">
+            {/* Card 1 - AI Development */}
             <div className="rounded-2xl bg-[#E73490] p-6 text-white shadow-md dark:bg-[#B82672]">
-              <FaLaptopCode className="mx-auto mb-4 text-4xl" />
-              <h3 className="text-center text-xl font-bold text-white">AI & Robotics</h3>
+              <FaBrain className="mx-auto mb-4 text-4xl" />
+              <h3 className="text-center text-xl font-bold text-white">Build Cutting-Edge AI</h3>
               <p className="text-center">
-                Exploring cutting-edge developments in Artificial Intelligence, Machine Learning,
-                and Robotics.
+                Master industrial-grade AI development through hands-on projects. Learn to build
+                production-ready ML models, implement MLOps practices, and deploy scalable AI
+                solutions with practical, real-world guidance.
               </p>
             </div>
-            {/* Card 2 - Blue Theme */}
+
+            {/* Card 2 - Tech Updates */}
             <div className="rounded-2xl bg-[#4051B5] p-6 text-white shadow-md dark:bg-[#2D3A8C]">
               <FaNewspaper className="mx-auto mb-4 text-4xl" />
-              <h3 className="text-center text-xl font-bold text-white">Newsletter</h3>
-              <p className="text-center">
-                Subscribe for weekly updates on the latest tech innovations, delivered straight to
-                your inbox.
-              </p>
-            </div>
-            {/* Card 3 - Cyan Theme */}
-            <div className="rounded-2xl bg-[#00ADB5] p-6 text-white shadow-md dark:bg-[#007D85]">
-              <FaRocket className="mx-auto mb-4 text-4xl" />
-              <h3 className="text-center text-xl font-bold text-white">Projects & Tutorials</h3>
+              <h3 className="text-center text-xl font-bold text-white">Stay Tech-Updated</h3>
               <p className="text-center">
-                Discover hands-on projects, tutorials, and insightful content to accelerate your
-                learning journey.
+                Never miss important tech trends with our curated weekly newsletter. Get insights on
+                emerging technologies, development best practices, and industry innovations that
+                matter.
               </p>
             </div>
           </div>
 
           <p className="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
-            Whether you're a developer, researcher, or tech enthusiast, you'll find insightful
-            content, projects, and discussions that aim to expand your knowledge and inspire new
-            ideas.
+            Join us to transform your AI development journey!
           </p>
         </div>
-      </AuthorLayout>
-      {siteMetadata.newsletter?.provider && (
-        <div className="flex items-center justify-center pt-4">
-          <NewsletterForm />
-        </div>
-      )}
+      </PageLayout>
     </>
   )
-}
+}

app/layout.tsx

@@ -2,7 +2,7 @@ import 'css/tailwind.css'
 import 'pliny/search/algolia.css'
 import 'remark-github-blockquote-alert/alert.css'
 
-import { Space_Grotesk } from 'next/font/google'
+import { Inter } from 'next/font/google'
 import { Analytics, AnalyticsConfig } from 'pliny/analytics'
 import { SearchProvider, SearchConfig } from 'pliny/search'
 import Header from '@/components/Header'
@@ -11,11 +11,12 @@ import Footer from '@/components/Footer'
 import siteMetadata from '@/data/siteMetadata'
 import { ThemeProviders } from './theme-providers'
 import { Metadata } from 'next'
+import JsonLd, { generateWebsiteJsonLd } from '@/components/JsonLd'
 
-const space_grotesk = Space_Grotesk({
+const inter = Inter({
   subsets: ['latin'],
   display: 'swap',
-  variable: '--font-space-grotesk',
+  variable: '--font-inter',
 })
 
 export const metadata: Metadata = {
@@ -64,36 +65,38 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html
       lang={siteMetadata.language}
-      className={`${space_grotesk.variable} scroll-smooth`}
+      className={`${inter.variable} scroll-smooth`}
       suppressHydrationWarning
     >
-      <link
-        rel="apple-touch-icon"
-        sizes="76x76"
-        href={`${basePath}/static/favicons/apple-touch-icon.png`}
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="32x32"
-        href={`${basePath}/static/favicons/favicon-32x32.png`}
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="16x16"
-        href={`${basePath}/static/favicons/favicon-16x16.png`}
-      />
-      <link rel="manifest" href={`${basePath}/static/favicons/site.webmanifest`} />
-      <link
-        rel="mask-icon"
-        href={`${basePath}/static/favicons/safari-pinned-tab.svg`}
-        color="#5bbad5"
-      />
-      <meta name="msapplication-TileColor" content="#000000" />
-      <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
-      <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
-      <link rel="alternate" type="application/rss+xml" href={`${basePath}/feed.xml`} />
+      <head>
+        <link
+          rel="apple-touch-icon"
+          sizes="76x76"
+          href={`${basePath}/static/favicons/apple-touch-icon.png`}
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href={`${basePath}/static/favicons/favicon-32x32.png`}
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href={`${basePath}/static/favicons/favicon-16x16.png`}
+        />
+        <link rel="manifest" href={`${basePath}/static/favicons/site.webmanifest`} />
+        <link
+          rel="mask-icon"
+          href={`${basePath}/static/favicons/safari-pinned-tab.svg`}
+          color="#5bbad5"
+        />
+        <meta name="msapplication-TileColor" content="#000000" />
+        <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
+        <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
+        <link rel="alternate" type="application/rss+xml" href={`${basePath}/feed.xml`} />
+      </head>
       <body className="bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white">
         <ThemeProviders>
           <Analytics analyticsConfig={siteMetadata.analytics as AnalyticsConfig} />
@@ -105,6 +108,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             <Footer />
           </SectionContainer>
         </ThemeProviders>
+        <JsonLd data={generateWebsiteJsonLd()} />
       </body>
     </html>
   )