From 0f2f29e70e181a18dbee9edb8f697d024a863730 Mon Sep 17 00:00:00 2001 From: Kapil Jangid Date: Mon, 11 Nov 2024 02:01:10 +0530 Subject: [PATCH] - fixed: error changing an uncontrolled input to be controlled - code enhancement for better code readability via code formatting --- app/about/page.tsx | 96 +- app/globals.css | 45 +- app/pricing/page.tsx | 19 +- app/team/page.tsx | 9 +- components/Pricing/PricingSection.tsx | 45 +- components/Team/Hero.tsx | 43 +- components/Team/Team.tsx | 5 +- components/Team/TeamSection.tsx | 17 +- components/farmui/Maq.tsx | 2 +- components/farmui/Scrolls.tsx | 4 +- components/farmui/ShinyLights.tsx | 12514 +++++++++++++++--- components/main/TeamMembers.tsx | 79 +- components/main/accordian/Accordian.tsx | 50 +- components/main/accordian/AccordianItem.tsx | 26 +- components/main/bottom/Bottom.tsx | 58 +- components/main/input.tsx | 31 +- components/main/services/Services.tsx | 45 +- components/main/share-your-vision.tsx | 7 + components/main/team/Team.tsx | 16 +- components/shared/Container.tsx | 2 - components/shared/Topic.tsx | 6 +- data/TeamMember.ts | 14 +- data/menuitems.ts | 23 +- data/process.ts | 283 +- data/service.ts | 134 +- hooks/use-toast.ts | 127 +- lib/utils.ts | 6 +- 27 files changed, 11015 insertions(+), 2691 deletions(-) diff --git a/app/about/page.tsx b/app/about/page.tsx index d56679e..87853c8 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -1,35 +1,59 @@ -import Image from 'next/image'; -import Link from 'next/link'; -import Container from '@/components/shared/Container'; -import Topic from '@/components/shared/Topic'; +import Image from "next/image"; +import Link from "next/link"; +import Container from "@/components/shared/Container"; +import Topic from "@/components/shared/Topic"; const companyHistory = [ - { year: '2019', event: 'Founded AceXLabs' }, - { year: '2020', event: 'Expanded services to include Blockchain and SEO' }, - { year: '2021', event: 'Opened second office and doubled team size' }, - { year: '2023', event: 'Expanded services to include AI/ML Development' }, + { year: "2019", event: "Founded AceXLabs" }, + { year: "2020", event: "Expanded services to include Blockchain and SEO" }, + { year: "2021", event: "Opened second office and doubled team size" }, + { year: "2023", event: "Expanded services to include AI/ML Development" }, ]; const teamHighlights = [ - { name: 'Pratik Tiwari', role: 'Senior Engineer', image: 'https://avatars.githubusercontent.com/u/64960569?v=4' }, - { name: 'Jacques', role: 'Senior AI Engineer', image: 'https://pbs.twimg.com/profile_images/1764600506721116160/ZI5JGcHu_400x400.jpg' }, - { name: 'Axat Bhardwaj', role: 'Smart Contract Engineer', image: 'https://pbs.twimg.com/profile_images/1847924192085479424/d8vknhTn_400x400.jpg' }, + { + name: "Pratik Tiwari", + role: "Senior Engineer", + image: "https://avatars.githubusercontent.com/u/64960569?v=4", + }, + { + name: "Jacques", + role: "Senior AI Engineer", + image: + "https://pbs.twimg.com/profile_images/1764600506721116160/ZI5JGcHu_400x400.jpg", + }, + { + name: "Axat Bhardwaj", + role: "Smart Contract Engineer", + image: + "https://pbs.twimg.com/profile_images/1847924192085479424/d8vknhTn_400x400.jpg", + }, ]; export default function AboutUs() { return ( -
- +
+

Our Mission

- Our mission is to empower businesses with innovative product development strategies, cutting-edge AI, Blockchain, App Development, and SEO - solutions. We're passionate about building meaningful connections between brands and their audiences, using advanced technology and - data-driven insights to drive exceptional outcomes. By focusing on impactful strategies and seamless digital experiences, we help brands - not only reach their potential but also thrive in an ever-evolving digital landscape. + Our mission is to empower businesses with innovative product + development strategies, cutting-edge AI, Blockchain, App + Development, and SEO solutions. We're passionate about building + meaningful connections between brands and their audiences, using + advanced technology and data-driven insights to drive exceptional + outcomes. By focusing on impactful strategies and seamless digital + experiences, we help brands not only reach their potential but also + thrive in an ever-evolving digital landscape.

@@ -37,7 +61,9 @@ export default function AboutUs() {
{companyHistory.map((item, index) => (
-
{item.year}
+
+ {item.year} +
{item.event}
))} @@ -47,10 +73,21 @@ export default function AboutUs() {

Meet Our Leadership

{teamHighlights.map((member, index) => ( -
- {member.name} +
+ {member.name}

{member.name}

-

{member.role}

+

+ {member.role} +

))}
@@ -58,8 +95,13 @@ export default function AboutUs() {
-

Ready to grow your business?

-

Let's collaborate to create a tailored digital services that drives results for your brand.

+

+ Ready to grow your business? +

+

+ Let's collaborate to create a tailored digital services + that drives results for your brand. +

- Team collaboration illustration + Team collaboration illustration
diff --git a/app/globals.css b/app/globals.css index 226590a..d105a87 100644 --- a/app/globals.css +++ b/app/globals.css @@ -102,33 +102,30 @@ body { } } - /* accordion style */ .accordion__icon::before, - .accordion__icon::after { - content: ""; - position: absolute; - background-color: rgb(223, 209, 209); - transition: opacity 0.3s ease; - } - - .accordion__icon::before { - width: 100%; - height: 6px; /* Increased from 2px to 6px */ - left: 0; - top: calc(50% - 3px); /* Adjusted to center the thicker line */ - } +.accordion__icon::after { + content: ""; + position: absolute; + background-color: rgb(223, 209, 209); + transition: opacity 0.3s ease; +} - .accordion__icon::after { - width: 6px; /* Increased from 2px to 6px */ - height: 100%; - left: calc(50% - 3px); /* Adjusted to center the thicker line */ - top: 0; - } +.accordion__icon::before { + width: 100%; + height: 6px; /* Increased from 2px to 6px */ + left: 0; + top: calc(50% - 3px); /* Adjusted to center the thicker line */ +} - .accordion__icon.collapsed::after { - opacity: 0; - } +.accordion__icon::after { + width: 6px; /* Increased from 2px to 6px */ + height: 100%; + left: calc(50% - 3px); /* Adjusted to center the thicker line */ + top: 0; +} - \ No newline at end of file +.accordion__icon.collapsed::after { + opacity: 0; +} diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx index 7d58239..2dd2074 100644 --- a/app/pricing/page.tsx +++ b/app/pricing/page.tsx @@ -1,11 +1,10 @@ -import PricingSection from "@/components/Pricing/PricingSection" +import PricingSection from "@/components/Pricing/PricingSection"; -const page = ()=> { - - return ( -
- -
- ) -} -export default page; \ No newline at end of file +const page = () => { + return ( +
+ +
+ ); +}; +export default page; diff --git a/app/team/page.tsx b/app/team/page.tsx index d8f0eab..d475216 100644 --- a/app/team/page.tsx +++ b/app/team/page.tsx @@ -1,8 +1,9 @@ import Team from "@/components/Team/Team"; - export default function Page() { - return <> - + return ( + <> + -} \ No newline at end of file + ); +} diff --git a/components/Pricing/PricingSection.tsx b/components/Pricing/PricingSection.tsx index 8742b63..9f4bf9e 100644 --- a/components/Pricing/PricingSection.tsx +++ b/components/Pricing/PricingSection.tsx @@ -1,11 +1,11 @@ -'use client' +"use client"; -import { Button } from "@/components/ui/button" -import { usePathname, useRouter } from "next/navigation" -import { MvpCard } from "./MvpCard" -import { StartupCard } from "./StartupCard" -import { GrowthCard } from "./GrowthCard" -import Topic from "../shared/Topic" +import { Button } from "@/components/ui/button"; +import { usePathname, useRouter } from "next/navigation"; +import { MvpCard } from "./MvpCard"; +import { StartupCard } from "./StartupCard"; +import { GrowthCard } from "./GrowthCard"; +import Topic from "../shared/Topic"; export default function Component() { const router = useRouter(); @@ -21,22 +21,25 @@ export default function Component() {
{/* MVP Development Package Card rand*/} - + {/* Startup Booster Package Card */} - + {/* Growth Retainer Package Card */} - +
- { currentPath === '/' && -
- -
-} + {currentPath === "/" && ( +
+ +
+ )}
- ) + ); } diff --git a/components/Team/Hero.tsx b/components/Team/Hero.tsx index 88e8dea..0374c22 100644 --- a/components/Team/Hero.tsx +++ b/components/Team/Hero.tsx @@ -1,28 +1,27 @@ -"use client" +"use client"; import GradualSpacing from "../farmui/GradualSpacing"; - -export const Hero = ({isInView}:{isInView:boolean}) => { - return ( +export const Hero = ({ isInView }: { isInView: boolean }) => { + return ( <> - - - + + +

Your priceless personal data shouldn't be stuck in a device diff --git a/components/Team/Team.tsx b/components/Team/Team.tsx index a67730c..0c424ac 100644 --- a/components/Team/Team.tsx +++ b/components/Team/Team.tsx @@ -10,7 +10,6 @@ import { TeamSection } from "./TeamSection"; import { teamData } from "@/data/process"; import { useInView } from "framer-motion"; - export default function Team() { const ref = useRef(null); const isInView = useInView(ref); @@ -24,8 +23,8 @@ export default function Team() {

- - + +
diff --git a/components/Team/TeamSection.tsx b/components/Team/TeamSection.tsx index ae128f8..b9c41f4 100644 --- a/components/Team/TeamSection.tsx +++ b/components/Team/TeamSection.tsx @@ -1,5 +1,5 @@ -import { TeamMember } from '@/data/TeamMember'; -import Image from 'next/image'; +import { TeamMember } from "@/data/TeamMember"; +import Image from "next/image"; interface TeamSectionProps { teamData: TeamMember[]; @@ -9,7 +9,10 @@ interface TeamSectionProps { export const TeamSection = ({ teamData }: TeamSectionProps) => { return ( <> -

+

Meet the team

@@ -23,7 +26,13 @@ export const TeamSection = ({ teamData }: TeamSectionProps) => {
- {member.name} + {member.name}
{member.title}
diff --git a/components/farmui/Maq.tsx b/components/farmui/Maq.tsx index f1779e9..bc8509c 100644 --- a/components/farmui/Maq.tsx +++ b/components/farmui/Maq.tsx @@ -28,7 +28,7 @@ export default function Marquee({ "flex-row": !vertical, "flex-col": vertical, }, - className, + className )} > {Array(repeat) diff --git a/components/farmui/Scrolls.tsx b/components/farmui/Scrolls.tsx index 9a19276..b0e61a6 100644 --- a/components/farmui/Scrolls.tsx +++ b/components/farmui/Scrolls.tsx @@ -66,7 +66,6 @@ const reviews = [ }, ]; - const firstRow = reviews.slice(0, reviews.length / 2); const secondRow = reviews.slice(reviews.length / 2); @@ -88,7 +87,7 @@ const ReviewCard = ({ // light styles "border-white/10 ", // dark styles - "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]", + "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]" )} >
@@ -118,7 +117,6 @@ const MarqueeDemoVertical = () => { ))} -
); }; diff --git a/components/farmui/ShinyLights.tsx b/components/farmui/ShinyLights.tsx index a704430..f1ee5fd 100644 --- a/components/farmui/ShinyLights.tsx +++ b/components/farmui/ShinyLights.tsx @@ -1,5 +1,4 @@ - -import React from 'react' +import React from "react"; import { cn } from "@/lib/utils"; export const TopLeftShiningLight: React.FC = () => ( @@ -77,8 +76,16 @@ export const TopLeftShiningLight: React.FC = () => ( colorInterpolationFilters="sRGB" > - - + + ( colorInterpolationFilters="sRGB" > - - + + ( colorInterpolationFilters="sRGB" > - - + + ( colorInterpolationFilters="sRGB" > - - + + ( colorInterpolationFilters="sRGB" > - - + + ( colorInterpolationFilters="sRGB" > - - + + { colorInterpolationFilters="sRGB" > - - + + { colorInterpolationFilters="sRGB" > - - + + { colorInterpolationFilters="sRGB" > - - + + { colorInterpolationFilters="sRGB" > - - + + { colorInterpolationFilters="sRGB" > - - + + { colorInterpolationFilters="sRGB" > - - + + { colorInterpolationFilters="sRGB" > - - + + { colorInterpolationFilters="sRGB" > - - + + { ); }; -export const HeroMainboardStuff: React.FC<{ className: string }> = ({ className }) => ( +export const HeroMainboardStuff: React.FC<{ className: string }> = ({ + className, +}) => ( = ({ className /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className - - + + = ({ className type="matrix" values="0 0 0 0 0.466667 0 0 0 0 0.278431 0 0 0 0 1 0 0 0 1 0" /> - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className > - + = ({ className - - + + = ({ className /> - - + + = ({ className /> - - + + = ({ className type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 0.988235 0 0 0 0 0.945098 0 0 0 1 0" /> - + = ({ className - - + + = ({ className type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 0.988235 0 0 0 0 0.945098 0 0 0 1 0" /> - + = ({ className - + - + @@ -3302,7 +6792,9 @@ export const HeroMainboardStuff: React.FC<{ className: string }> = ({ className ); -export const HeroMainboardStuffMobile: React.FC<{ className: string }> = ({ className }) => ( +export const HeroMainboardStuffMobile: React.FC<{ className: string }> = ({ + className, +}) => ( = ({ clas height="546" > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - = ({ clas fillOpacity="0.6" /> - - - + + + = ({ clas fillOpacity="0.6" /> - - - + + + - - - - - + + + + + = ({ clas strokeOpacity="0.3" strokeWidth="0.5" /> - + - + - + = ({ clas shapeRendering="crispEdges" /> - - - + + + = ({ clas strokeOpacity="0.3" strokeWidth="0.5" /> - + = ({ clas strokeOpacity="0.3" strokeWidth="0.5" /> - + - + - + = ({ clas strokeOpacity="0.3" strokeWidth="0.5" /> - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas - - + + = ({ clas type="matrix" values="0 0 0 0 0.466667 0 0 0 0 0.278431 0 0 0 0 1 0 0 0 1 0" /> - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas > - + = ({ clas - - + + = ({ clas /> - - + + = ({ clas /> - - + + = ({ clas type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 0.988235 0 0 0 0 0.945098 0 0 0 1 0" /> - + = ({ clas - - + + = ({ clas type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 0.988235 0 0 0 0 0.945098 0 0 0 1 0" /> - + = ({ clas - + - + @@ -6126,198 +12995,1452 @@ export function SubHeroMainboardStuff({ className }: { className?: string }) { height="324" > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + - - - + + + - - + + - - - - - - + + + + + + - + diff --git a/components/main/TeamMembers.tsx b/components/main/TeamMembers.tsx index 462ed4a..7fc87c7 100644 --- a/components/main/TeamMembers.tsx +++ b/components/main/TeamMembers.tsx @@ -1,32 +1,51 @@ - /* eslint-disable @next/next/no-img-element */ export const TeamMembers = [ - { - icon: ( - h - ), - title: "Pratik Tiwari", - desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.", - }, - { - icon: ( - h - ), - title: "Rishi", - desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.", - }, - { - icon: ( - h - ), - title: "Axat Bhardwaj", - desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.", - }, - { - icon: ( - h - ), - title: "Satyam Shubham", - desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.", - }, - ]; \ No newline at end of file + { + icon: ( + h + ), + title: "Pratik Tiwari", + desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.", + }, + { + icon: ( + h + ), + title: "Rishi", + desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.", + }, + { + icon: ( + h + ), + title: "Axat Bhardwaj", + desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.", + }, + { + icon: ( + h + ), + title: "Satyam Shubham", + desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.", + }, +]; diff --git a/components/main/accordian/Accordian.tsx b/components/main/accordian/Accordian.tsx index f3c331c..6f2a0f4 100644 --- a/components/main/accordian/Accordian.tsx +++ b/components/main/accordian/Accordian.tsx @@ -1,34 +1,30 @@ - -import { Process } from '@/data/process' -import Container from '../../shared/Container' -import AccordionItem from './AccordianItem' -import Topic from '../../shared/Topic' +import { Process } from "@/data/process"; +import Container from "../../shared/Container"; +import AccordionItem from "./AccordianItem"; +import Topic from "../../shared/Topic"; export default function Accordian() { return (
- -
-{ - Process.map( - ({index,label,content})=>{ - return ( - - ) - } - ) -} + className="relative flex flex-col items-center md:flex-row mt-20" + id="Process" + > + +
+ {Process.map(({ index, label, content }) => { + return ( + + ); + })} - ) + ); } diff --git a/components/main/accordian/AccordianItem.tsx b/components/main/accordian/AccordianItem.tsx index c994b14..64c2d07 100644 --- a/components/main/accordian/AccordianItem.tsx +++ b/components/main/accordian/AccordianItem.tsx @@ -1,6 +1,6 @@ -"use client" +"use client"; -import { useState, useEffect, useRef } from 'react'; +import { useState, useEffect, useRef } from "react"; interface AccordionProps { index: number; @@ -16,14 +16,17 @@ const AccordionItem = ({ index, title, description }: AccordionProps) => { useEffect(() => { // Handle clicks outside of accordion const handleClickOutside = (event: MouseEvent) => { - if (accordionRef.current && !accordionRef.current.contains(event.target as Node)) { + if ( + accordionRef.current && + !accordionRef.current.contains(event.target as Node) + ) { setIsActive(false); } }; - document.addEventListener('click', handleClickOutside); + document.addEventListener("click", handleClickOutside); return () => { - document.removeEventListener('click', handleClickOutside); + document.removeEventListener("click", handleClickOutside); }; }, []); @@ -37,12 +40,13 @@ const AccordionItem = ({ index, title, description }: AccordionProps) => {