styles(company): update styles on landing page and all its sections

tyronejosee · Sep 25, 2024 · df649cd · df649cd
1 parent 5d73158
commit df649cd
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 30 deletions.
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -3,13 +3,7 @@ import { NextUIProvider } from "@nextui-org/react";
 import "../styles/globals.css";
 import { mainFont } from "@/config/fonts";
 import { getCompany } from "@/lib/api";
-import {
-  MenuBar,
-  Footer,
-  WhatsAppButton,
-  BackToTop,
-  DataProvider,
-} from "@/components";
+import { MenuBar, Footer, BackToTop, DataProvider } from "@/components";
 
 export const metadata: Metadata = {
   title: "Atlanta Ink - Tattoo Studio",
@@ -31,7 +25,6 @@ export default async function RootLayout({
             <MenuBar />
             {children}
             <Footer />
-            <WhatsAppButton />
             <BackToTop />
           </DataProvider>
         </NextUIProvider>

diff --git a/frontend/src/components/company/faq-section/FAQSection.tsx b/frontend/src/components/company/faq-section/FAQSection.tsx
@@ -37,7 +37,7 @@ export const FAQSection = ({ faqs }: Props) => {
                 variants={variants}
                 transition={{ duration: 0.3, delay: index * 0.1 }}
               >
-                <Accordion variant="splitted">
+                <Accordion variant="splitted" className="group">
                   <AccordionItem
                     key={faq.id}
                     aria-label={faq.question}
@@ -47,7 +47,7 @@ export const FAQSection = ({ faqs }: Props) => {
                       isOpen ? (
                         <ChevronLeft className="stroke-primary" />
                       ) : (
-                        <ChevronLeft />
+                        <ChevronLeft className="group-hover:stroke-primary" />
                       )
                     }
                     className="bg-neutral-darkgrey shadow-none"

diff --git a/frontend/src/components/company/hero-section/HeroSection.tsx b/frontend/src/components/company/hero-section/HeroSection.tsx
@@ -1,20 +1,20 @@
 "use client";
 
 import { motion } from "framer-motion";
+import { ChevronsDown } from "lucide-react";
 import { Logo } from "@/components";
 import { COMPANY_NAME, COMPANY_DESCRIPTION } from "@/config/constants";
 
 export const HeroSection = () => {
   return (
     <section className="bg-cover bg-center h-screen relative overflow-hidden">
       <video
-        className="absolute inset-0 object-cover h-full w-full"
+        className="absolute inset-0 object-cover h-full w-full opacity-75"
         src="/hero.mp4"
         autoPlay
         muted
         loop
       ></video>
-      <div className="absolute inset-0 bg-neutral-dark opacity-50"></div>
       <motion.div
         initial={{
           opacity: 0,
@@ -25,28 +25,26 @@ export const HeroSection = () => {
           y: 0,
         }}
         transition={{
-          duration: 1,
+          duration: 0.3,
         }}
         className="max-w-screen-xl mx-auto px-4 md:px-0 flex flex-col items-center justify-center h-full text-center relative z-10 space-y-4"
       >
-        <span className="text-md md:text-xl text-primary font-bold">
-          Tattoo Studio
+        <span className="text-md md:text-lg font-medium text-neutral-lightgray">
+          Tattoo Studio & Piercing
         </span>
-        <h2 className="text-5xl md:text-7xl font-bold">
+        <h2 className="text-5xl md:text-7xl font-bold text-white py-4 px-10 bg-primary rounded-xl">
           {COMPANY_NAME.toUpperCase()}
         </h2>
-        <p className="text-md md:text-lg max-w-screen-lg mb-6">
+        <p className="text-md md:text-lg max-w-screen-md text-neutral-lightgray">
           {COMPANY_DESCRIPTION}
         </p>
-        <motion.div
-          initial={{ opacity: 0, y: 100 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3, ease: "easeInOut", delay: 1 }}
-        ></motion.div>
       </motion.div>
-      <span className="absolute bottom-20 md:bottom-10 left-1/2 transform -translate-x-1/2 text-neutral-light animate-pulse">
-        Explore
-      </span>
+      <div className="absolute bottom-20 md:bottom-10 left-1/2 transform -translate-x-1/2  animate-pulse">
+        <div className="flex flex-col justify-center items-center">
+          <ChevronsDown />
+          <span className="text-neutral-light text-sm">Explore</span>
+        </div>
+      </div>
       <div className="hidden md:block absolute bottom-20 left-20">
         <Logo />
       </div>

diff --git a/frontend/src/components/company/price-section/PriceSection.tsx b/frontend/src/components/company/price-section/PriceSection.tsx
@@ -37,7 +37,7 @@ export const PriceSection = ({ prices }: Props) => {
                 variants={variants}
                 transition={{ duration: 0.5 }}
               >
-                <article className="p-6 shadow-md bg-neutral-darkgrey rounded-xl">
+                <article className="p-6 shadow-md bg-neutral-darkgrey hover:bg-neutral-dark rounded-xl">
                   <h3 className="text-xl font-bold mb-2">{price.name}</h3>
                   <p className="text-4xl font-bold text-primary">
                     {price.price_range}

diff --git a/frontend/src/components/company/service-section/ServiceSection.tsx b/frontend/src/components/company/service-section/ServiceSection.tsx
@@ -36,18 +36,18 @@ export const ServiceSection = ({ services }: Props) => {
               variants={variants}
               transition={{ duration: 0.5 }}
             >
-              <article className="relative h-64 p-4 space-y-2 flex flex-col justify-center items-center overflow-hidden rounded-xl">
-                <div className="absolute inset-0 bg-primary"></div>
+              <article className="group relative h-64 p-4 space-y-2 flex flex-col justify-center items-center overflow-hidden rounded-xl">
+                {/* <div className="absolute inset-0 bg-primary"></div> */}
                 <div className="absolute inset-0 bg-neutral-dark">
                   <Image
                     src={service.image || DEFAULT_IMAGE}
                     alt={service.name}
                     fill
                     style={{ objectFit: "cover" }}
-                    className="z-10 opacity-25"
+                    className="z-10 opacity-25 transform transition-transform duration-300 group-hover:scale-110"
                   />
                 </div>
-                <div className="relative z-20 p-4 space-y-2 text-center">
+                <div className="z-20 p-4 space-y-2 text-center">
                   <h4 className="text-xl font-bold text-primary">
                     {service.name}
                   </h4>