added component with the relevant usage

frontend/src/components/profiles/action-buttons/CreateProfileDialog.tsx

@@ -11,6 +11,7 @@ import {
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import { useCreateProfile } from "@/hooks/profiles/use-create-profile";
 import { useQueryClient } from "@tanstack/react-query";
 import {
@@ -109,8 +110,9 @@ export function CreateProfileButton() {
                 <FormItem>
                   <FormLabel>Description</FormLabel>
                   <FormControl>
-                    <Input
+                    <Textarea
                       placeholder="Write a short introduction..."
+                      className="resize-none"
                       {...field}
                     />
                   </FormControl>

frontend/src/components/profiles/action-buttons/EditProfileDialog.tsx

@@ -9,6 +9,7 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import {
   Form,
   FormControl,
@@ -135,8 +136,9 @@ export function EditProfileDialog({
                 <FormItem>
                   <FormLabel>Description</FormLabel>
                   <FormControl>
-                    <Input
+                    <Textarea
                       placeholder="Write a short introduction..."
+                      className="resize-none"
                       {...field}
                     />
                   </FormControl>

frontend/src/components/profiles/profile-page/ProfileDescription.tsx

@@ -0,0 +1,19 @@
+interface ProfileDescriptionProps {
+  description?: string;
+}
+
+export function ProfileDescription({
+  description,
+}: ProfileDescriptionProps) {
+  if (!description) {
+    return null;
+  }
+
+  return (
+    <section className="mt-6 py-4 border-t border-b border-gray-200">
+      <p className="text-gray-700 whitespace-pre-wrap">{description}</p>
+    </section>
+  );
+}
+
+export default ProfileDescription;

frontend/src/components/profiles/profile-page/ProfileMain.tsx

@@ -1,5 +1,6 @@
 import ProfileHeader from "@/components/profiles/profile-page/ProfileHeader";
 import ProfileActions from "@/components/profiles/profile-page/ProfileActions";
+import ProfileDescription from "@/components/profiles/profile-page/ProfileDescription";
 import ProfileAttestations from "@/components/profiles/profile-page/ProfileAttestations";
 import ProfileIssuedAttestations from "@/components/profiles/profile-page/ProfileIssuedAttestations";
 import { useGetProfiles } from "@/hooks/profiles/use-get-profiles";
@@ -32,6 +33,7 @@ export function ProfileMain({ address }: { address: string }) {
           githubLogin={profile?.github_login}
         />
       </div>
+      <ProfileDescription description={profile?.description} />
       <ProfileAttestations address={address} />
       <ProfileIssuedAttestations address={address} />
     </div>

frontend/src/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }