Skip to content

Commit ff7b963

Browse files
Hridoy-Ahmed163Hridoy-Ahmed163
committed
seting up hero section
1 parent 823d115 commit ff7b963

14 files changed

+477
-28
lines changed

‎app/home/page.tsx

-5
This file was deleted.

‎app/page.tsx

+21-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,32 @@
1-
import { ThemeToggle } from "@/components/theme-toggle";
1+
22
import { poppins, roboto } from "@/font/fonts";
3+
import ThreeDCardComponent from '@/components/ThreeDCardComponent';
4+
import { Button } from "@/components/ui/button";
5+
import { TypewriterEffectSmoothDemo } from "@/components/typeWriterCard";
36

47

58
export default function Home() {
69
return (
710
<main>
8-
<div className='m-5'>
9-
<p className={roboto.className}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus at voluptatum est sint corporis ea dolorem tenetur? Voluptatibus quisquam atque perspiciatis, veritatis enim harum omnis! Iste atque, sunt eveniet, id porro voluptatum eum ipsum quia magni modi beatae placeat! Veritatis eligendi distinctio animi inventore fuga quo odit corrupti perferendis consectetur repudiandae quibusdam, ut, consequuntur quasi totam est incidunt optio quaerat culpa a id necessitatibus vero labore deserunt esse. Quos ullam officia, provident dolores unde saepe delectus quidem sit nihil, necessitatibus amet voluptates quisquam. Ducimus, labore fugiat. Minima sunt ipsum illum dolore quos iure, dolor incidunt dignissimos libero eius eum dolores.</p>
11+
<div className='flex gap-20 max-w-[1080px] h-[780px] mx-auto'>
12+
<div className="my-auto items-center flex flex-col">
13+
<h1 className={`${poppins.className} py-3 cappitalize font-extrabold text-8xl text-center bg-gradient-to-r from-fuchsia-500 to-cyan-500 bg-clip-text text-transparent`}>Mark Zuckerberg</h1>
14+
<TypewriterEffectSmoothDemo />
15+
<button className="my-5 px-8 py-2 rounded-full bg-gradient-to-b from-blue-500 to-blue-600 text-white focus:ring-2 focus:ring-blue-400 hover:shadow-xl transition duration-200">
16+
Hire Me
17+
</button>
18+
</div>
19+
<div>
20+
<ThreeDCardComponent />
1021
</div>
11-
<div className='m-5'>
12-
<p className={poppins.className}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam ad error quidem maxime! Commodi veniam accusantium earum facere aut reprehenderit.</p>
1322
</div>
1423
</main>
1524
);
1625
}
26+
27+
// <div className='m-5'>
28+
// <p className={roboto.className}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus at voluptatum est sint corporis ea dolorem tenetur? Voluptatibus quisquam atque perspiciatis, veritatis enim harum omnis! Iste atque, sunt eveniet, id porro voluptatum eum ipsum quia magni modi beatae placeat! Veritatis eligendi distinctio animi inventore fuga quo odit corrupti perferendis consectetur repudiandae quibusdam, ut, consequuntur quasi totam est incidunt optio quaerat culpa a id necessitatibus vero labore deserunt esse. Quos ullam officia, provident dolores unde saepe delectus quidem sit nihil, necessitatibus amet voluptates quisquam. Ducimus, labore fugiat. Minima sunt ipsum illum dolore quos iure, dolor incidunt dignissimos libero eius eum dolores.</p>
29+
// </div>
30+
// <div className='m-5'>
31+
// <p className={poppins.className}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam ad error quidem maxime! Commodi veniam accusantium earum facere aut reprehenderit.</p>
32+
// </div>

‎components/Navbar.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ const Navbar = () => {
3131
];
3232

3333
return (
34-
<div className="flex justify-between items-center w-full h-16 px-4 fixed nav">
34+
<div className="z-[1000] flex justify-between items-center w-full h-16 px-4 fixed nav">
3535
<div>
36-
<h1 className="text-5xl font-signature ml-2">
36+
<h1 className="text-5xl font-extrabold ml-2">
3737
<a
3838
className="link-underline link-underline-black"
3939
href=""
@@ -56,7 +56,7 @@ const Navbar = () => {
5656
))}
5757
<ThemeToggle />
5858
</ul>
59-
<div className="sm: flex gap-5">
59+
<div className="md:hidden sm: flex gap-5">
6060
<div className="">
6161
<ThemeToggle />
6262
</div>

‎components/ThreeDCardComponent.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
"use client";
2+
3+
import Image from "next/image";
4+
import React from "react";
5+
import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";
6+
import CardImage from "@/public/assets/Mark_Zuckerberg_F8_2019.jpeg"
7+
8+
export function ThreeDCardComponent() {
9+
return (
10+
<CardContainer className="inter-var">
11+
<CardBody className="bg-gray-50 relative group/card dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-slate-950 dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-5 border">
12+
<CardItem translateZ="100" className="w-full">
13+
<Image
14+
src={CardImage} // Replace with your actual image path or URL
15+
height="1000"
16+
width="1000"
17+
className="min-h-28 w-full object-cover rounded-xl group-hover/card:shadow-xl"
18+
alt="thumbnail"
19+
/>
20+
</CardItem>
21+
</CardBody>
22+
</CardContainer>
23+
);
24+
}
25+
export default ThreeDCardComponent;

‎components/aniTooltip.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
"use client";
2+
import React from "react";
3+
import { AnimatedTooltip } from "./ui/animated-tooltip";
4+
const people = [
5+
{
6+
id: 1,
7+
name: "Seriously ",
8+
designation: "Nigga?",
9+
image:"",
10+
},
11+
12+
];
13+
14+
export function AnimatedTooltipPreview() {
15+
return (
16+
<div >
17+
<AnimatedTooltip items={people} />
18+
</div>
19+
);
20+
}

‎components/typeWriterCard.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
"use client";
2+
import { TypewriterEffectSmooth } from "@/components/ui/typewriter-effect";
3+
export function TypewriterEffectSmoothDemo() {
4+
const words = [
5+
{
6+
text: "Founder",
7+
},
8+
{
9+
text: "of",
10+
},
11+
{
12+
text: "Facebook",
13+
className: "text-blue-500 dark:text-blue-500",
14+
},
15+
];
16+
return (
17+
<div className="flex flex-col justify-center items-center h-10 text-start">
18+
19+
<TypewriterEffectSmooth words={words} className=""/>
20+
21+
</div>
22+
);
23+
}

‎components/ui/3d-card.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { cn } from "@/utils/cn";
3+
import { cn } from "@/lib/utils";
44
import Image from "next/image";
55
import React, {
66
createContext,

‎components/ui/animated-tooltip.tsx

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
"use client";
2+
import Image from "next/image";
3+
import React, { useState } from "react";
4+
import {
5+
motion,
6+
useTransform,
7+
AnimatePresence,
8+
useMotionValue,
9+
useSpring,
10+
} from "framer-motion";
11+
12+
export const AnimatedTooltip = ({
13+
items,
14+
}: {
15+
items: {
16+
id: number;
17+
name: string;
18+
designation: string;
19+
image: string;
20+
}[];
21+
}) => {
22+
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
23+
const springConfig = { stiffness: 100, damping: 5 };
24+
const x = useMotionValue(0); // going to set this value on mouse move
25+
// rotate the tooltip
26+
const rotate = useSpring(
27+
useTransform(x, [-100, 100], [-45, 45]),
28+
springConfig
29+
);
30+
// translate the tooltip
31+
const translateX = useSpring(
32+
useTransform(x, [-100, 100], [-50, 50]),
33+
springConfig
34+
);
35+
const handleMouseMove = (event: any) => {
36+
const halfWidth = event.target.offsetWidth / 2;
37+
x.set(event.nativeEvent.offsetX - halfWidth); // set the x value, which is then used in transform and rotate
38+
};
39+
40+
return (
41+
<>
42+
{items.map((item, idx) => (
43+
<div
44+
className="-mr-4 relative group"
45+
key={item.name}
46+
onMouseEnter={() => setHoveredIndex(item.id)}
47+
onMouseLeave={() => setHoveredIndex(null)}
48+
>
49+
<AnimatePresence mode="wait">
50+
{hoveredIndex === item.id && (
51+
<motion.div
52+
initial={{ opacity: 0, y: 20, scale: 0.6 }}
53+
animate={{
54+
opacity: 1,
55+
y: 0,
56+
scale: 1,
57+
transition: {
58+
type: "spring",
59+
stiffness: 260,
60+
damping: 10,
61+
},
62+
}}
63+
exit={{ opacity: 0, y: 20, scale: 0.6 }}
64+
style={{
65+
translateX: translateX,
66+
rotate: rotate,
67+
whiteSpace: "nowrap",
68+
}}
69+
className="absolute -top-16 -left-1/2 translate-x-1/2 flex text-xs flex-col items-center justify-center rounded-md bg-black z-50 shadow-xl px-4 py-2"
70+
>
71+
<div className="absolute inset-x-10 z-30 w-[20%] -bottom-px bg-gradient-to-r from-transparent via-emerald-500 to-transparent h-px " />
72+
<div className="absolute left-10 w-[40%] z-30 -bottom-px bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px " />
73+
<div className="font-bold text-white relative z-30 text-base">
74+
{item.name}
75+
</div>
76+
<div className="text-white text-xs">{item.designation}</div>
77+
</motion.div>
78+
)}
79+
</AnimatePresence>
80+
<Image
81+
onMouseMove={handleMouseMove}
82+
height={100}
83+
width={100}
84+
src={item.image}
85+
alt={item.name}
86+
className="object-cover !m-0 !p-0 object-top rounded-full h-14 w-14 border-2 group-hover:scale-105 group-hover:z-30 border-white relative transition duration-500"
87+
/>
88+
</div>
89+
))}
90+
</>
91+
);
92+
};

‎components/ui/tailwindcss-buttons.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
"use client";
2+
import React from "react";
3+
import { IconClipboard } from "@tabler/icons-react";
4+
import { cn } from "@/lib/utils";
5+
6+
7+
import { AnimatedTooltip } from "@/components/ui/animated-tooltip";
8+
9+
const people = [
10+
{
11+
id: 1,
12+
name: "Seriously ",
13+
designation: "Nigga?",
14+
image: "",
15+
},
16+
17+
];
18+
19+
export const ButtonsCard = ({
20+
children,
21+
className,
22+
onClick,
23+
}: {
24+
children?: React.ReactNode;
25+
className?: string;
26+
onClick?: () => void;
27+
}) => {
28+
return (
29+
<AnimatedTooltip items={people} />
30+
);
31+
};

0 commit comments

Comments
 (0)