docs: update the pages

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"

documentation/html/popover.mdx

@@ -509,7 +509,7 @@ You can modify the open/close state animation for popover by adding the <Code ht
         <div className="mb-2 flex items-center justify-between gap-4">
           <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-12 w-12 rounded-full object-cover object-center"
           />
           <button
@@ -521,7 +521,7 @@ You can modify the open/close state animation for popover by adding the <Code ht
           </button>
         </div>
         <h6 className="mb-2 flex items-center gap-2 font-sans text-base font-medium leading-relaxed tracking-normal text-blue-gray-900 antialiased">
-          <span>Candice Wu</span> •{" "}
+          <span>Tania Andrew</span> •{" "}
           <a class="text-sm text-blue-gray-700" href="#">
             @canwu
           </a>
@@ -596,7 +596,7 @@ You can modify the open/close state animation for popover by adding the <Code ht
     <div className="mb-2 flex items-center justify-between gap-4">
       <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-12 w-12 rounded-full object-cover object-center"
       />
       <button
@@ -608,7 +608,7 @@ You can modify the open/close state animation for popover by adding the <Code ht
       </button>
     </div>
     <h6 className="mb-2 flex items-center gap-2 font-sans text-base font-medium leading-relaxed tracking-normal text-blue-gray-900 antialiased">
-      <span>Candice Wu</span> •{" "}
+      <span>Tania Andrew</span> •{" "}
       <a class="text-sm text-blue-gray-700" href="#">
         @canwu
       </a>

documentation/react/avatar.mdx

@@ -158,21 +158,21 @@ You can use avatar with other components as well, see example below.
     <div className="flex items-center gap-4">
       <Avatar src="/img/face-2.jpg" alt="avatar" />
       <div>
-        <Typography variant="h6">Candice Wu</Typography>
+        <Typography variant="h6">Tania Andrew</Typography>
         <Typography variant="small" color="gray" className="font-normal">Web Developer</Typography>
       </div>
     </div> 
     <div className="flex items-center gap-4">
       <Avatar src="/img/face-2.jpg" alt="avatar" variant="rounded" />
       <div>
-        <Typography variant="h6">Candice Wu</Typography>
+        <Typography variant="h6">Tania Andrew</Typography>
         <Typography variant="small" color="gray" className="font-normal">Web Developer</Typography>
       </div>
     </div> 
     <div className="flex items-center gap-4">
       <Avatar src="/img/face-2.jpg" alt="avatar" variant="square" />
       <div>
-        <Typography variant="h6">Candice Wu</Typography>
+        <Typography variant="h6">Tania Andrew</Typography>
         <Typography variant="small" color="gray" className="font-normal">Web Developer</Typography>
       </div>
     </div> 
@@ -187,21 +187,21 @@ export default function Example() {
       <div className="flex items-center gap-4">
         <Avatar src="/img/face-2.jpg" alt="avatar" />
         <div>
-          <Typography variant="h6">Candice Wu</Typography>
+          <Typography variant="h6">Tania Andrew</Typography>
           <Typography variant="small" color="gray" className="font-normal">Web Developer</Typography>
         </div>
       </div> 
       <div className="flex items-center gap-4">
         <Avatar src="/img/face-2.jpg" alt="avatar" variant="rounded" />
         <div>
-          <Typography variant="h6">Candice Wu</Typography>
+          <Typography variant="h6">Tania Andrew</Typography>
           <Typography variant="small" color="gray" className="font-normal">Web Developer</Typography>
         </div>
       </div> 
       <div className="flex items-center gap-4">
         <Avatar src="/img/face-2.jpg" alt="avatar" variant="square" />
         <div>
-          <Typography variant="h6">Candice Wu</Typography>
+          <Typography variant="h6">Tania Andrew</Typography>
           <Typography variant="small" color="gray" className="font-normal">Web Developer</Typography>
         </div>
       </div> 

documentation/react/card.mdx

@@ -651,11 +651,11 @@ Showcase blog posts in a visually appealing way with our example of blog card. I
             className="border-2 border-white hover:z-10"
           />
         </Tooltip>
-        <Tooltip content="Candice Wu">
+        <Tooltip content="Tania Andrew">
           <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"
             className="border-2 border-white hover:z-10"
           />
@@ -710,11 +710,11 @@ export default function Example() {
               className="border-2 border-white hover:z-10"
             />
           </Tooltip>
-          <Tooltip content="Candice Wu">
+          <Tooltip content="Tania Andrew">
             <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"
               className="border-2 border-white hover:z-10"
             />
@@ -758,12 +758,12 @@ If you are looking for a more sophisticated blog card, use this example which us
         How we design and code open-source projects?
       </Typography>
       <Typography variant="h5" className="mb-4 text-gray-400">
-        Candice Wu
+        Tania Andrew
       </Typography>
       <Avatar
         size="xl"
         variant="circular"
-        alt="candice wu"
+        alt="tania andrew"
         className="border-2 border-white"
         src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
       />
@@ -802,12 +802,12 @@ export default function Example() {
           How we design and code open-source projects?
         </Typography>
         <Typography variant="h5" className="mb-4 text-gray-400">
-          Candice Wu
+          Tania Andrew
         </Typography>
         <Avatar
           size="xl"
           variant="circular"
-          alt="candice wu"
+          alt="tania andrew"
           className="border-2 border-white"
           src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
         />
@@ -1020,12 +1020,12 @@ The testimonial section is a necessary component of any website. Use our card ex
         size="lg"
         variant="circular"
         src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
-        alt="candice wu"
+        alt="tania andrew"
       />
       <div className="flex w-full flex-col gap-0.5">
         <div className="flex items-center justify-between">
           <Typography variant="h5" color="blue-gray">
-            Candice Wu
+            Tania Andrew
           </Typography>
           <div className="5 flex items-center gap-0">
             <SolidIcons.StarIcon className="h-5 w-5 text-yellow-700" />
@@ -1070,12 +1070,12 @@ export default function Example() {
           size="lg"
           variant="circular"
           src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
-          alt="candice wu"
+          alt="tania andrew"
         />
         <div className="flex w-full flex-col gap-0.5">
           <div className="flex items-center justify-between">
             <Typography variant="h5" color="blue-gray">
-              Candice Wu
+              Tania Andrew
             </Typography>
             <div className="5 flex items-center gap-0">
               <StarIcon className="h-5 w-5 text-yellow-700" />

documentation/react/chip.mdx

@@ -504,7 +504,7 @@ Use the example below for a chip containing an avatar.
         size="xs"
         variant="circular"
         className="w-full h-full -translate-x-0.5"
-        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"
       />
     }
@@ -514,7 +514,7 @@ Use the example below for a chip containing an avatar.
         color="white"
         className="font-medium capitalize leading-none"
       >
-        Candice Wu
+        Tania Andrew
       </Typography>
     }
     color="teal"
@@ -532,7 +532,7 @@ export default function Example() {
           size="xs"
           variant="circular"
           className="w-full h-full -translate-x-0.5"
-          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"
         />
       }
@@ -542,7 +542,7 @@ export default function Example() {
           color="white"
           className="font-medium capitalize leading-none"
         >
-          Candice Wu
+          Tania Andrew
         </Typography>
       }
       color="teal"

documentation/react/dialog.mdx

@@ -547,7 +547,7 @@ export default function Example() {
             <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">
@@ -556,7 +556,7 @@ export default function Example() {
                 color="blue-gray"
                 className="font-medium"
               >
-                Candice Wu
+                Tania Andrew
               </Typography>
               <Typography
                 variant="small"

documentation/react/list.mdx

@@ -85,7 +85,7 @@ You can use the <Code>{`<ListItemPrefix />`}</Code> component to put images or i
         </ListItemPrefix>
         <div>
           <Typography variant="h6" color="blue-gray">
-            Candice Wu
+            Tania Andrew
           </Typography>
           <Typography variant="small" color="gray" className="font-normal">
             Software Engineer @ Material Tailwind
@@ -141,7 +141,7 @@ export default function Example() {
           </ListItemPrefix>
           <div>
             <Typography variant="h6" color="blue-gray">
-              Candice Wu
+              Tania Andrew
             </Typography>
             <Typography variant="small" color="gray" className="font-normal">
               Software Engineer @ Material Tailwind

documentation/react/menu.mdx

@@ -1017,12 +1017,12 @@ Add this menu if you want to group all the notifications in one place, avoiding
       <MenuItem className="flex items-center gap-4 py-2 pr-8 pl-2">
         <Avatar
           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="flex flex-col gap-1">
           <Typography variant="small" color="gray" className="font-normal">
-            <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
           </Typography>
           <Typography
@@ -1100,12 +1100,12 @@ export default function Day10() {
         <MenuItem className="flex items-center gap-4 py-2 pr-8 pl-2">
           <Avatar
             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="flex flex-col gap-1">
             <Typography variant="small" color="gray" className="font-normal">
-              <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
             </Typography>
             <Typography
@@ -1194,7 +1194,7 @@ export default function Example() {
       <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"
         />

documentation/react/navbar.mdx

@@ -526,7 +526,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"
           />

documentation/react/popover.mdx

@@ -427,9 +427,9 @@ Use this example of  a popover component to help users get the help they need ea
     </PopoverHandler>
     <PopoverContent className="w-72">
       <div className="flex items-center gap-4 border-b border-blue-gray-50 pb-4 mb-4">
-        <Avatar src="/img/team-4.jpg" alt="candice wu" />
+        <Avatar src="/img/team-4.jpg" alt="tania andrew" />
         <div>
-          <Typography variant="h6" color="blue-gray">Candice Wu</Typography>
+          <Typography variant="h6" color="blue-gray">Tania Andrew</Typography>
           <Typography variant="small" color="gray" className="font-normal">General Manager</Typography>
         </div>
       </div>
@@ -489,9 +489,9 @@ export default function Example() {
       </PopoverHandler>
       <PopoverContent className="w-72">
         <div className="flex items-center gap-4 border-b border-blue-gray-50 pb-4 mb-4">
-          <Avatar src="/img/team-4.jpg" alt="candice wu" />
+          <Avatar src="/img/team-4.jpg" alt="tania andrew" />
           <div>
-            <Typography variant="h6" color="blue-gray">Candice Wu</Typography>
+            <Typography variant="h6" color="blue-gray">Tania Andrew</Typography>
             <Typography variant="small" color="gray" className="font-normal">General Manager</Typography>
           </div>
         </div>
@@ -632,7 +632,7 @@ Use this example to help the user find out more information about a profile.
                 size="md"
                 variant="circular"
                 src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
-                alt="candice wu"
+                alt="tania andrew"
               />
               <Button
                 variant="gradient"
@@ -648,7 +648,7 @@ Use this example to help the user find out more information about a profile.
               color="blue-gray"
               className="mb-2 flex items-center gap-2 font-medium"
             >
-              <span>Candice Wu</span> •{" "}
+              <span>Tania Andrew</span> •{" "}
               <a href="#" className="text-sm text-blue-gray-700">
                 @canwu
               </a>
@@ -717,7 +717,7 @@ export default function Example() {
             size="md"
             variant="circular"
             src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
-            alt="candice wu"
+            alt="tania andrew"
           />
           <Button
             variant="gradient"
@@ -733,7 +733,7 @@ export default function Example() {
           color="blue-gray"
           className="mb-2 flex items-center gap-2 font-medium"
         >
-          <span>Candice Wu</span> •{" "}
+          <span>Tania Andrew</span> •{" "}
           <a href="#" className="text-sm text-blue-gray-700">
             @canwu
           </a>

documentation/react/rating-bar.mdx

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