109 lines
5.0 KiB
TypeScript
109 lines
5.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
// Define the Item interface
|
|
interface Item {
|
|
id: number;
|
|
media: string; // URL for image or video
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
// Define the items array with type annotations
|
|
const items: Item[] = [
|
|
{
|
|
id: 1,
|
|
media: "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860621/Homepage%20%E2%80%94%20Sept%202024/sc01_HP_240917_Connect_v01_edm2pd.mp4",
|
|
title: "Product Management",
|
|
description:
|
|
"Coordinate and manage product sprints in collaboration with cross-functional team members, ensuring efficient planning and execution. Work closely with partners from different teams to iterate rapidly, align goals, and drive continuous improvement throughout the development process.",
|
|
},
|
|
{
|
|
id: 2,
|
|
media: "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860622/Homepage%20%E2%80%94%20Sept%202024/sc02_HP_240917_Automate_v01_tnxxyr.mp4",
|
|
title: "Marketing",
|
|
description:
|
|
"Develop and implement marketing strategies to promote products and services, analyze market trends, and identify target audiences. Collaborate with sales teams to create effective campaigns that drive brand awareness and customer engagement while measuring the effectiveness of marketing initiatives.",
|
|
},
|
|
{
|
|
id: 3,
|
|
media: "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860625/Homepage%20%E2%80%94%20Sept%202024/sc03_HP_240917_Power-with-AI_v02_supxar.mp4",
|
|
title: "Sales",
|
|
description:
|
|
"Drive revenue growth by identifying potential clients, building relationships, and closing sales deals. Develop sales strategies that align with company goals, deliver presentations to prospective customers, and provide exceptional customer service to ensure client satisfaction and retention.",
|
|
},
|
|
{
|
|
id: 4,
|
|
media: "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860625/Homepage%20%E2%80%94%20Sept%202024/sc03_HP_240917_Power-with-AI_v02_supxar.mp4",
|
|
title: "HR",
|
|
description:
|
|
"Manage recruitment processes, employee relations, and organizational development initiatives. Ensure compliance with labor laws and regulations while fostering a positive workplace culture that promotes employee engagement and professional growth. Implement training programs to enhance workforce capabilities and performance.",
|
|
},
|
|
];
|
|
|
|
export default function Cliclables() {
|
|
const [selectedItem, setSelectedItem] = useState<Item>(items[0]);
|
|
|
|
const handleButtonClick = (item: Item) => {
|
|
setSelectedItem(item);
|
|
};
|
|
|
|
return (
|
|
<div className="w-full max-w-6xl mx-auto py-5 px-8">
|
|
|
|
<div className="relative w-full">
|
|
{/* Image section */}
|
|
<motion.div
|
|
key={`img-${selectedItem.id}`}
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="h-full bg-gray-100 rounded-xl overflow-hidden"
|
|
>
|
|
<video
|
|
src={selectedItem.media}
|
|
// alt={selectedItem.title}
|
|
autoPlay
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Navigation buttons at the top */}
|
|
<div className="flex flex-col md:flex-row space-y-3 md:space-y-0 items-center justify-between my-8">
|
|
{items.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => handleButtonClick(item)}
|
|
className={`py-2 px-auto w-56 rounded-full transition-all duration-300 uppercase ${selectedItem.id === item.id
|
|
? "bg-white text-black shadow-lg scale-105"
|
|
: "bg-transparent text-white border border-gray-500"
|
|
}`}
|
|
>
|
|
{item.title}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="relative w-full">
|
|
{/* Description section */}
|
|
<motion.div
|
|
key={`desc-${selectedItem.id}`}
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="flex flex-col justify-center"
|
|
>
|
|
<h3 className="text-2xl font-semibold text-white">{selectedItem.title}</h3>
|
|
<p className="text-gray-600 leading-relaxed">
|
|
{selectedItem.description}
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|