Change icons

Author: sintaherena

app/(inferenceai)/inferenceai/(rag-chatbot)/rag-chatbot/[lang]/data.tsx

@@ -35,6 +35,16 @@ import {
   ragChatbotFaq2Answer,
   ragChatbotFaq3Answer
 } from "@/locales/.generated/server";
+import {
+  ChatBubbleIcon,
+  LockClosedIcon,
+  ClockIcon,
+  FileTextIcon,
+  LayersIcon,
+  Link2Icon,
+  DashboardIcon,
+  ReloadIcon
+} from "@radix-ui/react-icons";
 
 export const nav = (lang: SupportedLanguage) => {
   const data = [
@@ -51,27 +61,27 @@ export const getKeyFeatures = (lang: SupportedLanguage) => {
     {
       title: ragChatbotKeyFeaturesFeatures0Title(lang),
       description: ragChatbotKeyFeaturesFeatures0Text(lang),
-      icon: "/images/inferenceai/why-work-with-us/tailored-to-your-workflow.svg"
+      icon: <FileTextIcon className="h-7 w-7 text-white" />
     },
     {
       title: ragChatbotKeyFeaturesFeatures1Title(lang),
       description: ragChatbotKeyFeaturesFeatures1Text(lang),
-      icon: "/images/inferenceai/why-work-with-us/speed-to-launch.svg"
+      icon: <ClockIcon className="h-7 w-7 text-white" />
     },
     {
       title: ragChatbotKeyFeaturesFeatures2Title(lang),
       description: ragChatbotKeyFeaturesFeatures2Text(lang),
-      icon: "/images/inferenceai/why-work-with-us/ongoing-support-n-optimization.svg"
+      icon: <LayersIcon className="h-7 w-7 text-white" />
     },
     {
       title: ragChatbotKeyFeaturesFeatures3Title(lang),
       description: ragChatbotKeyFeaturesFeatures3Text(lang),
-      icon: "/images/inferenceai/why-work-with-us/speed-to-launch.svg"
+      icon: <ChatBubbleIcon className="h-7 w-7 text-white" />
     },
     {
       title: ragChatbotKeyFeaturesFeatures4Title(lang),
       description: ragChatbotKeyFeaturesFeatures4Text(lang),
-      icon: "/images/inferenceai/why-work-with-us/ongoing-support-n-optimization.svg"
+      icon: <LockClosedIcon className="h-7 w-7 text-white" />
     }
   ];
 
@@ -82,23 +92,19 @@ export const getHowItWorks = (lang: SupportedLanguage) => {
   const data = [
     {
       title: ragChatbotHowItWorksSteps0Title(lang),
-      description: ragChatbotHowItWorksSteps0Text(lang),
-      image: "/images/inferenceai/how-it-works/discovery-n-strategy.png"
+      description: ragChatbotHowItWorksSteps0Text(lang)
     },
     {
       title: ragChatbotHowItWorksSteps1Title(lang),
-      description: ragChatbotHowItWorksSteps1Text(lang),
-      image: "/images/inferenceai/how-it-works/agent-design-n-prototype.png"
+      description: ragChatbotHowItWorksSteps1Text(lang)
     },
     {
       title: ragChatbotHowItWorksSteps2Title(lang),
-      description: ragChatbotHowItWorksSteps2Text(lang),
-      image: "/images/inferenceai/how-it-works/integration-n-deployment.png"
+      description: ragChatbotHowItWorksSteps2Text(lang)
     },
     {
       title: ragChatbotHowItWorksSteps3Title(lang),
-      description: ragChatbotHowItWorksSteps3Text(lang),
-      image: "/images/inferenceai/how-it-works/training-n-iteration.png"
+      description: ragChatbotHowItWorksSteps3Text(lang)
     }
   ];
 
@@ -109,19 +115,19 @@ export const getWhatIsIncluded = (lang: SupportedLanguage) => {
   const data = [
     {
       title: ragChatbotWhatIsIncludedItems0(lang),
-      icon: "/images/inferenceai/what-you-get/end-to-end-strategy-session.svg"
+      icon: <ChatBubbleIcon className="h-7 w-7 text-white" />
     },
     {
       title: ragChatbotWhatIsIncludedItems1(lang),
-      icon: "/images/inferenceai/what-you-get/custom-ai-agent-architecture-n-design.svg"
+      icon: <Link2Icon className="h-7 w-7 text-white" />
     },
     {
       title: ragChatbotWhatIsIncludedItems2(lang),
-      icon: "/images/inferenceai/what-you-get/pompt-engineering-n-llm-integration.svg"
+      icon: <DashboardIcon className="h-7 w-7 text-white" />
     },
     {
       title: ragChatbotWhatIsIncludedItems3(lang),
-      icon: "/images/inferenceai/what-you-get/api-n-tool-integrations.svg"
+      icon: <ReloadIcon className="h-7 w-7 text-white" />
     }
   ];
 

app/(inferenceai)/inferenceai/(rag-chatbot)/rag-chatbot/[lang]/home.tsx

@@ -57,80 +57,25 @@ function KeyFeatures({ lang }: { lang: SupportedLanguage }) {
 }
 
 function HowItWorks({ lang }: { lang: SupportedLanguage }) {
-  const [activeIndex, setActiveIndex] = useState(0);
-
   return (
     <GridItemsSection
       id="how-it-works"
       title={ragChatbotHowItWorksHeading(lang)}
       className="my-10 max-w-7xl">
       <div className="my-10" />
-      <div className="md:hidden">
-        <Accordion type="single" collapsible className="w-full">
-          {getHowItWorks(lang).map((item, i) => (
-            <AccordionItem key={i} value={`faq-${i}`} asChild>
-              <Card className="my-4 w-full border-none bg-[#1B1728] shadow-sm transition-all duration-300">
-                <CardHeader className="px-4 py-2">
-                  <AccordionTrigger className="flex items-center justify-between no-underline hover:no-underline focus:no-underline">
-                    <div className="flex flex-col">
-                      <div className="text-left text-xl font-medium text-white">
-                        {item.title}
-                      </div>
-                      <div className="text-left font-medium text-[#AFB0C3]">
-                        {item.description}
-                      </div>
-                    </div>
-                  </AccordionTrigger>
-                </CardHeader>
-                <AccordionContent asChild>
-                  <CardContent className="px-4 pb-4 pt-0 text-base text-[#CDCED8] lg:text-lg">
-                    <div className="relative aspect-[4/3] w-full overflow-hidden rounded-xl">
-                      <Image
-                        src={item.image}
-                        alt={item.title}
-                        fill
-                        className="object-contain"
-                      />
-                    </div>
-                  </CardContent>
-                </AccordionContent>
-              </Card>
-            </AccordionItem>
-          ))}
-        </Accordion>
-      </div>
-      <div className="mx-auto mt-8 hidden w-full grid-cols-1 items-stretch gap-8 md:grid lg:grid-cols-2">
-        <div className="h-full space-y-4">
-          {getHowItWorks(lang).map((item, i) => (
-            <Card
-              key={i}
-              onClick={() => setActiveIndex(i)}
-              className={cn(
-                "cursor-pointer rounded-2xl border bg-[#1B1728] p-4 transition-all duration-300 ease-in-out",
-                i === activeIndex
-                  ? "border-white/20 bg-[#2E2843] shadow-lg shadow-white/10 ring-1 ring-white/10"
-                  : "border-white/10"
-              )}>
-              <h3 className="mb-1 text-xl font-semibold text-white">
-                {item.title}
-              </h3>
-              <p className="text-base text-[#AFB0C3] text-muted-foreground">
-                {item.description}
-              </p>
-            </Card>
-          ))}
-        </div>
-
-        <div className="flex min-h-[100%] items-center justify-center rounded-2xl bg-gradient-to-br from-[#2B2543] to-[#1A152E] p-8">
-          <div className="relative aspect-[4/3] w-full max-w-md">
-            <Image
-              src={getHowItWorks(lang)[activeIndex].image}
-              alt={getHowItWorks(lang)[activeIndex].title}
-              fill
-              className="rounded-xl object-contain transition duration-300"
-            />
-          </div>
-        </div>
+      <div className="mt-8 w-full grid-cols-1 gap-8 space-y-6 md:grid md:space-y-0 lg:grid-cols-1">
+        {getHowItWorks(lang).map((item, i) => (
+          <Card
+            key={i}
+            className="group cursor-pointer rounded-2xl border border-white/10 bg-[#1B1728] p-6 transition-all duration-300 ease-in-out hover:border-white/20 hover:bg-gradient-to-br hover:from-[#2E2843] hover:to-[#1B1728] hover:shadow-lg hover:ring-1 hover:ring-white/10">
+            <h3 className="mb-1 text-xl font-semibold text-white group-hover:text-white">
+              {item.title}
+            </h3>
+            <p className="text-base text-[#AFB0C3] group-hover:text-[#CDCED8]">
+              {item.description}
+            </p>
+          </Card>
+        ))}
       </div>
     </GridItemsSection>
   );
@@ -148,7 +93,7 @@ function WhatIsIncluded({ lang }: { lang: SupportedLanguage }) {
             key={idx}
             className="relative flex flex-col items-start justify-start gap-4 pl-6">
             <div className="absolute left-0 top-0 h-full w-[2px] bg-gradient-to-b from-transparent via-white/20 to-transparent" />
-            <Image src={item.icon} alt={item.title} width={32} height={32} />
+            {item.icon}
             <p className="text-base font-semibold text-white/90 md:text-xl">
               {item.title}
             </p>

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

@@ -1,43 +1,31 @@
 "use client";
 
-import { cn } from "@/lib/utils";
 import {
   SupportedLanguage,
   supportedLanguages
 } from "@/locales/.generated/types";
-import Link from "next/link";
 
-export default function LanguagePicker({
-  lang,
-  isOpen
-}: {
-  lang: SupportedLanguage;
-  isOpen?: boolean;
-}) {
-  return (
-    <div className="flex gap-2">
-      {supportedLanguages.map((l) => {
-        const isActive = lang === l;
+const labelByLang: Record<SupportedLanguage, string> = {
+  en: "🇬🇧 English",
+  id: "🇮🇩 Indonesia"
+};
+
+export default function LanguagePicker({ lang }: { lang: SupportedLanguage }) {
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newLang = e.target.value as SupportedLanguage;
+    window.location.href = `/inferenceai/rag-chatbot/${newLang}#hero`;
+  };
 
-        return (
-          <Link
-            scroll={false}
-            key={l}
-            href={`/inferenceai/rag-chatbot/${l}`}
-            className={cn(
-              "flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium transition-colors",
-              isActive
-                ? isOpen
-                  ? "bg-inferenceai-indigo"
-                  : "text-white group-data-[scroll='false']:bg-white group-data-[scroll='true']:bg-inferenceai-indigo group-data-[scroll='false']:text-inferenceai-indigo group-data-[scroll='true']:text-white"
-                : isOpen
-                  ? "text-inferenceai-indigo"
-                  : "text-white group-data-[scroll='true']:text-inferenceai-indigo"
-            )}>
-            {l.toUpperCase()}
-          </Link>
-        );
-      })}
-    </div>
+  return (
+    <select
+      value={lang}
+      onChange={handleChange}
+      className="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/(rag-chatbot)/rag-chatbot/components/footer.tsx

@@ -3,6 +3,7 @@ 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 "../[lang]/language-picker";
 
 export default function Footer({ lang }: { lang: SupportedLanguage }) {
   const { aiSocials, copyright } = data;
@@ -47,6 +48,8 @@ export default function Footer({ lang }: { lang: SupportedLanguage }) {
           ))}
         </div>
 
+        <LanguagePicker lang={lang} />
+
         <Separator className="w-full bg-[#29223E]" />
 
         <p className="text-center text-sm">{copyright}</p>

app/(inferenceai)/inferenceai/(rag-chatbot)/rag-chatbot/components/hero.tsx

@@ -11,7 +11,9 @@ import {
 
 export default function Hero({ lang }: { lang: SupportedLanguage }) {
   return (
-    <section className="relative overflow-hidden bg-[#04040B] text-white">
+    <section
+      id="hero"
+      className="relative overflow-hidden bg-[#04040B] text-white">
       <motion.div
         initial={{ scale: 1.1 }}
         animate={{ scale: 1 }}

app/components/grid-items.tsx

@@ -14,7 +14,13 @@ import { cn } from "@/lib/utils";
 import Image from "next/image";
 import Link from "next/link";
 import { motion } from "framer-motion";
-import { Children, isValidElement, useEffect, useRef, useState } from "react";
+import React, {
+  Children,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState
+} from "react";
 import { GitFork, Star } from "lucide-react";
 import { SupportedLanguage } from "@/locales/.generated/types";
 import { mainSeeLess, mainSeeMore } from "@/locales/.generated/server";
@@ -77,7 +83,7 @@ type Item = {
   description: string;
   url?: string;
   category?: string;
-  icon?: string;
+  icon?: string | React.ReactElement;
   button?: boolean;
   repo?: string;
 };
@@ -184,7 +190,8 @@ export function GridItems({
       {items.map((item, idx) => {
         const { image, title, description, url, category, icon, button } = item;
         const stats = repoStats[idx] || { stars: 0, forks: 0 };
-
+        const isReactIcon = isValidElement(icon);
+        const isStringIcon = typeof icon === "string";
         return (
           <CardWrapper
             key={idx}
@@ -205,9 +212,15 @@ export function GridItems({
             )}
 
             <CardHeader>
-              {icon && (
+              {isReactIcon && (
+                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-[#2E2B3F] to-white/20 shadow-md">
+                  {icon}
+                </div>
+              )}
+
+              {isStringIcon && (
                 <Avatar className="mb-6 h-14 w-14">
-                  <AvatarImage src={icon} alt={title} />
+                  <AvatarImage src={icon as string} alt={title} />
                 </Avatar>
               )}
               {category && (

locales/en/rag-chatbot.json

@@ -18,7 +18,7 @@
       },
       "1": {
         "title": "Real-Time Information Retrieval",
-        "text": "Pulls the latest data from your selected sources, ensuring responses stay relevant."
+        "text": "Pulls the latest data from your selected sources, ensuring responses stay relevant Customizable Knowledge Base: Connects with your cloud storage, collaboration tools, databases, APIs, and internal wikis for tailored insights"
       },
       "2": {
         "title": "Customizable Knowledge Base",
@@ -43,7 +43,7 @@
       },
       "1": {
         "title": "Fine-Tune Your Bot",
-        "text": "Set retrieval rules, add instructions, and tailor responses to your needs."
+        "text": "Set retrieval rules, add custom instructions, and refine responses."
       },
       "2": {
         "title": "Deploy & Test",