Skip to content

Commit 4c8ca27

Browse files
ajay-dhangarajay-dhangar
committed
update UI
1 parent 826e614 commit 4c8ca27

File tree

25 files changed

+2130
-318
lines changed

25 files changed

+2130
-318
lines changed

‎.yarn/install-state.gz‎

51.3 KB
Binary file not shown.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@docusaurus/plugin-content-docs": "3.0.0-beta.0",
2222
"@docusaurus/preset-classic": "3.0.0-beta.0",
2323
"@docusaurus/theme-live-codeblock": "3.0.0-beta.0",
24+
"@fluentui/react-icons": "^2.0.264",
2425
"@heroicons/react": "^2.1.5",
2526
"@mdx-js/react": "^2.3.0",
2627
"aegis-web-sdk": "^1.38.3",
@@ -31,7 +32,9 @@
3132
"raw-loader": "^4.0.2",
3233
"react": "^18.2.0",
3334
"react-dom": "^18.2.0",
35+
"react-feather": "^2.0.10",
3436
"react-icons": "^5.3.0",
37+
"react-markdown": "^9.0.1",
3538
"react-simple-code-editor": "^0.11.0",
3639
"rehype-katex": "6",
3740
"remark-math": "5",

‎src/components/CardComponents.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React, { ReactNode, PropsWithChildren } from 'react';
2+
import { paramCase } from 'param-case';
3+
import Link from '@docusaurus/Link';
4+
import clsx from 'clsx';
5+
6+
export function CardSection({
7+
id,
8+
title,
9+
children,
10+
description,
11+
className,
12+
hasSubSections = false,
13+
HeadingTag = 'h3',
14+
}: {
15+
id?: string;
16+
title: string;
17+
children: ReactNode;
18+
description?: ReactNode;
19+
hasSubSections?: boolean;
20+
HeadingTag?: keyof JSX.IntrinsicElements;
21+
className?: string;
22+
}) {
23+
return (
24+
<div
25+
className={clsx(
26+
'homepage-section',
27+
hasSubSections && 'has-sub-sections',
28+
className
29+
)}
30+
>
31+
{title && <HeadingTag id={id ?? paramCase(title)}>{title}</HeadingTag>}
32+
{description && <p className="section-description">{description}</p>}
33+
<div className="section-content">{children}</div>
34+
</div>
35+
);
36+
}
37+
38+
export function Card({
39+
id,
40+
icon,
41+
title,
42+
description,
43+
to,
44+
tag,
45+
className,
46+
}: PropsWithChildren<{
47+
id?: string;
48+
icon?: JSX.Element;
49+
title: string;
50+
description?: string;
51+
to: string;
52+
tag?: {
53+
label: string;
54+
color: string;
55+
description: string;
56+
};
57+
className?: string;
58+
}>) {
59+
return (
60+
<Link to={to} className={clsx("homepage-card",className)}>
61+
{icon && <div className="icon">{icon}</div>}
62+
<div className="card-content">
63+
<div className="title" id={id && paramCase(title)}>
64+
{title}
65+
</div>
66+
{description && <div className="description">{description}</div>}
67+
</div>
68+
{tag && (
69+
<div className="tag absolute right-0 top-0 h-16 w-16">
70+
<span
71+
className="absolute right-[-28px] top-[-2px] w-[80px] rotate-45 transform bg-gray-600 py-1 text-center font-semibold text-white"
72+
style={{ backgroundColor: tag.color }}
73+
title={tag.description}
74+
>
75+
{tag.label}
76+
</span>
77+
</div>
78+
)}
79+
</Link>
80+
);
81+
}

‎src/components/Home/Community.tsx‎

Lines changed: 40 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,52 @@
1-
import React from 'react';
2-
import Link from '@docusaurus/Link';
3-
import { FaComments, FaUsers, FaChalkboardTeacher, FaHeadset } from 'react-icons/fa'; // React Icons
1+
import React from "react";
2+
import Link from "@docusaurus/Link";
43

5-
interface Feature {
6-
title: string;
7-
description: string;
8-
icon: React.FC<React.SVGProps<SVGSVGElement>>; // This type remains the same
9-
link: string;
10-
}
4+
import { GitHub, Linkedin } from "react-feather";
115

12-
const features: Feature[] = [
13-
{
14-
title: 'Community Forums',
15-
description:
16-
'Engage with fellow learners and experienced developers. Share knowledge, ask questions, and collaborate on projects.',
17-
icon: FaComments, // Replacing ChatAlt2Icon with FaComments
18-
link: '#', // /community/forums
19-
},
20-
{
21-
title: 'Live Chat Groups',
22-
description:
23-
'Join real-time discussions in our chat groups. Stay updated with the latest trends and get instant help when you need it.',
24-
icon: FaUsers, // Replacing UsersIcon with FaUsers
25-
link: '#', // /community/chat
26-
},
27-
{
28-
title: 'Expert Mentorship',
29-
description:
30-
'Receive guidance from industry experts. Our mentors are here to help you navigate your learning journey and achieve your goals.',
31-
icon: FaChalkboardTeacher, // Replacing AcademicCapIcon with FaChalkboardTeacher
32-
link: '#',
33-
},
34-
{
35-
title: '24/7 Support',
36-
description:
37-
'Access our support team anytime. Whether you have technical issues or need assistance with your learning path, we’re here to help.',
38-
icon: FaHeadset, // Replacing SupportIcon with FaHeadset
39-
link: '#',
40-
},
6+
const githubUsernames = [
7+
"CodeWith-PeterBull",
8+
"Rukundo-Bahati",
9+
"AkshitLakhera",
10+
"mcpdigital",
4111
];
4212

43-
const Community: React.FC = () => {
13+
export default function Community() {
4414
return (
45-
<section className="py-20 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
46-
<div className="container px-4">
47-
<h2 className="text-3xl lg:text-4xl font-bold text-center mb-8">
48-
Community & Support
15+
<section className="no-underline-links">
16+
<div className="mx-auto flex w-full flex-col items-center justify-center bg-gradient-to-b from-[#262626] to-black px-4 py-16 pt-64 text-white dark:from-zinc-200/90 dark:to-white dark:text-zinc-700">
17+
<h2 className="text-3xl">
18+
Join the <span className="text-primary-100">community</span>
4919
</h2>
50-
<p className="text-lg lg:text-xl text-center mb-12">
51-
Join our vibrant community and take advantage of comprehensive support to enhance your learning experience. Connect, collaborate, and grow with JavaScript Mastery.
20+
<p className="mb-10">
21+
Join thousands of learners in mastering JavaScript from basics to
22+
advanced topics. Start your journey to becoming a JavaScript pro today
5223
</p>
53-
<div className="grid gap-8 grid-cols-1 lg:grid-cols-4 md:grid-cols-2">
54-
{features.map((feature, index) => (
55-
<div
56-
key={index}
57-
className="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 flex flex-col items-center text-center"
58-
>
59-
<feature.icon className="h-12 w-12 text-blue-500 dark:text-yellow-400 mb-4" />
60-
<h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
61-
<p className="flex-grow mb-4">{feature.description}</p>
62-
<Link
63-
to={feature.link}
64-
className="mt-auto inline-block px-4 py-2 bg-blue-500 dark:bg-yellow-400 text-white dark:text-gray-800 font-semibold rounded-lg shadow-md hover:bg-blue-600 dark:hover:bg-yellow-500 transition-colors duration-300"
65-
>
66-
Learn More
67-
</Link>
68-
</div>
24+
<div className="mx-auto mb-16 flex flex-wrap -space-x-1.5">
25+
{githubUsernames.map((username) => (
26+
<img
27+
key={username}
28+
src={`https://github.com/${username}.png?size=60`}
29+
alt={`User ${username}`}
30+
loading="lazy"
31+
className="h-6 w-6 rounded-full border-2 border-solid border-white transition hover:-translate-y-2 hover:scale-150 lg:h-12 lg:w-12"
32+
/>
6933
))}
7034
</div>
35+
<div className="flex w-full flex-col items-center justify-center gap-2 text-sm font-semibold lg:flex-row lg:gap-8">
36+
<Link
37+
className="flex w-full items-center justify-center gap-2 rounded-sm border border-solid border-primary-100 bg-primary-100/10 px-2 py-2 text-primary-100 lg:w-auto"
38+
href="https://www.linkedin.com/in/ajay-dhangar/"
39+
>
40+
<Linkedin className="h-5 w-5" /> LinkedIn &rarr;
41+
</Link>
42+
<Link
43+
className="flex w-full items-center justify-center gap-2 rounded-sm border border-solid border-primary-100 bg-primary-100/10 px-2 py-2 text-primary-100 lg:w-auto"
44+
href="https://github.com/javascript-mastery"
45+
>
46+
<GitHub className="h-5 w-5" /> GitHub &rarr;
47+
</Link>
48+
</div>
7149
</div>
7250
</section>
7351
);
74-
};
75-
76-
export default Community;
52+
}

‎src/components/Home/Courses.tsx‎

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

‎src/components/Home/Help.jsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
import clsx from 'clsx';
4+
5+
export default function HelpSection({ className = '' }) {
6+
return (
7+
<section className="px-4 pt-16">
8+
<div
9+
className={clsx(
10+
'mx-auto max-w-7xl rounded-3xl bg-white p-4 py-10 text-black dark:bg-black dark:text-white lg:p-24 lg:py-20',
11+
className
12+
)}
13+
>
14+
<h2 className="mb-12 text-center lg:text-3xl">
15+
How can we help you today?
16+
</h2>
17+
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
18+
<div className="rounded-lg bg-zinc-100 p-6 dark:bg-zinc-900">
19+
<img
20+
src="/landing/calendar.svg"
21+
alt="Book a demo"
22+
width="48"
23+
height="48"
24+
/>
25+
<h3 className="my-3">Book a Demo</h3>
26+
<p className="text-zinc-600 dark:text-zinc-400">
27+
Contact us for a demo. We are looking forward to connecting with
28+
you.
29+
</p>
30+
<Link
31+
href="#"
32+
className="text-primary dark:text-primary-100"
33+
>
34+
Schedule a Call &rarr;
35+
</Link>
36+
</div>
37+
38+
<div className="rounded-lg bg-zinc-100 p-6 dark:bg-zinc-900">
39+
<img
40+
src="/landing/customer.svg"
41+
alt="Support"
42+
width="48"
43+
height="48"
44+
/>
45+
<h3 className="my-3">Support</h3>
46+
<p className="text-zinc-600 dark:text-zinc-400">
47+
Dyte&apos;s expert support team is always available to help. Connect for
48+
dedicated 1:1 support!
49+
</p>
50+
<Link
51+
href="#"
52+
className="text-primary dark:text-primary-100"
53+
>
54+
Contact Us &rarr;
55+
</Link>
56+
</div>
57+
58+
<div className="rounded-lg bg-zinc-100 p-6 dark:bg-zinc-900">
59+
<img
60+
src="/landing/chat.svg"
61+
alt="FAQs"
62+
width="48"
63+
height="48"
64+
/>
65+
<h3 className="my-3">FAQs</h3>
66+
<p className="text-zinc-600 dark:text-zinc-400">
67+
Browse through our FAQs to find answers to commonly asked
68+
questions.
69+
</p>
70+
<Link href="/faq" className="text-primary dark:text-primary-100">
71+
View FAQs &rarr;
72+
</Link>
73+
</div>
74+
</div>
75+
</div>
76+
</section>
77+
);
78+
}

‎src/components/Home/Hero.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import Link from '@docusaurus/Link';
33

44
const Hero: React.FC = () => {
55
return (
6-
<section className="grid grid-cols-1 lg:grid-cols-2 min-h-screen gap-8 items-center bg-gradient-to-br from-[#1f1c2e] to-[#4285f4] text-white px-2 py-10 dark:from-gray-900 dark:to-gray-800 px-4">
6+
<section className="noise-bg grid grid-cols-1 lg:grid-cols-2 min-h-screen gap-8 items-center px-6">
77
<div className="text-center lg:text-left">
8-
<h1 className="text-4xl lg:text-5xl font-bold leading-tight mb-4">
8+
<h1 className="text-4xl lg:text-5xl font-bold leading-tight mb-6">
99
Master JavaScript with <span className="text-yellow-300 dark:text-yellow-400">Confidence</span>
1010
</h1>
11-
<p className="text-lg lg:text-xl opacity-90 mb-6">
11+
<p className="text-lg lg:text-xl opacity-90 mb-8">
1212
Join thousands of learners in mastering JavaScript from basics to advanced topics. Start your journey to becoming a JavaScript pro today!
1313
</p>
1414
<Link to="/docs/">

0 commit comments

Comments
 (0)