style: update logo, home section components and auth styles

Author: dashaaaa21

client/src/assets/logo.svg

@@ -1,5 +1,4 @@
 import { FeatureCard } from "./FeatureCard";
-import { Button } from "../../ui/button/Button";
 import HomeSection1Icon from "../../icons/HomeSection1Icon";
 import HomeSection1Icon2 from "../../icons/HomeSection1Icon2";
 import HomeSection1Icon3 from "../../icons/HomeSection1Icon3";
@@ -54,10 +53,6 @@ export const Features = () => {
             />
           ))}
         </div>
-
-        <div className="flex justify-center mt-12 sm:mt-16 lg:mt-20">
-          <Button variant="secondary">More</Button>
-        </div>
       </div>
     </section>
   );

client/src/components/homeSection/Features/Features.tsx

@@ -2,10 +2,18 @@ import { SubjectCard } from "./SubjectCard";
 import { Button } from "../../ui/button/Button";
 import bgImage from "../../../assets/images/bg-popular-subjects.png";
 import { Subjects } from "../../../constants/subjects";
+import { useNavigate } from "react-router-dom";
+import { publicRoutesVariables } from "../../../router/routesVariables/pathVariables";
 
 const subjectLabels = Subjects.map((subject) => subject.label);
 
 export const PopularSubjects = () => {
+  const navigate = useNavigate();
+
+  const handleStartClick = () => {
+    navigate(publicRoutesVariables.teachers);
+    window.scrollTo(0, 0);
+  };
   return (
     <section className="relative section-spacing overflow-hidden">
       <div className="absolute inset-0 z-0 px-4 sm:px-6 lg:px-8 hidden xl:block">
@@ -27,7 +35,11 @@ export const PopularSubjects = () => {
             programming subjects — all in one place.
           </p>
 
-          <Button variant="secondary" className="mb-8">
+          <Button
+            onClick={handleStartClick}
+            variant="secondary"
+            className="mb-8"
+          >
             Start
           </Button>
 
@@ -45,7 +57,9 @@ export const PopularSubjects = () => {
                 On our platform, you can learn a wide range of foreign languages
                 and programming subjects — all in one place.
               </p>
-              <Button variant="secondary">Start</Button>
+              <Button onClick={handleStartClick} variant="secondary">
+                Start
+              </Button>
             </div>
 
             <h2 className="text-[74px] font-bold w-[394px] leading-tight">

client/src/components/homeSection/PopularSubjects/PopularSubjects.tsx

@@ -1,29 +1,20 @@
-import { Button } from "../ui/button/Button";
 import { NavLink } from "react-router-dom";
 import { publicRoutesVariables } from "../../router/routesVariables/pathVariables";
 import { twMerge } from "tailwind-merge";
+import logoImage from "../../assets/logo.svg";
 
 type LogoProps = {
   className?: string;
 };
 
 export const Logo = ({ className }: LogoProps) => {
   return (
-    <Button
-      as={NavLink}
+    <NavLink
       to={publicRoutesVariables.home}
-      className={twMerge(
-        `
-          font-bold text-[25.2px]
-          leading-[100%]
-          tracking-[-0.14px]
-          text-light-100
-        `,
-        className,
-      )}
-      variant="link"
+      className={twMerge("inline-flex items-center gap-2", className)}
     >
-      StudyBridge
-    </Button>
+      <img src={logoImage} alt="StudyBridge" className="h-16 w-auto" />
+      <span className="text-white text-2xl font-bold">Study Bridge</span>
+    </NavLink>
   );
 };

client/src/components/logo/Logo.tsx

@@ -67,7 +67,7 @@ export const AddReview = ({
         month: "short",
         year: "numeric",
       },
-    )}`,
+    )} • ${app.time}`,
   }));
 
   // Find the selected booking details for use in the review

client/src/components/teacherSection/Reviews/AddReview.tsx

@@ -4,7 +4,50 @@
   }
 
   .auth-form {
-    @apply w-full max-w-[1326px] px-[20px] py-[100px] md:px-[150px] md:py-[100px] bg-bg-secondary mt-[30px] rounded-[20px] border border-dark-600;
+    @apply w-full max-w-[1326px] px-[20px] py-[100px] md:px-[150px] md:py-[100px] bg-bg-secondary mt-[30px] rounded-[20px] relative;
+    border: 2px solid transparent;
+    background:
+      linear-gradient(var(--color-bg-secondary), var(--color-bg-secondary))
+        padding-box,
+      conic-gradient(from 0deg, #7186ff, #fe7587, #00d4ff, #7186ff) border-box;
+    animation: spinBorder 4s linear infinite;
+  }
+
+  @keyframes spinBorder {
+    0% {
+      background:
+        linear-gradient(var(--color-bg-secondary), var(--color-bg-secondary))
+          padding-box,
+        conic-gradient(from 0deg, #7186ff, #fe7587, #00d4ff, #7186ff) border-box;
+    }
+    25% {
+      background:
+        linear-gradient(var(--color-bg-secondary), var(--color-bg-secondary))
+          padding-box,
+        conic-gradient(from 90deg, #7186ff, #fe7587, #00d4ff, #7186ff)
+          border-box;
+    }
+    50% {
+      background:
+        linear-gradient(var(--color-bg-secondary), var(--color-bg-secondary))
+          padding-box,
+        conic-gradient(from 180deg, #7186ff, #fe7587, #00d4ff, #7186ff)
+          border-box;
+    }
+    75% {
+      background:
+        linear-gradient(var(--color-bg-secondary), var(--color-bg-secondary))
+          padding-box,
+        conic-gradient(from 270deg, #7186ff, #fe7587, #00d4ff, #7186ff)
+          border-box;
+    }
+    100% {
+      background:
+        linear-gradient(var(--color-bg-secondary), var(--color-bg-secondary))
+          padding-box,
+        conic-gradient(from 360deg, #7186ff, #fe7587, #00d4ff, #7186ff)
+          border-box;
+    }
   }
 
   .auth-title {