Skip to content

Commit 1e39c51

Browse files
deepraj21deepraj21
authored
Merge pull request #48 from deepraj21/main
Refactor Hero component and Features section
2 parents d51fc32 + 19e977f commit 1e39c51

File tree

7 files changed

+197
-324
lines changed

7 files changed

+197
-324
lines changed

‎client/package-lock.json‎

Lines changed: 24 additions & 139 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/src/components/FAQ/Faq.tsx‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎client/src/components/Hero/features.tsx‎ renamed to ‎client/src/components/Features/Features.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils";
22
import { IconLock, IconStar, IconShare, IconUsers, IconUserPlus, IconBulb, IconBuilding, IconMap } from "@tabler/icons-react";
33

44

5-
export function FeaturesSectionDemo() {
5+
export function Features() {
66
const features = [
77
{
88
title: "Secure Your Access",
@@ -71,6 +71,7 @@ const Feature = ({
7171
index: number;
7272
}) => {
7373
return (
74+
<>
7475
<div
7576
className={cn(
7677
"flex flex-col lg:border-r py-10 relative group/feature dark:border-neutral-800 ml-5",
@@ -97,5 +98,7 @@ const Feature = ({
9798
{description}
9899
</p>
99100
</div>
101+
</>
102+
100103
);
101104
};

‎client/src/components/Footer/Footer.tsx‎

Lines changed: 129 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,135 @@
1-
import { Link } from 'react-router-dom';
2-
3-
// Third-party library imports
4-
import Balancer from "react-wrap-balancer";
5-
6-
// UI component imports
7-
import { Button } from "../ui/button";
8-
9-
// Icon imports
10-
import { Github } from "lucide-react";
1+
const Footer = () => {
2+
return (
3+
<div>
4+
<footer className="bg-white dark:bg-zinc-950">
5+
<div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
6+
<div className="md:flex md:justify-between">
7+
<div className="mb-6 md:mb-0">
8+
<a href="/" className="flex items-center">
9+
<img
10+
src="https://i.ibb.co/kh28sVv/cropped-image.png"
11+
className="h-8 me-3"
12+
alt="FlowBite Logo"
13+
/>
14+
<span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
15+
Devhub
16+
</span>
17+
</a>
18+
</div>
19+
<div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
20+
<div>
21+
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
22+
Resources
23+
</h2>
24+
<ul className="text-gray-500 dark:text-gray-400 font-medium">
25+
<li className="mb-4">
26+
<a href="/" className="hover:underline">
27+
Devhub
28+
</a>
29+
</li>
30+
<li>
31+
<a href="/" className="hover:underline">
32+
Tailwind CSS
33+
</a>
34+
</li>
35+
</ul>
36+
</div>
37+
<div>
38+
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
39+
Follow us
40+
</h2>
41+
<ul className="text-gray-500 dark:text-gray-400 font-medium">
42+
<li className="mb-4">
43+
<a
44+
href="/"
45+
className="hover:underline "
46+
>
47+
Github
48+
</a>
49+
</li>
50+
<li>
51+
<a
52+
href="/"
53+
className="hover:underline"
54+
>
55+
Discord
56+
</a>
57+
</li>
58+
</ul>
59+
</div>
60+
<div>
61+
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
62+
Legal
63+
</h2>
64+
<ul className="text-gray-500 dark:text-gray-400 font-medium">
65+
<li className="mb-4">
66+
<a href="#" className="hover:underline">
67+
Privacy Policy
68+
</a>
69+
</li>
70+
<li>
71+
<a href="#" className="hover:underline">
72+
Terms &amp; Conditions
73+
</a>
74+
</li>
75+
</ul>
76+
</div>
77+
</div>
78+
</div>
79+
<hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
80+
<div className="sm:flex sm:items-center sm:justify-between">
81+
<span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
82+
© 2024{" "}
83+
<a href="/" className="hover:underline">
84+
Devhub
85+
</a>
86+
. All Rights Reserved.
87+
</span>
88+
<div className="flex mt-4 sm:justify-center sm:mt-0">
1189

12-
// Local component imports
13-
import { Section, Container } from "@/components/ui/craft";
14-
import { DiscordLogoIcon } from '@radix-ui/react-icons';
90+
<a
91+
href="#"
92+
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
93+
>
94+
<svg
95+
className="w-4 h-4"
96+
aria-hidden="true"
97+
xmlns="http://www.w3.org/2000/svg"
98+
fill="currentColor"
99+
viewBox="0 0 21 16"
100+
>
101+
<path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
102+
</svg>
103+
<span className="sr-only">Discord community</span>
104+
</a>
15105

16-
// Asset imports
17-
// import Logo from "@/public/logo.svg";
106+
<a
107+
href="#"
108+
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
109+
>
110+
<svg
111+
className="w-4 h-4"
112+
aria-hidden="true"
113+
xmlns="http://www.w3.org/2000/svg"
114+
fill="currentColor"
115+
viewBox="0 0 20 20"
116+
>
117+
<path
118+
fillRule="evenodd"
119+
d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
120+
clipRule="evenodd"
121+
/>
122+
</svg>
123+
<span className="sr-only">GitHub account</span>
124+
</a>
18125

19-
export default function Footer() {
20-
const handleGithubClick = (event: React.MouseEvent<HTMLButtonElement>) => {
21-
event.preventDefault(); // Prevent any default button behavior
22-
window.open("https://github.com/devhub-ai/devhub", "_blank");
23-
};
24-
const handleDiscordClick = (event: React.MouseEvent<HTMLButtonElement>) => {
25-
event.preventDefault(); // Prevent any default button behavior
26-
window.open("https://discord.gg/he8QHEC8WP", "_blank");
27-
};
28-
return (
29-
<footer>
30-
<Section>
31-
<Container className="grid gap-12 md:grid-cols-[1.5fr_0.5fr_0.5fr]">
32-
<div className="not-prose flex flex-col gap-6">
33-
<div className='logo'>
34-
<img
35-
src="https://i.ibb.co/kh28sVv/cropped-image.png"
36-
alt="Logo"
37-
width={60}
38-
height={27.27}
39-
className="transition-all hover:opacity-75 dark:invert"
40-
></img>
41126
</div>
42-
<p>
43-
<Balancer>
44-
DevHub is an innovative platform designed to connect developers who share similar interests and complementary skills.
45-
</Balancer>
46-
</p>
47-
</div>
48-
<div className="flex flex-col gap-2" style={{justifyContent: 'flex-end'}}>
49-
<h5>Legal</h5>
50-
<Link to="/privacy-policy">Privacy Policy</Link>
51-
</div>
52-
<div className="flex flex-col justify-cont gap-2" style={{justifyContent: 'flex-end'}}>
53-
<Link to="/terms-of-service">Terms of Service</Link>
54-
<Link to="/cookie-policy">Cookie Policy</Link>
55127
</div>
56-
</Container>
57-
<Container className="not-prose flex flex-col justify-between gap-6 border-t md:flex-row md:items-center md:gap-2">
58-
<div className="flex gap-2">
59-
<Button variant="outline" size="icon" onClick={handleGithubClick}>
60-
<Github />
61-
</Button>
62-
<Button variant="outline" size="icon" onClick={handleDiscordClick}>
63-
<DiscordLogoIcon />
64-
</Button>
65-
</div>
66-
<p className="text-muted-foreground">
67-
©{" "}
68-
<span>Devhub</span>.
69-
All rights reserved. 2024.
70-
</p>
71-
</Container>
72-
</Section>
73-
</footer>
74-
);
128+
</div>
129+
</footer>
130+
131+
</div>
132+
)
75133
}
134+
135+
export default Footer

‎client/src/components/Hero/Hero.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ export function Hero() {
4242
return (
4343
<div className="relative z-20 py-20 lg:py-20 max-w-7xl mx-auto">
4444
<div className="relative ">
45-
<h2 className="text-center text-3xl font-semibold mb-4">Features</h2>
4645
<div className="grid grid-cols-1 gap-4 lg:grid-cols-6 xl:border rounded-md dark:border-neutral-800 h-[140rem] lg:h-[60rem]">
4746
{features.map((feature) => (
4847
<FeatureCard key={feature.title} className={feature.className}>

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

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
IconTerminal2,
99
} from "@tabler/icons-react";
1010
import React from "react";
11-
import { ModeToggle } from "../Theme/mode-toggle";
1211

1312
interface Link {
1413
title: string;
@@ -65,16 +64,8 @@ export function Navbar() {
6564
}
6665
};
6766

68-
69-
70-
const handleGithubClick = (event: React.MouseEvent<HTMLButtonElement>) => {
71-
event.preventDefault();
72-
window.open("https://github.com/devhub-ai/devhub", "_blank");
73-
}
74-
7567
return (
7668
<div className="flex items-center justify-center mt-16 w-full">
77-
<a href="/"><img src="https://i.ibb.co/xLbC5K7/logo.png" className="size-10 mx-5" /></a>
7869
<div className="hidden md:block">
7970
<FloatingDock
8071
items={links.map(link => ({
@@ -83,24 +74,7 @@ export function Navbar() {
8374
}))}
8475
/>
8576
</div>
86-
<div className="flex gap-4 md:hidden">
87-
<button onClick={(e) => {
88-
e.preventDefault();
89-
const targetElement = document.querySelector("#features");
90-
if (targetElement) {
91-
targetElement.scrollIntoView({ behavior: "smooth" });
92-
}
93-
}}>
94-
<IconTerminal2 className="size-10" />
95-
</button>
96-
<button onClick={handleGithubClick}>
97-
<IconBrandGithub className="size-10" />
98-
</button>
99-
</div>
100-
101-
10277
<div className="px-4">
103-
<ModeToggle />
10478
</div>
10579
</div>
10680
);

0 commit comments

Comments
 (0)