Skip to content

Commit 5fa5bd1

Browse files
w0wayushw0wayush
committed
Hamepage UI Update
1 parent 8397755 commit 5fa5bd1

21 files changed

+11167
-2894
lines changed

‎package-lock.json

+10,250-2,891
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,19 @@
1414
"@radix-ui/react-select": "^2.1.1",
1515
"@radix-ui/react-slot": "^1.1.0",
1616
"@radix-ui/react-toast": "^1.2.1",
17+
"@tsparticles/engine": "^3.5.0",
18+
"@tsparticles/react": "^3.0.0",
19+
"@tsparticles/slim": "^3.5.0",
1720
"class-variance-authority": "^0.7.0",
1821
"clsx": "^2.1.1",
22+
"framer-motion": "^11.5.4",
1923
"lucide-react": "^0.441.0",
2024
"next": "14.2.12",
2125
"next-themes": "^0.3.0",
2226
"react": "^18",
2327
"react-dom": "^18",
2428
"react-icons": "^5.3.0",
29+
"react-native-video": "^6.5.0",
2530
"tailwind-merge": "^2.5.2",
2631
"tailwindcss-animate": "^1.0.7"
2732
},

‎src/app/globals.css

+2
Original file line numberDiff line numberDiff line change
@@ -78,3 +78,5 @@ body {
7878
@apply bg-background text-foreground;
7979
}
8080
}
81+
82+

‎src/assets/Screenshot 2024-09-18 223434.png

425 KB
Loading

‎src/assets/discuss.png

18.8 KB
Loading

‎src/assets/kanaban.png

402 KB
Loading

‎src/assets/kanban_board.png

206 KB
Loading

‎src/assets/manage.png

16.6 KB
Loading

‎src/assets/manage_task.webp

506 KB
Binary file not shown.

‎src/assets/optimize.png

11 KB
Loading

‎src/assets/task.gif

2.03 MB
Loading

‎src/assets/task_complete.webp

236 KB
Binary file not shown.

‎src/assets/track_image.png

12.4 KB
Loading

‎src/components/pages/heropage/HeroPage.tsx

+66-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,73 @@
1-
import React from "react";
1+
"use client";
2+
3+
import React, { useState, useEffect } from "react";
4+
import manageImage from "@/assets/manage.png";
5+
import optimizeImage from "@/assets/optimize.png";
6+
import trackImage from "@/assets/track_image.png";
7+
import discussImage from "@/assets/discuss.png";
8+
import Image from "next/image";
9+
import { TaskAdvantages } from "./components/TaskAdvantages";
10+
import Feature from "./components/TaskFlowFeature";
11+
import TaskFlowFeature from "./components/TaskFlowFeature";
212

313
type Props = {};
414

515
const HeroPage = (props: Props) => {
6-
return <div>HeroPage</div>;
16+
const taskAdvantage = [
17+
{ title: "Manage" },
18+
{ title: "Optimize" },
19+
{ title: "Track" },
20+
{ title: "Discuss" },
21+
];
22+
23+
const taskAdvantageImages = [
24+
{ image: manageImage },
25+
{ image: optimizeImage },
26+
{ image: trackImage },
27+
{ image: discussImage },
28+
];
29+
30+
const [currentIndex, setCurrentIndex] = useState(0);
31+
32+
useEffect(() => {
33+
const intervalId = setInterval(() => {
34+
setCurrentIndex((currentIndex + 1) % taskAdvantage.length);
35+
}, 2000); // change every 2 seconds
36+
37+
return () => clearInterval(intervalId);
38+
}, [currentIndex, taskAdvantage]);
39+
40+
return (
41+
<div className="min-h-screen py-10 px-5 sm:px-10">
42+
{/* Hero Heading */}
43+
<div className="relative flex flex-col lg:flex-row">
44+
<h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-bold">
45+
Take Control Of Your Tasks
46+
</h1>
47+
<div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-8 mt-10 lg:mt-0 sm:absolute sm:top-[30px] sm:left-[200px] md:top-[40px] md:left-[230px] lg:top-[100px] lg:left-[300px] xl:top-[125px] xl:left-[410px]">
48+
<Image
49+
src={taskAdvantageImages[currentIndex].image}
50+
alt={taskAdvantage[currentIndex].title}
51+
className="w-[200px] sm:w-[100px] md:w-[150px] lg:w-[200px] xl:w-[280px] rounded-lg"
52+
loading="lazy"
53+
/>
54+
<span className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-bold underline">
55+
{taskAdvantage[currentIndex].title}
56+
</span>
57+
</div>
58+
</div>
59+
60+
{/* 2nd Hero page */}
61+
<div className="min-h-screen ">
62+
<TaskAdvantages />
63+
</div>
64+
65+
{/* 3rd Hero Page */}
66+
<div className="min-h-screen ">
67+
<TaskFlowFeature />
68+
</div>
69+
</div>
70+
);
771
};
872

973
export default HeroPage;

‎src/components/pages/heropage/components/TaskAdvantages.tsx

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
"use client";
2+
import React from "react";
3+
import { SparklesCore } from "@/components/ui/sparkles";
4+
import { BackgroundGradientAnimation } from "@/components/ui/background-gradient-animation";
5+
6+
export function TaskAdvantages() {
7+
return (
8+
<div className="relative h-[50rem] mt-40 text-white font-bold text-center rounded-xl px-4 overflow-hidden">
9+
{/* Heading */}
10+
<BackgroundGradientAnimation>
11+
<div className="absolute inset-0 flex flex-col items-center justify-center text-white pointer-events-none rounded-xl">
12+
{/* Full-Coverage Sparkle Effect */}
13+
<SparklesCore
14+
background="transparent"
15+
minSize={1}
16+
maxSize={2}
17+
particleDensity={100}
18+
className="absolute inset-0 w-full h-full z-0"
19+
particleColor="#FFFFFF"
20+
/>
21+
22+
{/* Heading */}
23+
<h1 className="text-4xl sm:text-6xl lg:text-7xl xl:text-8xl font-extrabold tracking-widest mb-6 z-10">
24+
TaskFlow
25+
</h1>
26+
27+
{/* Sparkle Effect and Description */}
28+
<div className="relative w-full sm:w-[50%] flex flex-col items-center text-center z-10">
29+
<p className="relative z-20 text-xl sm:text-2xl xl:text-3xl font-light">
30+
TaskFlow platform helps you to stay on top of your tasks and track
31+
your time efficiently.
32+
</p>
33+
34+
{/* Decorative Lines */}
35+
{/* <div className="absolute inset-x-10 top-0 h-[2px] w-full bg-gradient-to-r from-transparent via-blue-800 to-transparent blur-sm z-10" />
36+
<div className="absolute inset-x-16 top-4 h-[3px] w-3/4 bg-gradient-to-r from-transparent via-blue-900 to-transparent blur-sm z-10" />
37+
<div className="absolute inset-x-20 top-6 h-[1px] w-2/4 bg-gradient-to-r from-transparent via-blue-900 to-transparent blur-sm z-10" /> */}
38+
</div>
39+
40+
{/* Call to Action */}
41+
<button className="mt-10 py-3 px-6 bg-white text-indigo-600 text-lg font-bold rounded-full hover:bg-indigo-100 transition duration-300 ease-in-out z-20 cursor-pointer">
42+
Get Started
43+
</button>
44+
</div>
45+
</BackgroundGradientAnimation>
46+
</div>
47+
);
48+
}

‎src/components/pages/heropage/components/TaskFlowFeature.tsx

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
"use client";
2+
3+
import { SparklesCore } from "@/components/ui/sparkles";
4+
import React from "react";
5+
6+
type Props = {};
7+
8+
const TaskFlowFeature = (props: Props) => {
9+
const features = [
10+
{
11+
title: "Effortless Task Management",
12+
description:
13+
"Easily organize and prioritize your tasks using TaskFlow. Stay productive by keeping all your work in one place.",
14+
image:
15+
"https://i.pinimg.com/564x/77/30/70/773070328f36e6f5a1f913a80c90ba4d.jpg",
16+
},
17+
{
18+
title: "Drag & Drop Feature",
19+
description:
20+
"Move tasks across different stages of your workflow effortlessly with our drag-and-drop feature.",
21+
image:
22+
"https://i.pinimg.com/736x/bc/03/4d/bc034d44660723e2d8f35b3b46ed5450.jpg",
23+
},
24+
{
25+
title: "Kanban Dashboard",
26+
description:
27+
"Our Kanban dashboard allows you to visualize your tasks and track their progress in a simple and intuitive way.",
28+
image:
29+
"https://i.pinimg.com/564x/7c/46/82/7c4682c4d0d67142dfa703beed7280b9.jpg",
30+
},
31+
{
32+
title: "Collaborate Seamlessly",
33+
description:
34+
"Work with your team, assign tasks, and manage projects effortlessly, all in one place.",
35+
image:
36+
"https://i.pinimg.com/564x/b6/c5/5e/b6c55eb789fccacc4cac1d1d0b21efd6.jpg",
37+
},
38+
];
39+
40+
return (
41+
<div className="px-8 py-28 relative bg-cover bg-center">
42+
<SparklesCore
43+
background="transparent"
44+
minSize={1}
45+
maxSize={2}
46+
particleDensity={100}
47+
className="absolute inset-0 w-full h-full z-0"
48+
particleColor="#FFFFFF"
49+
/>
50+
<h2 className="text-5xl font-bold text-center mb-16 text-white">
51+
Our Benefits
52+
</h2>
53+
<div className="space-y-16">
54+
{features.map((feature, index) => (
55+
<div
56+
key={index}
57+
className={`flex flex-col md:flex-row items-center justify-between space-y-8 md:space-y-0 ${
58+
index % 2 === 0 ? "md:flex-row-reverse" : ""
59+
}`}
60+
>
61+
<div className="md:w-1/2 p-8 bg-white bg-opacity-80 rounded-2xl shadow-2xl hover:shadow-lg transition-shadow duration-300 ease-in-out">
62+
<h3 className="text-3xl font-extrabold text-indigo-600 mb-6 tracking-tight">
63+
{feature.title}
64+
</h3>
65+
<p className="text-lg text-gray-700 leading-relaxed">
66+
{feature.description}
67+
</p>
68+
</div>
69+
70+
<div className="md:w-1/3">
71+
<img
72+
src={feature.image}
73+
alt={feature.title}
74+
className="w-full h-auto rounded-lg shadow-lg object-cover"
75+
/>
76+
</div>
77+
</div>
78+
))}
79+
</div>
80+
</div>
81+
);
82+
};
83+
84+
export default TaskFlowFeature;

‎src/components/pages/navbar/Navbar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const Navbar = (props: Props) => {
3838
</div>
3939
<div>
4040
<div className="flex">
41-
{true ? (
41+
{false ? (
4242
// {isLoggedIn ? (
4343
<div className="flex items-center justify-center relative">
4444
{/* Show users icon */}

‎src/components/ui/aurora-background.tsx

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
"use client";
2+
import { cn } from "@/lib/utils";
3+
import React, { ReactNode } from "react";
4+
5+
interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
6+
children: ReactNode;
7+
showRadialGradient?: boolean;
8+
}
9+
10+
export const AuroraBackground = ({
11+
className,
12+
children,
13+
showRadialGradient = true,
14+
...props
15+
}: AuroraBackgroundProps) => {
16+
return (
17+
<main>
18+
<div
19+
className={cn(
20+
"relative flex flex-col h-[100vh] items-center justify-center bg-zinc-50 dark:bg-zinc-900 text-slate-950 transition-bg",
21+
className
22+
)}
23+
{...props}
24+
>
25+
<div className="absolute inset-0 overflow-hidden">
26+
<div
27+
// I'm sorry but this is what peak developer performance looks like // trigger warning
28+
className={cn(
29+
`
30+
[--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)]
31+
[--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)]
32+
[--aurora:repeating-linear-gradient(100deg,var(--blue-500)_10%,var(--indigo-300)_15%,var(--blue-300)_20%,var(--violet-200)_25%,var(--blue-400)_30%)]
33+
[background-image:var(--white-gradient),var(--aurora)]
34+
dark:[background-image:var(--dark-gradient),var(--aurora)]
35+
[background-size:300%,_200%]
36+
[background-position:50%_50%,50%_50%]
37+
filter blur-[10px] invert dark:invert-0
38+
after:content-[""] after:absolute after:inset-0 after:[background-image:var(--white-gradient),var(--aurora)]
39+
after:dark:[background-image:var(--dark-gradient),var(--aurora)]
40+
after:[background-size:200%,_100%]
41+
after:animate-aurora after:[background-attachment:fixed] after:mix-blend-difference
42+
pointer-events-none
43+
absolute -inset-[10px] opacity-50 will-change-transform`,
44+
45+
showRadialGradient &&
46+
`[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`
47+
)}
48+
></div>
49+
</div>
50+
{children}
51+
</div>
52+
</main>
53+
);
54+
};

0 commit comments

Comments
 (0)