Feat: Create RAG Chatbot landing page (#21)

* Feat: Create RAG Chatbot landing page

* Change icons

* fix select

* fix structure folder

* fix logo url

* fix logo url in footer

Author: sintaherena

app/(inferenceai)/inferenceai/[lang]/data.tsx

@@ -43,7 +43,7 @@ import {
   inferenceaiFaq4Answer
 } from "@/locales/.generated/server";
 
-export const nav = (lang: SupportedLanguage) => {
+export const navInferenceai = (lang: SupportedLanguage) => {
   const data = [
     { label: inferenceaiNavItems0Label(lang), href: "#how-it-works" },
     { label: inferenceaiNavItems1Label(lang), href: "#what-you-get" },

app/(inferenceai)/inferenceai/[lang]/language-picker.tsx

@@ -3,15 +3,28 @@ import data from "@/data.json";
 import { Separator } from "@/components/ui/separator";
 import { SupportedLanguage } from "@/locales/.generated/types";
 import { inferenceaiFooter } from "@/locales/.generated/server";
+import LanguagePicker from "./language-picker";
+import Link from "next/link";
 
-export default function Footer({ lang }: { lang: SupportedLanguage }) {
+export default function Footer({
+  lang,
+  type = "inferenceai"
+}: {
+  lang: SupportedLanguage;
+  type?: "inferenceai" | "rag-chatbot";
+}) {
   const { aiSocials, copyright } = data;
 
   return (
     <footer className="relative overflow-hidden border border-[#29223E] px-4 py-10 text-[#AFB0C3] md:px-20 md:py-14">
       <div className="flex flex-col space-y-6 md:items-center">
         <div className="flex items-center">
-          <a href="/inferenceai">
+          <Link
+            href={
+              type === "inferenceai"
+                ? "/inferenceai"
+                : "/inferenceai/rag-chatbot"
+            }>
             <Image
               src="/images/inferenceai/inference-ai-white.svg"
               alt="Inference AI Logo"
@@ -20,7 +33,7 @@ export default function Footer({ lang }: { lang: SupportedLanguage }) {
               className="h-8 w-auto"
               priority
             />
-          </a>
+          </Link>
         </div>
 
         <p className="text-sm md:max-w-60 md:text-center">
@@ -47,6 +60,8 @@ export default function Footer({ lang }: { lang: SupportedLanguage }) {
           ))}
         </div>
 
+        <LanguagePicker lang={lang} type={type} />
+
         <Separator className="w-full bg-[#29223E]" />
 
         <p className="text-center text-sm">{copyright}</p>

app/(inferenceai)/inferenceai/components/footer.tsx

@@ -2,17 +2,26 @@
 
 import { motion } from "framer-motion";
 import Image from "next/image";
-import { HeroCTAButton } from "./hero-cta-button";
 import { SupportedLanguage } from "@/locales/.generated/types";
 import {
+  ragChatbotHeroHeading,
+  ragChatbotHeroDesc,
   inferenceaiHeroHeading,
   inferenceaiHeroDesc
 } from "@/locales/.generated/server";
+import { HeroCTAButton } from "./hero-cta-button";
 
-export default function Hero({ lang }: { lang: SupportedLanguage }) {
+export default function Hero({
+  lang,
+  type = "inferenceai"
+}: {
+  lang: SupportedLanguage;
+  type?: "inferenceai" | "rag-chatbot";
+}) {
   return (
-    <section className="relative overflow-hidden bg-[#04040B] text-white">
-      {/* Background Image with Zoom-in Effect */}
+    <section
+      id="hero"
+      className="relative overflow-hidden bg-[#04040B] text-white">
       <motion.div
         initial={{ scale: 1.1 }}
         animate={{ scale: 1 }}
@@ -35,15 +44,19 @@ export default function Hero({ lang }: { lang: SupportedLanguage }) {
           transition={{ duration: 1, ease: "easeOut" }}
           className="flex w-full flex-col items-center justify-center">
           <h1 className="mb-4 mt-28 text-center text-5xl font-semibold md:mb-6 md:max-w-4xl md:text-6xl">
-            {inferenceaiHeroHeading(lang)}
+            {type === "inferenceai"
+              ? inferenceaiHeroHeading(lang)
+              : ragChatbotHeroHeading(lang)}
           </h1>
 
           <motion.p
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.3, duration: 1, ease: "easeOut" }}
             className="my-6 text-center text-base font-medium text-[#AFB0C3] md:my-10 md:max-w-3xl md:text-[22px]">
-            {inferenceaiHeroDesc(lang)}
+            {type === "inferenceai"
+              ? inferenceaiHeroDesc(lang)
+              : ragChatbotHeroDesc(lang)}
           </motion.p>
 
           <motion.div
@@ -55,7 +68,6 @@ export default function Hero({ lang }: { lang: SupportedLanguage }) {
         </motion.div>
       </article>
 
-      {/* Bottom Banner with Fade-in */}
       <motion.div
         initial={{ opacity: 0, y: 30 }}
         animate={{ opacity: 0.6, y: 0 }}

app/(inferenceai)/inferenceai/components/hero.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import {
+  SupportedLanguage,
+  supportedLanguages
+} from "@/locales/.generated/types";
+
+const labelByLang: Record<SupportedLanguage, string> = {
+  en: "🇬🇧 English",
+  id: "🇮🇩 Indonesia"
+};
+
+export default function LanguagePicker({
+  lang,
+  type = "inferenceai"
+}: {
+  lang: SupportedLanguage;
+  type: "inferenceai" | "rag-chatbot";
+}) {
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newLang = e.target.value as SupportedLanguage;
+    window.location.href =
+      type === "inferenceai"
+        ? `/inferenceai/${newLang}#hero`
+        : `/inferenceai/rag-chatbot/${newLang}#hero`;
+  };
+
+  return (
+    <select
+      value={lang}
+      onChange={handleChange}
+      className="max-w-32 rounded-full border bg-transparent px-3 py-2 text-sm font-medium text-white">
+      {supportedLanguages.map((l) => (
+        <option key={l} value={l}>
+          {labelByLang[l]}
+        </option>
+      ))}
+    </select>
+  );
+}

app/(inferenceai)/inferenceai/components/language-picker.tsx

@@ -12,25 +12,40 @@ import {
 import StickyNavigationMain from "@/app/components/sticky-nav-main";
 import { HeroCTAButton } from "./hero-cta-button";
 import { SupportedLanguage } from "@/locales/.generated/types";
-import LanguagePicker from "../[lang]/language-picker";
-import { nav } from "../[lang]/data";
+import { navInferenceai } from "../[lang]/data";
+import { navRagChatbot } from "../rag-chatbot/[lang]/data";
 
-export default function Nav({ lang }: { lang: SupportedLanguage }) {
+export default function Nav({
+  lang,
+  type = "inferenceai"
+}: {
+  lang: SupportedLanguage;
+  type?: "inferenceai" | "rag-chatbot";
+}) {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <StickyNavigationMain isMenuOpen={isOpen}>
       {({ shouldBeWhite }) => (
         <>
           <NavContainer>
-            <Link href="/inferenceai" className="flex items-center">
+            <Link
+              href={
+                type === "inferenceai"
+                  ? "/inferenceai"
+                  : "/inferenceai/rag-chatbot"
+              }
+              className="flex items-center">
               <InferenceAI isOpen={isOpen} />
             </Link>
 
             <CenterNavItems>
               <NavigationMenu className="mx-8 xl:mx-0">
                 <NavigationMenuList className="flex gap-5">
-                  {nav(lang).map((item, idx) => (
+                  {(type === "inferenceai"
+                    ? navInferenceai(lang)
+                    : navRagChatbot(lang)
+                  ).map((item, idx) => (
                     <NavigationMenuItem key={idx} className="text-center">
                       <Link
                         href={item.href}
@@ -49,13 +64,11 @@ export default function Nav({ lang }: { lang: SupportedLanguage }) {
             </CenterNavItems>
 
             <RightNavItems>
-              <LanguagePicker lang={lang} />
               <HeroCTAButton lang={lang} />
             </RightNavItems>
 
             {/* Mobile Toggle */}
             <div className="flex items-center xl:hidden">
-              <LanguagePicker isOpen={isOpen} lang={lang} />
               <button
                 onClick={() => setIsOpen(!isOpen)}
                 className="ml-3 p-2"
@@ -90,7 +103,10 @@ export default function Nav({ lang }: { lang: SupportedLanguage }) {
           {isOpen && (
             <div className="bg-white shadow-md xl:hidden">
               <div className="mx-auto flex w-full flex-col space-y-4 px-4 py-5 md:px-8">
-                {nav(lang).map((item, idx) => (
+                {(type === "inferenceai"
+                  ? navInferenceai(lang)
+                  : navRagChatbot(lang)
+                ).map((item, idx) => (
                   <Link
                     key={idx}
                     href={item.href}