Add 'Key Features' section to homepage

Introduced a new 'Key Features' section to App.tsx file. This section includes feature cards showcasing the key functionalities of the application - 'Scientific Specificity', 'Cross-attention visualization', and 'Synonyms suggestions'. These new additions are intended to enhance the user understanding of the application capabilities at a glance.

web/src/App.tsx

@@ -6,6 +6,13 @@ import "bulma/css/bulma.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
 
 function App() {
   return (
@@ -80,6 +87,82 @@ function App() {
         </div>
       </div>
 
+      <section className="section">
+        <div className="container is-max-desktop">
+          <div className="columns is-centered has-text-centered">
+            <div className="column is-four-fifths">
+              <h2 className="title is-3">Key Features</h2>
+              <div className={"columns flex"}>
+                <div className={"column flex-1"}>
+                  <Card className={"h-full"}>
+                    <CardHeader>
+                      <CardTitle>Scientific Specificity</CardTitle>
+                    </CardHeader>
+                    <CardContent className={"p-1"}>
+                      <img
+                        src={"/media/translation.png"}
+                        alt={"Scientific translation"}
+                      />
+                    </CardContent>
+
+                    <CardFooter className={"p-4"}>
+                      <p>
+                        Our translator is specialized for scientific content,
+                        handling LaTeX expressions and terminology from arXiv
+                        papers.
+                      </p>
+                    </CardFooter>
+                  </Card>
+                </div>
+                <div className={"column flex-1"}>
+                  <Card className={"h-full"}>
+                    <CardHeader>
+                      <CardTitle>Cross-attention visualization</CardTitle>
+                    </CardHeader>
+                    <CardContent className={"p-0"}>
+                      <img
+                        src={"/media/attention.png"}
+                        alt={"Cross-attention visualized"}
+                      />
+                    </CardContent>
+
+                    <CardFooter className={"p-4"}>
+                      <p>
+                        Dynamic hover-highlighting reveals word-to-word
+                        connections between original and translated text. This
+                        feature helps you compare and validate translations
+                        visually, enhancing comprehension between languages.
+                      </p>
+                    </CardFooter>
+                  </Card>
+                </div>
+                <div className={"column"}>
+                  <Card className={"h-full"}>
+                    <CardHeader>
+                      <CardTitle>Synonyms suggestions</CardTitle>
+                    </CardHeader>
+                    <CardContent className={"p-0"}>
+                      <img
+                        src={"/media/synonyms.png"}
+                        alt={"Synonyms Visualized"}
+                      />
+                    </CardContent>
+
+                    <CardFooter className={"p-4"}>
+                      <p>
+                        Hover over translated words to uncover synonyms. Unveil
+                        the model's comprehension, revealing alternate terms and
+                        offering a glimpse into the model's linguistic choices.
+                      </p>
+                    </CardFooter>
+                  </Card>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <section className="section">
         <div className="container is-max-desktop">
           <div className="columns is-centered has-text-centered">

web/src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }