Skip to content

Commit c50e477

Browse files
luzrainluzrain
committed
Update landing page
1 parent 2532cc3 commit c50e477

File tree

9 files changed

+1027
-681
lines changed

9 files changed

+1027
-681
lines changed

‎Makefile‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@ help: ## Show this help
77
@awk 'BEGIN {FS = ":.*?## "} /^[a-zA-Z1-9_\-\/\.]+:.*?## / {printf " \033[32m%-24s\033[0m %s\n", $$1, $$2}' $(MAKEFILE_LIST)
88

99
node_modules:
10-
@docker run -p 3000:3000 -it --rm --user=${USER_ID}:${GROUP_ID} -v ./:/app/ -w /app/ node:23 bash -c "yarn install"
10+
@docker run -it --rm --user=${USER_ID}:${GROUP_ID} -v ./:/app/ -w /app/ node:23 bash -c "yarn install"
1111

1212
.PHONY: start
1313
start: node_modules ## Yarn start
1414
@docker run -p 3000:3000 -it --rm --user=${USER_ID}:${GROUP_ID} -v ./:/app/ -w /app/ node:23 bash -c "yarn start -h 0.0.0.0"
1515

1616
.PHONY: upgrade
1717
upgrade: node_modules ## Yarn upgrade
18-
@docker run -p 3000:3000 -it --rm --user=${USER_ID}:${GROUP_ID} -v ./:/app/ -w /app/ node:23 bash -c "yarn upgrade"
18+
@docker run -it --rm --user=${USER_ID}:${GROUP_ID} -v ./:/app/ -w /app/ node:23 bash -c "yarn upgrade"
1919

2020
.PHONY: build
2121
build: node_modules ## Yarn build
22-
@docker run -p 3000:3000 -it --rm --user=${USER_ID}:${GROUP_ID} -v ./:/app/ -w /app/ node:23 bash -c "yarn build"
22+
@docker run -it --rm --user=${USER_ID}:${GROUP_ID} -v ./:/app/ -w /app/ node:23 bash -c "yarn build"

‎docs/general/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ title: What is PHPStreamServer?
1010

1111
PHPStreamServer is a high-performance, event-loop-based application server and supervisor for PHP, written in PHP.
1212
Built on top of the [AMPHP](https://amphp.org/) ecosystem and powered by the [Revolt](https://revolt.run/) event loop,
13-
PHPStreamServer delivers asynchronous capabilities that empower the development of efficient and scalable PHP applications.
13+
PHPStreamServer brings asynchronous capabilities that empower the development of efficient and scalable PHP applications.
1414
PHPStreamServer ships with a collection of plugins, making it highly extensible.
1515
With the power of plugins, PHPStreamServer can replace traditional setups such as nginx, php-fpm, cron, and supervisor.
1616
By centralizing these functionalities into a single application server, it reduces complexity and simplifies application deployment.

‎docusaurus.config.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,20 @@ const config = {
151151
additionalLanguages: ['php']
152152
},
153153
}),
154+
155+
plugins: [
156+
async function myPlugin(context, options) {
157+
return {
158+
name: "docusaurus-tailwindcss",
159+
configurePostCss(postcssOptions) {
160+
// Appends TailwindCSS and AutoPrefixer.
161+
postcssOptions.plugins.push(require("@tailwindcss/postcss"));
162+
postcssOptions.plugins.push(require("autoprefixer"));
163+
return postcssOptions;
164+
},
165+
};
166+
},
167+
],
154168
};
155169

156170
export default config;

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,14 @@
1717
"@docusaurus/core": "3.1.1",
1818
"@docusaurus/preset-classic": "3.1.1",
1919
"@mdx-js/react": "^3.0.0",
20+
"@tailwindcss/postcss": "^4.0.7",
21+
"autoprefixer": "^10.4.20",
2022
"clsx": "^2.0.0",
23+
"postcss": "^8.5.3",
2124
"prism-react-renderer": "^2.3.0",
2225
"react": "^18.0.0",
23-
"react-dom": "^18.0.0"
26+
"react-dom": "^18.0.0",
27+
"tailwindcss": "^4.0.7"
2428
},
2529
"devDependencies": {
2630
"@docusaurus/module-type-aliases": "3.1.1",

‎src/components/LandingPage/index.js‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@ import styles from "./index.module.css";
22
import Link from "@docusaurus/Link";
33
import Layout from '@theme/Layout/Provider';
44
import Footer from '@theme/Footer';
5-
import clsx from 'clsx';
65
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
7-
import LogoImg from '@site/static/img/phpss-light.svg';
6+
import LogoImg from '@site/static/img/phpss-banner.svg';
87
import GithubImg from '@site/static/img/GitHub.svg';
98

109
const features = [
@@ -24,32 +23,46 @@ const Index = () => {
2423
const {siteConfig} = useDocusaurusContext();
2524
return (
2625
<Layout title={`${siteConfig.title}`} description="High-performance PHP application server and process manager written in PHP">
27-
<header className={clsx('hero', styles.heroBanner)}>
26+
<header className={styles.heroBanner}>
2827
<div className="container">
29-
<LogoImg alt="PHPStreamServer" className={styles.logo}/>
30-
<p className="hero__subtitle">High-performance PHP application server and process manager written in PHP.</p>
28+
<LogoImg alt="PHPStreamServer" className="w-auto h-[2.5em] lg:h-[3.5em] lg:w-auto mb-5 text-black dark:text-gray-200"/>
29+
<div className="mb-5 text-xl lg:text-2xl font-semibold dark:text-gray-200">
30+
High-performance PHP application server and process manager written in PHP
31+
</div>
32+
<div className="dark:text-gray-200">
33+
PHPStreamServer is a high-performance, event-loop-based application server and supervisor for PHP, written in PHP.<br/>
34+
Powered by the <Link href="https://revolt.run/">Revolt</Link> event loop and built on the <Link href="https://amphp.org/">AMPHP</Link> ecosystem, it brings true asynchronous capabilities to your applications.<br/>
35+
PHPStreamServer is highly extensible with its plugin system, allowing it to replace traditional setups like Nginx, PHP-FPM, Cron, and Supervisor.
36+
</div>
3137
<div className={styles.buttons}>
32-
<Link className="button button--secondary button--lg" to="/docs/general/">
38+
<Link className={styles.button} to="/docs/general/">
3339
Get started
3440
</Link>
35-
<Link className="button button--secondary button--lg" href="https://github.com/phpstreamserver/phpstreamserver">
41+
<Link className={styles.button} href="https://github.com/phpstreamserver/phpstreamserver">
3642
<div className={styles.githubButtonGroup}>
37-
<GithubImg alt=""/> <span>GitHub</span>
43+
<GithubImg alt="" fill="currentColor" className="w-[1.25em] h-[1.25em] me-1"/> <span>GitHub</span>
3844
</div>
3945
</Link>
46+
<img className="invisible lg:visible h-[1.5em]" src="https://img.shields.io/github/stars/phpstreamserver/phpstreamserver" alt="Stars"/>
4047
</div>
4148
</div>
4249
</header>
4350

4451
<div className={styles.featuresSection}>
4552
<div className="container">
46-
<h2>Features</h2>
47-
<div className={styles.featuresGrid}>
53+
<h2 className={styles.subtitle}>Features</h2>
54+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
4855
{features.map((feature, index) => (
4956
<div key={index} className={styles.featureCard}>
50-
<div className={styles.featureIcon}>{feature.icon}</div>
51-
<h3 className={styles.featureTitle}>{feature.title}</h3>
52-
<p>{feature.description}</p>
57+
<div className="flex items-center">
58+
<div className={styles.featureIcon}>{feature.icon}</div>
59+
</div>
60+
<div className="flex items-center">
61+
<div>
62+
<div className="text-xl font-semibold mb-2 w-full">{feature.title}</div>
63+
<div>{feature.description}</div>
64+
</div>
65+
</div>
5366
</div>
5467
))}
5568
</div>

‎src/components/LandingPage/index.module.css‎

Lines changed: 77 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,124 @@
1+
@import "tailwindcss/theme.css" layer(theme);
2+
@custom-variant dark (&:where(html[data-theme="dark"] *));
3+
14
.heroBanner {
2-
padding: 5rem 0;
5+
padding: 2rem;
6+
@apply px-4 py-[3em] lg:py-[6em];
37
text-align: left;
48
position: relative;
59
overflow: hidden;
6-
background: linear-gradient(145deg, var(--ifm-hero-background-color) 20%, var(--header-gradient) 100%);
710
color: var(--ifm-color-gray-1000);
11+
background: linear-gradient(135deg, color-mix(in srgb, var(--ifm-hero-background-color), transparent 95%) 50%, color-mix(in srgb, var(--ifm-hero-background-color), transparent 98%) 25%, transparent 50%);
12+
}
13+
14+
.heroBanner:before {
15+
content: "";
16+
position: absolute;
17+
top: 0;
18+
left: 0;
19+
width: 100%;
20+
height: 100%;
21+
background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--ifm-hero-background-color), transparent 92%), transparent 40%);
22+
pointer-events: none;
23+
}
24+
25+
.subtitle {
26+
font-weight: 700;
27+
margin-bottom: 1em;
28+
padding-bottom: 0.5em;
29+
position: relative;
830
}
931

10-
@media screen and (max-width: 996px) {
11-
.heroBanner {
12-
padding: 2rem;
13-
}
32+
.subtitle::after {
33+
content: "";
34+
position: absolute;
35+
display: block;
36+
width: 1.6em;
37+
height: 3px;
38+
background: #0d83fd;
39+
left: 0;
40+
right: 0;
41+
bottom: 0;
42+
margin: auto;
1443
}
1544

16-
.logo {
17-
height: auto;
18-
max-width: 500px;
19-
min-width: 300px;
20-
width: 32%;
45+
46+
.about1 {
47+
font-size: 1.5rem;
48+
margin-bottom: 1.25rem;
49+
font-weight: 600;
50+
line-height: 1;
2151
}
2252

2353
.featuresSection {
2454
padding: 2rem 1rem;
25-
text-align: center;
2655
}
2756

2857
.featuresSection h2 {
2958
font-size: 2rem;
3059
margin-bottom: 2rem;
60+
text-align: center;
3161
}
3262

3363
.featuresGrid {
3464
display: flex;
3565
flex-wrap: wrap;
3666
gap: 1.5rem;
37-
justify-content: center;
3867
}
3968

4069
.featureCard {
4170
font-size: 0.9em;
42-
background: var(--ifm-background-color);
43-
border: 1px solid var(--ifm-color-emphasis-300);
4471
border-radius: 0.5em;
4572
padding: 1em;
46-
width: 16em;
47-
text-align: center;
73+
gap: 1em;
4874
transition: all .2s ease-out;
75+
display: flex;
4976
}
5077

5178
.featureCard:hover {
5279
transform: scale(1.04);
5380
}
5481

5582
.featureIcon {
56-
font-size: 2.5em;
57-
margin-bottom: 0.25em;
58-
filter: grayscale(100%);
59-
}
60-
61-
.featureCard:hover .featureIcon {
62-
filter: grayscale(0%);
63-
}
64-
65-
.featureTitle {
66-
font-size: 1.33em;
83+
font-size: 1.5em;
84+
width: 3em;
85+
height: 3em;
86+
display: flex;
87+
align-items: center;
88+
justify-content: center;
89+
border-radius: 50%;
90+
background-color: color-mix(in srgb, var(--ifm-hero-background-color), transparent 92%);
6791
}
6892

6993
.buttons {
7094
display: flex;
71-
gap: 1em;
72-
//justify-content: center;
95+
gap: 1.5em;
96+
align-items: center;
97+
margin-top: 3rem;
98+
}
99+
100+
.button {
101+
border-radius: 50px;
102+
font-weight: 600;
103+
transition: all 0.3s ease;
104+
font-size: 1.2em;
105+
@apply
106+
text-white
107+
dark:text-gray-800
108+
bg-[#27272a]
109+
dark:bg-neutral-200
110+
whitespace-nowrap
111+
px-5
112+
py-1.5
113+
lg:px-7
114+
lg:py-2
115+
;
73116
}
74117

75-
.buttons svg {
76-
width: auto;
77-
height: 1em;
118+
.button:hover {
119+
text-decoration: none;
120+
color: inherit;
121+
@apply text-white dark:text-gray-800;
78122
}
79123

80124
.githubButtonGroup {

‎src/css/custom.css‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
* work well for content-centric websites.
55
*/
66

7+
@layer theme, base, components, utilities;
8+
@import "tailwindcss/theme.css" layer(theme);
9+
@import "tailwindcss/utilities.css" layer(utilities);
10+
@custom-variant dark (&:where(html[data-theme="dark"] *));
11+
712
/* You can override the default Infima variables here. */
813
:root {
914
--ifm-color-primary: #0969da;
@@ -15,7 +20,7 @@
1520
--ifm-color-primary-lightest: #318cf6;
1621
--ifm-code-font-size: 95%;
1722
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
18-
--ifm-hero-background-color: #bdd7fd;
23+
--ifm-hero-background-color: #0d83fd;
1924
--ifm-leading-desktop: 1;
2025
--header-gradient: #fff;
2126

@@ -31,7 +36,7 @@
3136
--ifm-color-primary-lighter: #599bf9;
3237
--ifm-color-primary-lightest: #84b4fa;
3338
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
34-
--ifm-hero-background-color: #80b4f1;
39+
--ifm-hero-background-color: #0078ff;
3540
--header-gradient: #d5d5d5
3641
}
3742

@@ -60,3 +65,7 @@ pre {
6065
article h1 a, article h2 a, article h3 a, article h4 a, article h1 a:hover, article h2 a:hover, article h3 a:hover, article h4 a:hover {
6166
color: inherit;
6267
}
68+
69+
.footer {
70+
@apply bg-stone-100 dark:bg-stone-800;
71+
}

0 commit comments

Comments
 (0)