docs: update the pages

Author: sajadevo

components/docs/profile-menu.tsx

@@ -20,7 +20,7 @@ export default function ProfileMenu() {
       <MenuHandler>
         <Avatar
           variant="circular"
-          alt="candice wu"
+          alt="tania andrew"
           className="cursor-pointer"
           src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
         />

components/docs/react/dialog/dialog-with-image.tsx

@@ -37,7 +37,7 @@ export function DialogWithImage() {
             <Avatar
               size="sm"
               variant="circular"
-              alt="candice wu"
+              alt="tania andrew"
               src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
             />
             <div className="-mt-px flex flex-col">
@@ -46,7 +46,7 @@ export function DialogWithImage() {
                 color="blue-gray"
                 className="font-medium"
               >
-                Candice Wu
+                Tania Andrew
               </Typography>
               <Typography
                 variant="small"

components/docs/react/navbar/complex-navbar.tsx

@@ -65,7 +65,7 @@ function ProfileMenu() {
           <Avatar
             variant="circular"
             size="sm"
-            alt="candice wu"
+            alt="tania andrew"
             className="border border-blue-500 p-0.5"
             src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
           />

components/docs/react/rating/rating-with-comment.tsx

@@ -13,7 +13,7 @@ export function RatingWithComment() {
         size="lg"
       />
       <Typography variant="h6" className="mt-4">
-        Candic Wu
+        Tania Andrew
       </Typography>
       <Typography color="gray" className="mb-4 font-normal">
         Lead Frontend Developer

components/docs/react/stepper/stepper-with-content.tsx

@@ -1,10 +1,6 @@
 import React from "react";
 import { Stepper, Step, Button, Typography } from "@material-tailwind/react";
-import {
-  CogIcon,
-  UserIcon,
-  BuildingLibraryIcon,
-} from "@heroicons/react/24/outline";
+import { CogIcon, UserIcon, BuildingLibraryIcon } from "@heroicons/react/24/outline";
 
 export function StepperWithContent() {
   const [activeStep, setActiveStep] = React.useState(0);
@@ -15,7 +11,7 @@ export function StepperWithContent() {
   const handlePrev = () => !isFirstStep && setActiveStep((cur) => cur - 1);
 
   return (
-    <div className="w-full py-4 px-24">
+    <div className="w-full px-24 py-4">
       <Stepper
         activeStep={activeStep}
         isLastStep={(value) => setIsLastStep(value)}
@@ -24,51 +20,33 @@ export function StepperWithContent() {
         <Step onClick={() => setActiveStep(0)}>
           <UserIcon className="h-5 w-5" />
           <div className="absolute -bottom-[4.5rem] w-max text-center">
-            <Typography
-              variant="h6"
-              color={activeStep === 0 ? "blue" : "blue-gray"}
-            >
-              Personal Details
+            <Typography variant="h6" color={activeStep === 0 ? "blue" : "blue-gray"}>
+              Step 1
             </Typography>
-            <Typography
-              color={activeStep === 0 ? "blue" : "gray"}
-              className="font-normal"
-            >
-              Your name and email address.
+            <Typography color={activeStep === 0 ? "blue" : "gray"} className="font-normal">
+              Details about yout account.
             </Typography>
           </div>
         </Step>
         <Step onClick={() => setActiveStep(1)}>
           <CogIcon className="h-5 w-5" />
           <div className="absolute -bottom-[4.5rem] w-max text-center">
-            <Typography
-              variant="h6"
-              color={activeStep === 1 ? "blue" : "blue-gray"}
-            >
-              Security Details
+            <Typography variant="h6" color={activeStep === 1 ? "blue" : "blue-gray"}>
+              Step 2
             </Typography>
-            <Typography
-              color={activeStep === 1 ? "blue" : "gray"}
-              className="font-normal"
-            >
-              Your password and secret key.
+            <Typography color={activeStep === 1 ? "blue" : "gray"} className="font-normal">
+              Details about yout account.
             </Typography>
           </div>
         </Step>
         <Step onClick={() => setActiveStep(2)}>
           <BuildingLibraryIcon className="h-5 w-5" />
           <div className="absolute -bottom-[4.5rem] w-max text-center">
-            <Typography
-              variant="h6"
-              color={activeStep === 2 ? "blue" : "blue-gray"}
-            >
-              Organization Details
+            <Typography variant="h6" color={activeStep === 2 ? "blue" : "blue-gray"}>
+              Step 3
             </Typography>
-            <Typography
-              color={activeStep === 2 ? "blue" : "gray"}
-              className="font-normal"
-            >
-              Your company details.
+            <Typography color={activeStep === 2 ? "blue" : "gray"} className="font-normal">
+              Details about yout account.
             </Typography>
           </div>
         </Step>

documentation/html/card.mdx

@@ -857,7 +857,7 @@ See below our beautiful card example that you can use in your Tailwind CSS proje
             Natali Craig
           </div>
           <img
-            alt="candice wu"
+            alt="tania andrew"
             src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
             className="relative inline-block h-9 w-9 rounded-full border-2 border-white object-cover object-center hover:z-10"
             data-tooltip-target="author-2"
@@ -866,7 +866,7 @@ See below our beautiful card example that you can use in your Tailwind CSS proje
             data-tooltip="author-2"
             class="absolute z-50 whitespace-normal break-words rounded-lg bg-black py-1.5 px-3 font-sans text-sm font-normal text-white focus:outline-none"
           >
-            Candice Wu
+            Tania Andrew
           </div>
         </div>
         <p className="block font-sans text-base font-normal leading-relaxed text-inherit antialiased">
@@ -908,7 +908,7 @@ See below our beautiful card example that you can use in your Tailwind CSS proje
           Natali Craig
         </div>
         <img
-          alt="candice wu"
+          alt="tania andrew"
           src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
           class="relative inline-block h-9 w-9 rounded-full border-2 border-white object-cover object-center hover:z-10"
           data-tooltip-target="author-2"
@@ -917,7 +917,7 @@ See below our beautiful card example that you can use in your Tailwind CSS proje
           data-tooltip="author-2"
           class="absolute z-50 whitespace-normal break-words rounded-lg bg-black py-1.5 px-3 font-sans text-sm font-normal text-white focus:outline-none"
         >
-          Candice Wu
+          Tania Andrew
         </div>
       </div>
       <p class="block font-sans text-base font-normal leading-relaxed text-inherit antialiased">
@@ -946,10 +946,10 @@ See below our beautiful card example that you can use in your Tailwind CSS proje
           How we design and code open-source projects?
         </h2>
         <h5 className="mb-4 block font-sans text-xl font-semibold leading-snug tracking-normal text-gray-400 antialiased">
-          Candice Wu
+          Tania Andrew
         </h5>
         <img
-          alt="candice wu"
+          alt="tania andrew"
           src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
           className="relative inline-block h-[74px] w-[74px] rounded-full border-2 border-white object-cover object-center"
         />
@@ -967,10 +967,10 @@ See below our beautiful card example that you can use in your Tailwind CSS proje
         How we design and code open-source projects?
       </h2>
       <h5 class="mb-4 block font-sans text-xl font-semibold leading-snug tracking-normal text-gray-400 antialiased">
-        Candice Wu
+        Tania Andrew
       </h5>
       <img
-        alt="candice wu"
+        alt="tania andrew"
         src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
         class="relative inline-block h-[74px] w-[74px] rounded-full border-2 border-white object-cover object-center"
       />
@@ -1399,13 +1399,13 @@ See below our beautiful card example that you can use in your Tailwind CSS proje
       <div className="relative mx-0 mt-4 flex items-center gap-4 overflow-hidden rounded-xl bg-transparent bg-clip-border pt-0 pb-8 text-gray-700 shadow-none">
         <img
           src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
-          alt="candice wu"
+          alt="tania andrew"
           className="relative inline-block h-[58px] w-[58px] !rounded-full object-cover object-center"
         />
         <div className="flex w-full flex-col gap-0.5">
           <div className="flex items-center justify-between">
             <h5 className="block font-sans text-xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
-              Candice Wu
+              Tania Andrew
             </h5>
             <div className="5 flex items-center gap-0">
               <svg
@@ -1495,13 +1495,13 @@ See below our beautiful card example that you can use in your Tailwind CSS proje
     <div class="relative mx-0 mt-4 flex items-center gap-4 overflow-hidden rounded-xl bg-transparent bg-clip-border pt-0 pb-8 text-gray-700 shadow-none">
       <img
         src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
-        alt="candice wu"
+        alt="tania andrew"
         class="relative inline-block h-[58px] w-[58px] !rounded-full object-cover object-center"
       />
       <div class="flex w-full flex-col gap-0.5">
         <div class="flex items-center justify-between">
           <h5 class="block font-sans text-xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
-            Candice Wu
+            Tania Andrew
           </h5>
           <div class="5 flex items-center gap-0">
             <svg

documentation/html/chip.mdx

@@ -269,14 +269,14 @@ Use the example below for a chip containing an avatar.
     <div className="center relative inline-block select-none whitespace-nowrap rounded-full bg-teal-500 px-3.5 py-1.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
       <div className="absolute top-2/4 left-1 h-5 w-5 -translate-y-2/4">
         <img
-          alt="candice wu"
+          alt="tania andrew"
           src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
           className="relative inline-block h-5 w-5 translate-x-px translate-y-px rounded-full object-cover object-center"
         />
       </div>
       <div className="ml-4 mt-px">
         <p className="block font-sans text-sm font-medium capitalize leading-none text-white antialiased">
-          Candice Wu
+          Tania Andrew
         </p>
       </div>
     </div>
@@ -286,14 +286,14 @@ Use the example below for a chip containing an avatar.
   <div class="center relative inline-block select-none whitespace-nowrap rounded-full bg-teal-500 px-3.5 py-1.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
     <div class="absolute top-2/4 left-1 h-5 w-5 -translate-y-2/4">
       <img
-        alt="candice wu"
+        alt="tania andrew"
         src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
         class="relative inline-block h-5 w-5 translate-x-px translate-y-px rounded-full object-cover object-center"
       />
     </div>
     <div class="ml-4 mt-px">
       <p class="block font-sans text-sm font-medium capitalize leading-none text-white antialiased">
-        Candice Wu
+        Tania Andrew
       </p>
     </div>
   </div>

documentation/html/dialog.mdx

@@ -1031,13 +1031,13 @@ Use the example below to create a dialog with an image inside, similar to unspla
           <div className="flex shrink-0 items-center justify-between p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
             <div className="flex items-center gap-3">
               <img
-                alt="candice wu"
+                alt="tania andrew"
                 src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
                 className="relative inline-block h-9 w-9 rounded-full object-cover object-center"
               />
               <div className="-mt-px flex flex-col">
                 <p className="block font-sans text-sm font-medium leading-normal text-blue-gray-900 antialiased">
-                  Candice Wu
+                  Tania Andrew
                 </p>
                 <p className="block font-sans text-xs font-normal text-gray-700 antialiased">
                   @canwu
@@ -1147,13 +1147,13 @@ Use the example below to create a dialog with an image inside, similar to unspla
       <div className="flex shrink-0 items-center justify-between p-4 font-sans text-2xl font-semibold leading-snug text-blue-gray-900 antialiased">
         <div className="flex items-center gap-3">
           <img
-            alt="candice wu"
+            alt="tania andrew"
             src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
             className="relative inline-block h-9 w-9 rounded-full object-cover object-center"
           />
           <div className="-mt-px flex flex-col">
             <p className="block font-sans text-sm font-medium leading-normal text-blue-gray-900 antialiased">
-              Candice Wu
+              Tania Andrew
             </p>
             <p className="block font-sans text-xs font-normal text-gray-700 antialiased">
               @canwu

documentation/html/menu.mdx

@@ -281,13 +281,13 @@ You can created nested/multi-level menus by setting the <Link href="/docs/html/p
           className="flex w-full cursor-pointer select-none items-center gap-4 rounded-md px-3 py-2 pr-8 pl-2 text-start leading-tight outline-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900"
         >
           <img
-            alt="candice wu"
+            alt="tania andrew"
             src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
             className="relative inline-block h-12 w-12 !rounded-full object-cover object-center"
           />
           <div className="flex flex-col gap-1">
             <p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
-              <span className="font-medium text-blue-gray-900">Wu</span> send
+              <span className="font-medium text-blue-gray-900">Tania</span> send
               you a message
             </p>
             <p className="flex items-center gap-1 font-sans text-xs font-light text-gray-600 antialiased">
@@ -401,13 +401,13 @@ You can created nested/multi-level menus by setting the <Link href="/docs/html/p
       className="flex w-full cursor-pointer select-none items-center gap-4 rounded-md px-3 py-2 pr-8 pl-2 text-start leading-tight outline-none transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900"
     >
       <img
-        alt="candice wu"
+        alt="tania andrew"
         src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
         className="relative inline-block h-12 w-12 !rounded-full object-cover object-center"
       />
       <div className="flex flex-col gap-1">
         <p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
-          <span className="font-medium text-blue-gray-900">Wu</span> send you a
+          <span className="font-medium text-blue-gray-900">Tania</span> send you a
           message
         </p>
         <p className="flex items-center gap-1 font-sans text-xs font-light text-gray-600 antialiased">
@@ -513,7 +513,7 @@ You can created nested/multi-level menus by setting the <Link href="/docs/html/p
   component={
     <>
       <img
-        alt="candice wu"
+        alt="tania andrew"
         src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
         className="relative inline-block h-12 w-12 cursor-pointer rounded-full object-cover object-center"
         data-popover-target="profile-menu"
@@ -660,7 +660,7 @@ You can created nested/multi-level menus by setting the <Link href="/docs/html/p
 >
   ```html
   <img
-    alt="candice wu"
+    alt="tania andrew"
     src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
     className="relative inline-block h-12 w-12 cursor-pointer rounded-full object-cover object-center"
     data-popover-target="profile-menu"