Skip to content

Commit d3beccc

Browse files
darickdangdarickdang
authored
Merge pull request #808 from xmtp/homepage-redesign
Homepage Redesign and Updates
2 parents 8912335 + 93763a8 commit d3beccc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+1743
-253
lines changed

‎docusaurus.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ const config = {
212212
type: "html",
213213
position: "right",
214214
value:
215-
'<button type="button" onClick="window.open(`https://app.converse.xyz/conversation`, `_blank`);" class="navbar__chatbutton"><strong>Try Converse</strong></button>',
215+
'<button type="button" onClick="window.open(`https://converse.xyz`, `_blank`);" class="navbar__chatbutton"><strong>Try Converse</strong></button>',
216216
},
217217
{
218218
href: "https://github.com/xmtp",

‎package-lock.json

+489-125
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@
3434
"clsx": "^1.1.1",
3535
"docusaurus-plugin-plausible": "^0.0.5",
3636
"ethers": "^5.7.2",
37+
"@tailwindcss/forms": "^0.5.3",
38+
"framer-motion": "^6.5.1",
3739
"prism-react-renderer": "^1.2.1",
3840
"react": "^17.0.2",
3941
"react-dom": "^17.0.1",

‎src/components/BuiltWithXmtp/index.js

+698-118
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/FeedbackWidget/styles.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -183,4 +183,4 @@
183183
.form {
184184
margin-top: 4px;
185185
width: 100%;
186-
}
186+
}

‎src/components/ToggleButtons/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default function ToggleButtons() {
4747
<div
4848
ref={darkModeBtnRef}
4949
onClick={handleDarkMode}
50-
className="plausible-event-name=DarkMode w-11 h-11 rounded-full bg-gray-900 grid justify-center items-center border-2 border-solid border-gray-500 right-4 lg:right-12 bottom-5 z-[60] cursor-pointer fixed">
50+
className="hidden opacity-0 plausible-event-name=DarkMode w-11 h-11 rounded-full bg-gray-900 grid justify-center items-center border-2 border-solid border-gray-500 right-4 lg:right-12 bottom-5 z-[60] cursor-pointer fixed">
5151
<img src={`/img/${colorMode}.svg`} />
5252
</div>
5353
<div

‎src/components/gradient.jsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { clsx } from 'clsx'
2+
3+
export function Gradient({ className, ...props }) {
4+
return (
5+
<div
6+
{...props}
7+
className={clsx(
8+
className,
9+
'bg-[linear-gradient(115deg,var(--tw-gradient-stops))] from-[#fff1be] from-[28%] via-[#ee87cb] via-[70%] to-[#b060ff] sm:bg-[linear-gradient(145deg,var(--tw-gradient-stops))]',
10+
)}
11+
/>
12+
)
13+
}
14+
15+
export function GradientBackground() {
16+
return (
17+
<div className="relative mx-auto max-w-7xl">
18+
<div
19+
className={clsx(
20+
'absolute -right-60 -top-44 h-60 w-[36rem] transform-gpu md:right-0',
21+
'bg-[linear-gradient(115deg,var(--tw-gradient-stops))] from-[#fff1be] from-[28%] via-[#ee87cb] via-[70%] to-[#b060ff]',
22+
'rotate-[-10deg] rounded-full blur-3xl',
23+
)}
24+
/>
25+
</div>
26+
)
27+
}

‎src/css/tailwind.css

+20-4
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@
248248

249249
.navbar {
250250
box-shadow: none;
251-
background-color: rgba(255, 255, 255, 0.75);
251+
background-color: rgba(255, 255, 255, 1);
252252
/* blur/backdrop-blur-2xl */
253253
backdrop-filter: blur(20px);
254254
}
@@ -745,18 +745,21 @@ main[class*="docMainContainer"] tr {
745745
}
746746

747747
.navbar__chatbutton {
748-
font-size: 0.8em;
748+
font-size: 0.9em;
749749
color: white;
750750
border: none;
751-
background-color: #4f45e4;
751+
background-color: #000;
752+
border: 1px solid #000;
752753
border-radius: 4px;
753754
padding: 7px 11px;
754755
cursor: pointer;
755756
transition-duration: 0.2s;
756757
}
757758

758759
.navbar__chatbutton:hover {
759-
background-color: #5a2895;
760+
background-color: #fff;
761+
border: 1px solid #000;
762+
color: black;
760763
}
761764

762765
@media (max-width: 450px) {
@@ -1691,3 +1694,16 @@ summary::before {
16911694
.apparelbot .prism-code {
16921695
background-color: #0233d2;
16931696
}
1697+
1698+
@keyframes fadeIn {
1699+
from {
1700+
opacity: 0;
1701+
}
1702+
to {
1703+
opacity: 1;
1704+
}
1705+
}
1706+
1707+
.fade-in {
1708+
animation: fadeIn 0.25s ease-in forwards;
1709+
}

‎src/pages/custom.css

+248
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,251 @@
3838
background-image: linear-gradient(to right, var(--tw-gradient-stops));
3939
}
4040
}
41+
42+
.container {
43+
max-width: 100% !important;
44+
}
45+
46+
.-mt-2 {
47+
margin-top: -2em;
48+
}
49+
50+
.-mt-4 {
51+
margin-top: -4em;
52+
}
53+
54+
.-mt-6 {
55+
margin-top: -6em;
56+
}
57+
58+
.-mt-8 {
59+
margin-top: -8em;
60+
}
61+
62+
.-mt-12 {
63+
margin-top: -12em;
64+
}
65+
66+
.navbar {
67+
padding: 1em !important;
68+
}
69+
70+
.col {
71+
padding: 0;
72+
}
73+
74+
.footer__links {
75+
.col {
76+
padding: 0 3em;
77+
}
78+
}
79+
80+
dd {
81+
margin: 0;
82+
}
83+
84+
.logo-row ul {
85+
padding-left: 0;
86+
}
87+
88+
.logo-row ul li {
89+
list-style-type: none;
90+
}
91+
92+
.pulse-this {
93+
box-shadow: 0px 0px 1px 1px #0000001a;
94+
}
95+
96+
.pulse {
97+
animation: pulse-animation 2s infinite;
98+
}
99+
100+
@keyframes pulse-animation {
101+
0% {
102+
box-shadow: 0 0 2px 0px rgba(252, 79, 55, 0.8);
103+
}
104+
100% {
105+
box-shadow: 0 0 5px 15px rgba(252, 79, 55, 0);
106+
}
107+
}
108+
109+
.lines {
110+
position: absolute;
111+
top: 0;
112+
left: 0;
113+
right: 0;
114+
height: 100%;
115+
margin: auto;
116+
width: 100vw;
117+
z-index: -9;
118+
}
119+
120+
.line {
121+
position: absolute;
122+
width: 1px;
123+
height: 100%;
124+
top: 0;
125+
left: 50%;
126+
background: rgba(255, 255, 255, 0.1);
127+
overflow: hidden;
128+
}
129+
130+
.line::after {
131+
content: "";
132+
display: block;
133+
position: absolute;
134+
height: 15vh;
135+
width: 100%;
136+
top: -50%;
137+
left: 0;
138+
background: linear-gradient(to bottom, rgba(252, 79, 55, 0) 0%, #FC4F37 75%, #FC4F37 100%);
139+
animation: drop 7s 0s infinite;
140+
animation-fill-mode: forwards;
141+
animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
142+
}
143+
144+
.line:nth-child(1) {
145+
margin-left: -25%;
146+
opacity: 0.2;
147+
}
148+
.line:nth-child(1)::after {
149+
animation-delay: 1s;
150+
}
151+
.line:nth-child(2) {
152+
margin-left: -8%;
153+
opacity: 0.25;
154+
}
155+
.line:nth-child(2)::after {
156+
animation-delay: 2s;
157+
}
158+
.line:nth-child(3) {
159+
margin-left: 25%;
160+
}
161+
.line:nth-child(3)::after {
162+
animation-delay: 1.5s;
163+
}
164+
.line:nth-child(4) {
165+
margin-left: 8%;
166+
opacity: 0.5;
167+
}
168+
.line:nth-child(4)::after {
169+
animation-delay: 2.5s;
170+
}
171+
.line:nth-child(5) {
172+
margin-left: 42%;
173+
opacity: 1;
174+
}
175+
.line:nth-child(5)::after {
176+
animation-delay: 3.5s;
177+
}
178+
179+
.h-lines {
180+
position: absolute;
181+
width: 100%;
182+
margin: auto;
183+
height: 100%;
184+
z-index: -9;
185+
}
186+
187+
.h-line {
188+
position: absolute;
189+
height: 1px;
190+
width: 100%;
191+
left: 50%;
192+
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 100%);
193+
overflow: hidden;
194+
}
195+
196+
@media (max-width: 680px) {
197+
.h-line {
198+
position: relative;
199+
}
200+
}
201+
202+
.h-line::after {
203+
content: "";
204+
display: block;
205+
position: absolute;
206+
width: 15vh;
207+
height: 100%;
208+
top: 0%;
209+
left: -50%;
210+
background: linear-gradient(to right, rgba(252, 79, 55, 0) 0%, #FC4F37 75%, #FC4F37 100%);
211+
animation: hdrop 10s 0s infinite;
212+
animation-fill-mode: forwards;
213+
animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
214+
}
215+
216+
.h-line:nth-child(1) {
217+
margin-top: 4%;
218+
}
219+
.h-line:nth-child(1)::after {
220+
animation-delay: 0.5s;
221+
}
222+
.h-line:nth-child(2) {
223+
margin-top: 12%;
224+
opacity: 0.25;
225+
}
226+
.h-line:nth-child(2)::after {
227+
animation-delay: 3s;
228+
}
229+
.h-line:nth-child(3) {
230+
margin-top: 20%;
231+
opacity: 0.25;
232+
}
233+
.h-line:nth-child(3)::after {
234+
animation-delay: 1.5s;
235+
}
236+
.h-line:nth-child(4) {
237+
margin-top: 28%;
238+
opacity: 0.25;
239+
}
240+
.h-line:nth-child(4)::after {
241+
animation-delay: 4s;
242+
}
243+
.h-line:nth-child(5) {
244+
margin-top: 36%;
245+
opacity: 0.75;
246+
}
247+
.h-line:nth-child(5)::after {
248+
animation-delay: 5s;
249+
}
250+
.h-line:nth-child(6) {
251+
margin-top: 44%;
252+
opacity: 0.75;
253+
}
254+
.h-line:nth-child(6)::after {
255+
animation-delay: 4.5s;
256+
}
257+
258+
@keyframes drop {
259+
0% {
260+
top: -50%;
261+
}
262+
100% {
263+
top: 110%;
264+
}
265+
}
266+
267+
@keyframes hdrop {
268+
0% {
269+
left: 0%;
270+
}
271+
100% {
272+
left: 110%;
273+
}
274+
}
275+
276+
.breathe {
277+
background: linear-gradient(-38deg, #101827, #FC4F37);
278+
background-size: 200% 200%;
279+
animation: verticalBreathing 15s ease infinite;
280+
}
281+
282+
@keyframes verticalBreathing {
283+
0% { background-position: 0% 0%; }
284+
25% { background-position: 40% 40%; }
285+
50% { background-position: 80% 80%; }
286+
75% { background-position: 20% 60%; }
287+
100% { background-position: 0% 0%; }
288+
}

‎src/pages/index.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
hide_table_of_contents: true
3-
title: The open source protocol for web3 messaging
4-
description: 2M+ web3 identities trust XMTP for secure & private messaging
3+
title: XMTP is the largest & most secure decentralized messaging network
4+
description: Enterprise-grade secure messaging — powered by decentralization. Start building group chats, DMs, and notifications in minutes.
55
---
66

77
import BuiltWithXmtp from "@site/src/components/BuiltWithXmtp";

‎static/img/ConverseCTA.png

674 KB
Loading

‎static/img/allowButton.png

81.3 KB
Loading

0 commit comments

Comments
 (0)