Skip to content

Commit 79959e2

Browse files
sajadevosajadevo
committed
Merge branch 'pr-477'
2 parents 6156e5a + 5d94bd6 commit 79959e2

File tree

9 files changed

+254
-102
lines changed

9 files changed

+254
-102
lines changed

‎public/image/header-bg.png‎

823 KB
Loading

‎public/img/logos/icon-html.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎public/img/logos/icon-react.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎public/svg/popular-tech.svg‎

Lines changed: 9 additions & 9 deletions
Loading

‎widgets/sections/components.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ export function Components() {
222222
variant="h1"
223223
className="my-5 text-center text-4xl font-semibold text-primary md:text-5xl"
224224
>
225-
200+ Tailwind CSS Components
225+
460+ Tailwind CSS Components
226226
</Typography>
227227
<Typography
228228
variant="paragraph"

‎widgets/sections/features.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -144,13 +144,13 @@ function CssComponents() {
144144

145145
function GlobalStyles() {
146146
return (
147-
<Image
148-
width={1280}
149-
height={1280}
150-
alt="card background"
151-
src="/image/global-styles.png"
152-
className="h-full w-full object-cover object-center"
153-
/>
147+
<Image
148+
width={1280}
149+
height={1280}
150+
alt="card background"
151+
src="/image/global-styles.png"
152+
className="h-full w-full object-cover object-center"
153+
/>
154154
);
155155
}
156156

‎widgets/sections/figma.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ export function Figma() {
101101
</div>
102102
<div className="mt-16 text-center">
103103
<Link
104-
href="https://www.figma.com/file/UxNLsnbwl4Hps3KdbFvcgK/Material-Tailwind-Figma-v2.0.0?type=design&node-id=916-5781&mode=design&t=WzeVRo5zGAzGdjHv-0"
104+
href="/figma"
105105
target="_blank"
106106
>
107107
<Button
@@ -116,7 +116,7 @@ export function Figma() {
116116
alt="Figma Logo"
117117
className="absolute"
118118
/>
119-
<span className="pl-8">Preview in Figma</span>
119+
<span className="pl-8">Explore in Figma</span>
120120
</Button>
121121
</Link>
122122
<Link href="/figma#pricing">

‎widgets/sections/hero.tsx‎

Lines changed: 190 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,208 @@
11
import React from "react";
22
import Link from "next/link";
3-
import { CheckCircleIcon } from "@heroicons/react/24/solid";
43
import { CopyToClipboard } from "react-copy-to-clipboard";
5-
import { Chip, Typography, Button, Carousel } from "@material-tailwind/react";
4+
import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
5+
import {
6+
Chip,
7+
Typography,
8+
Button,
9+
Card,
10+
IconButton,
11+
Menu,
12+
MenuHandler,
13+
MenuItem,
14+
MenuList,
15+
} from "@material-tailwind/react";
616

7-
export function Hero() {
8-
const [copied, setCopied] = React.useState(false);
17+
interface StatsCardPropsType {
18+
count: string;
19+
title: string;
20+
}
921

22+
function StatsCard({ count, title }: StatsCardPropsType) {
1023
return (
11-
<div className="grid h-full min-h-[84vh] place-items-center bg-[url('/svg/header-bg.svg')] bg-cover bg-center bg-no-repeat">
12-
<div className="container mx-auto px-4 text-center lg:w-8/12 xl:w-7/12">
13-
<Link href="/docs/react/release-notes">
14-
<div className="inline-flex items-center rounded-full border-[1.5px] border-blue-gray-50 bg-white py-1 pl-1 pr-8 font-medium text-primary">
15-
<Chip
16-
value="New"
17-
className="mr-3 rounded-full bg-primary px-3.5 !pb-2 pt-2.5 font-medium leading-none"
18-
/>
19-
Update is available for @material-tailwind/react
20-
</div>
21-
</Link>
22-
<Typography
23-
variant="h1"
24-
className="relative mx-auto mt-10 mb-6 text-center text-4xl font-black !leading-tight tracking-normal text-primary md:text-5xl lg:max-w-5xl"
25-
>
26-
The Tailwind CSS Components Library For Coding 10x Faster
24+
<div className="lg:border-l-2 lg:first:border-l-0">
25+
<Card color="transparent" shadow={false}>
26+
<Typography variant="h6" className="mb-1 text-gray-500">
27+
{title}
2728
</Typography>
28-
<Typography className="md:text-md relative mx-auto text-center text-lg font-normal leading-normal !text-gray-600 lg:max-w-5xl">
29-
Material Tailwind is an open-source library that uses the power of
30-
Tailwind CSS and React to help you build unique web projects faster
31-
and easier. The stunning design inspired by Material Design is a
32-
bonus!
29+
<Typography variant="h1" color="blue-gray" className="text-[40px]">
30+
{count}
3331
</Typography>
34-
<div className="my-4 mx-auto grid max-w-sm justify-center">
35-
<Carousel autoplay loop autoplayDelay={5000}>
36-
<img
37-
src="/image/carousel-1.png"
38-
alt="carousel 1"
39-
className="h-full w-full"
40-
/>
41-
<img
42-
src="/image/carousel-2.png"
43-
alt="carousel 2"
44-
className="h-full w-full"
45-
/>
46-
<img
47-
src="/image/carousel-3.png"
48-
alt="carousel 3"
49-
className="h-full w-full"
50-
/>
51-
</Carousel>
52-
</div>
53-
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
54-
<div
55-
onMouseLeave={() => setCopied(false)}
56-
className="w-full sm:w-auto"
32+
</Card>
33+
</div>
34+
);
35+
}
36+
37+
const stats = [
38+
{
39+
count: "1,000,000+",
40+
title: "NPM Installs",
41+
},
42+
{
43+
count: "18,000",
44+
title: "Live Projects",
45+
},
46+
{
47+
count: "2,500",
48+
title: "Github Stars",
49+
},
50+
{
51+
count: "460+",
52+
title: "Components",
53+
},
54+
];
55+
56+
export function Hero() {
57+
const [copied, setCopied] = React.useState(false);
58+
const [active, setActive] = React.useState(2);
59+
60+
return (
61+
<>
62+
<div className="grid h-full min-h-[84vh] place-items-center bg-[url('/image/header-bg.png')] bg-cover bg-center bg-no-repeat">
63+
<div className="container mx-auto px-4 text-center lg:w-8/12 xl:w-7/12">
64+
<Link href="/docs/react/release-notes">
65+
<div className="inline-flex items-center rounded-lg border-[1.5px] border-blue-gray-50 bg-white py-1 pl-1 pr-8 font-medium text-primary">
66+
<Chip
67+
value="New"
68+
className="mr-3 rounded-md bg-primary px-3.5 !pb-2 pt-2.5 font-medium leading-none"
69+
/>
70+
Update is available for @material-tailwind/react
71+
</div>
72+
</Link>
73+
<Typography
74+
variant="h1"
75+
className="relative mx-auto mt-10 mb-6 text-center text-4xl font-black !leading-tight tracking-normal text-primary md:text-5xl lg:max-w-5xl"
5776
>
58-
<CopyToClipboard
59-
onCopy={() => setCopied(true)}
60-
text="npm i @material-tailwind/react"
61-
>
77+
The Tailwind CSS Components Library For Coding 10x Faster
78+
</Typography>
79+
<Typography className="md:text-md relative mx-auto mb-10 text-center text-lg font-normal leading-normal !text-gray-600 lg:max-w-5xl">
80+
Material Tailwind is an open-source library that uses the power of
81+
Tailwind CSS and React to help you build unique web projects faster
82+
and easier. The stunning design inspired by Material Design is a
83+
bonus!
84+
</Typography>
85+
<div className="flex shrink-0 flex-wrap place-content-center items-center gap-4">
86+
<div className="inline-flex items-center justify-between gap-3 rounded-lg border-[1.5px] border-blue-gray-50 bg-white py-1 px-2 font-medium text-primary">
87+
<Typography variant="h6">
88+
npm i @material-tailwind/react
89+
</Typography>
90+
<div>
91+
<CopyToClipboard
92+
onCopy={() => setCopied(true)}
93+
text="npm i @material-tailwind/react"
94+
>
95+
<IconButton
96+
color="white"
97+
className={`cursor-pointer ${
98+
active === 1 ? "opacity-100" : "opacity-50"
99+
}`}
100+
onMouseLeave={() => setCopied(false)}
101+
onClick={() => setActive(1)}
102+
>
103+
<DocumentDuplicateIcon className="h-5 w-5 text-gray-700" />
104+
</IconButton>
105+
</CopyToClipboard>
106+
</div>
107+
<IconButton
108+
className={`cursor-pointer ${
109+
active === 2 ? "opacity-100" : "opacity-50 grayscale"
110+
}`}
111+
size="sm"
112+
color="white"
113+
onClick={() => setActive(2)}
114+
>
115+
<img
116+
src="/img/logos/icon-react.svg"
117+
alt="react-icon"
118+
className="h-5 w-5"
119+
/>
120+
</IconButton>
121+
<IconButton
122+
className={`cursor-pointer ${
123+
active === 3 ? "opacity-100" : "opacity-50 grayscale"
124+
}`}
125+
size="sm"
126+
color="white"
127+
onClick={() => setActive(3)}
128+
>
129+
<img
130+
src="/img/logos/icon-html.svg"
131+
alt="html-icon"
132+
className="h-5 w-5"
133+
/>
134+
</IconButton>
135+
</div>
136+
<Link href="/docs/react/installation" target="_blank">
62137
<Button
63-
size="lg"
64-
disabled={copied}
65-
variant="outlined"
66-
className="relative inline-flex w-full items-center justify-center gap-3 border-[1.5px] border-blue-gray-50 bg-white px-5 py-[12.5px] text-center font-mono text-base font-medium lowercase text-primary focus:ring-transparent disabled:opacity-100 sm:w-auto"
138+
color="gray"
139+
variant="filled"
140+
className="bg-primary py-3 text-base font-medium capitalize"
67141
>
68-
<span className={copied ? "opacity-0" : "opacity-100"}>
69-
npm i @material-tailwind/react
70-
</span>
71-
<span
72-
className={`${
73-
copied ? "scale-100 opacity-100" : "scale-90 opacity-0"
74-
} absolute left-2/4 flex -translate-x-2/4 items-center gap-2 capitalize text-green-500 transition-transform duration-300
75-
`}
76-
>
77-
<CheckCircleIcon className="h-5 w-5" />
78-
Copied
79-
</span>
142+
Get Started
80143
</Button>
81-
</CopyToClipboard>
144+
</Link>
145+
</div>
146+
147+
<div className="my-4 mt-16 grid grid-cols-2 gap-y-16 gap-x-8 lg:grid-cols-4">
148+
{stats.map((props, key) => (
149+
<StatsCard key={key} {...props} />
150+
))}
82151
</div>
83-
<Link href="/docs/react/installation" className="w-full sm:w-auto">
84-
<Button
85-
size="lg"
86-
color="gray"
87-
variant="filled"
88-
className="w-full bg-primary text-base font-medium capitalize sm:w-auto"
89-
>
90-
Get Started
91-
</Button>
92-
</Link>
93152
</div>
94153
</div>
95-
</div>
154+
<Card className="fixed right-10 top-20 translate-y-[42rem] border border-gray-100 p-3">
155+
<Menu placement="bottom-end">
156+
<MenuHandler>
157+
<IconButton size="lg" color="white">
158+
<img
159+
src="/img/logos/icon-react.svg"
160+
alt="react-icon"
161+
className="h-20 w-20"
162+
/>
163+
</IconButton>
164+
</MenuHandler>
165+
<MenuList className="mt-4">
166+
<Link href="/docs/react/installation" target="_blank">
167+
<MenuItem className="flex items-center gap-2">
168+
<img
169+
src="/img/logos/icon-react.svg"
170+
alt="react-icon"
171+
className="h-6 w-6"
172+
/>
173+
<Typography variant="h6" color="blue-gray">
174+
React
175+
</Typography>
176+
</MenuItem>
177+
</Link>
178+
<Link href="/docs/html/installation" target="_blank">
179+
<MenuItem className="flex items-center gap-2">
180+
<img
181+
src="/img/logos/icon-html.svg"
182+
alt="html-icon"
183+
className="h-6 w-6"
184+
/>
185+
<Typography variant="h6" color="blue-gray">
186+
HTML
187+
</Typography>
188+
</MenuItem>
189+
</Link>
190+
<Link href="/figma" target="_blank">
191+
<MenuItem className="flex items-center gap-2">
192+
<img
193+
src="/img/icon-figma.svg"
194+
alt="figma-icon"
195+
className="h-6 w-6"
196+
/>
197+
<Typography variant="h6" color="blue-gray">
198+
Figma
199+
</Typography>
200+
</MenuItem>
201+
</Link>
202+
</MenuList>
203+
</Menu>
204+
</Card>
205+
</>
96206
);
97207
}
98208

‎widgets/sections/pro.tsx‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Link from "next/link";
22
import Image from "next/image";
3-
import { Typography, Card, CardBody } from "@material-tailwind/react";
3+
import { Typography, Card, CardBody, Button } from "@material-tailwind/react";
44

55
const DATA = [
66
{
@@ -82,7 +82,7 @@ export function Pro() {
8282
floated ? "translate-y-3 translate-x-6 scale-110" : ""
8383
} ${
8484
mini
85-
? "mx-auto mt-12 scale-[0.6] lg:mt-auto"
85+
? "mx-auto mt-12 scale-[0.8] lg:mt-auto"
8686
: "mt-6 h-64 w-full"
8787
}`}
8888
alt="card-image"
@@ -106,7 +106,7 @@ export function Pro() {
106106
variant="h2"
107107
className="font-semibold text-primary"
108108
>
109-
50+
109+
170+
110110
</Typography>
111111
<Typography
112112
variant="h5"
@@ -131,6 +131,30 @@ export function Pro() {
131131
</Card>
132132
</Link>
133133
</div>
134+
<div className="mt-16 text-center">
135+
<Link
136+
href="https://www.figma.com/file/UxNLsnbwl4Hps3KdbFvcgK/Material-Tailwind-Figma-v2.0.0?type=design&node-id=916-5781&mode=design&t=WzeVRo5zGAzGdjHv-0"
137+
target="_blank"
138+
>
139+
<Button
140+
size="lg"
141+
variant="outlined"
142+
className="bg-white text-base font-medium capitalize text-primary focus:ring-transparent"
143+
>
144+
Material Tailwind PRO
145+
</Button>
146+
</Link>
147+
<Link href="/figma#pricing">
148+
<Button
149+
size="lg"
150+
variant="filled"
151+
color="gray"
152+
className="ml-4 bg-primary text-base font-medium capitalize"
153+
>
154+
Pricing & FAQ
155+
</Button>
156+
</Link>
157+
</div>
134158
</div>
135159
</section>
136160
);

0 commit comments

Comments
 (0)