Skip to content

Commit 429cf2c

Browse files
katarinasupekatarinasupe
authored
Update footer (#154)
1 parent 682b3ca commit 429cf2c

File tree

6 files changed

+185
-123
lines changed

6 files changed

+185
-123
lines changed

‎components/Footer.js

+100-39
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,108 @@
1-
import React from 'react';
2-
import Image from 'next/image';
1+
import React from "react";
2+
import Image from "next/image";
3+
import Link from "next/link";
34

45
const ExternalLink = ({ href, children }) => (
5-
<a href={href} target="_blank" rel="noopener noreferrer" className="external-link">
6-
<span className="external-link-text">{children}</span>
7-
<Image src="/docs/external-link.svg" alt="External Link" width={16} height={17} />
8-
</a>
6+
<Link
7+
href={href}
8+
target="_blank"
9+
rel="noopener noreferrer"
10+
className="external-link"
11+
>
12+
<span className="external-link-text">{children}</span>
13+
<Image
14+
src="/docs/external-link.svg"
15+
alt="External Link"
16+
width={16}
17+
height={17}
18+
/>
19+
</Link>
920
);
1021

1122
const Footer = () => (
12-
<footer className="footer-container">
13-
<div className="footer-logo">
14-
<img src="/docs/memgraph-logo-footer.svg" alt="Memgraph Logo" width="162" height="55" />
15-
</div>
16-
<div className="footer-column">
17-
<ul className="column-text">
18-
<li><span className="column-title">Documentation</span ></li>
19-
<li><a href="/docs/getting-started">Get started</a></li>
20-
<li><a href="/docs/data-migration">Migrate data</a></li>
21-
<li><a href="/docs/querying">Query data</a></li>
22-
<li><a href="/docs/custom-query-modules">Create an app</a></li>
23-
<li><a href="/docs/data-visualization">Visualize data</a></li>
24-
<li><a href="/docs/advanced-algorithms">Use advanced algorithms</a></li>
25-
</ul>
26-
</div>
27-
<div className="footer-column">
28-
<ul className="column-text">
29-
<li><span className="column-title">Community</span ></li>
30-
<li><ExternalLink href="https://discord.gg/memgraph">Discord</ExternalLink></li>
31-
<li><ExternalLink href="https://stackoverflow.com/questions/tagged/memgraphdb">Stack Overflow</ExternalLink></li>
32-
<li><ExternalLink href="https://twitter.com/memgraphdb">Twitter</ExternalLink></li>
33-
</ul>
34-
</div>
35-
<div className="footer-column">
36-
<ul className="column-text">
37-
<li><span className="column-title">More</span ></li>
38-
<li><ExternalLink href="https://cloud.memgraph.com/login">Memgraph Cloud</ExternalLink></li>
39-
<li><ExternalLink href="https://playground.memgraph.com">Memgraph Playground</ExternalLink></li>
40-
<li><ExternalLink href="https://github.com/memgraph/memgraph">GitHub</ExternalLink></li>
41-
<li><ExternalLink href="https://www.youtube.com/channel/UCZ3HOJvHGxtQ_JHxOselBYg">YouTube</ExternalLink></li>
42-
</ul>
43-
</div>
44-
</footer>
23+
<footer className="flex flex-col pt-[56px] lg:pt-[107px] px-[40px] lg:px-[156px] h-full lg:h-[511px] bg-[#F9F9F9]">
24+
<div className="flex flex-col lg:flex-row gap-[40px] lg:gap-[80px] mb-[45px]">
25+
<div className="flex flex-col mr-[140px] w-[162px] h-[56px]">
26+
<Image
27+
src="/docs/memgraph-logo-footer.svg"
28+
alt="Memgraph Logo"
29+
width="162"
30+
height="56"
31+
/>
32+
</div>
33+
<div className="flex flex-col gap-[12px]">
34+
<div className="mb-[3px] text-[#231F20] text-[18px] leading-[31px] font-medium">
35+
Documentation
36+
</div>
37+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
38+
<Link href="/getting-started">Get started</Link>
39+
</div>
40+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
41+
<Link href="/data-migration">Migrate data</Link>
42+
</div>
43+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
44+
<Link href="/querying">Query data</Link>
45+
</div>
46+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
47+
<Link href="/custom-query-modules">Create an app</Link>
48+
</div>
49+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
50+
<Link href="/data-visualization">Visualize data</Link>
51+
</div>
52+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
53+
<Link href="/advanced-algorithms">Use advanced algorithms</Link>
54+
</div>
55+
</div>
56+
<div className="flex flex-col gap-[12px]">
57+
<div className="mb-[3px] text-[#231F20] text-[18px] leading-[31px] font-medium">
58+
Community
59+
</div>
60+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
61+
<ExternalLink href="https://discord.gg/memgraph">
62+
Discord
63+
</ExternalLink>
64+
</div>
65+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
66+
<ExternalLink href="https://stackoverflow.com/questions/tagged/memgraphdb">
67+
Stack Overflow
68+
</ExternalLink>
69+
</div>
70+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
71+
<ExternalLink href="https://twitter.com/memgraphdb">
72+
Twitter
73+
</ExternalLink>
74+
</div>
75+
</div>
76+
<div className="flex flex-col gap-[12px]">
77+
<div className="mb-[3px] text-[#231F20] text-[18px] leading-[31px] font-medium">
78+
More
79+
</div>
80+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
81+
<ExternalLink href="https://cloud.memgraph.com/login">
82+
Memgraph Cloud
83+
</ExternalLink>
84+
</div>
85+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
86+
<ExternalLink href="https://playground.memgraph.com">
87+
Memgraph Playground
88+
</ExternalLink>
89+
</div>
90+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
91+
<ExternalLink href="https://github.com/memgraph/memgraph">
92+
GitHub
93+
</ExternalLink>
94+
</div>
95+
<div className="text-[#231F20] text-[16px] leading-[31px] font-normal">
96+
<ExternalLink href="https://www.youtube.com/channel/UCZ3HOJvHGxtQ_JHxOselBYg">
97+
YouTube
98+
</ExternalLink>
99+
</div>
100+
</div>
101+
</div>
102+
<div className="flex flex-row text-[11px] text-[#646265] font-normal">
103+
Copyright © 2023 Memgraph
104+
</div>
105+
</footer>
45106
);
46107

47108
export default Footer;

‎package.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,19 @@
1919
},
2020
"homepage": "https://github.com/shuding/nextra-docs-template#readme",
2121
"dependencies": {
22+
"autoprefixer": "^10.4.15",
2223
"next": "^13.4.19",
2324
"next-sitemap": "^4.2.3",
2425
"next-themes": "^0.2.1",
2526
"nextra": "^2.12.3",
2627
"nextra-theme-docs": "^2.12.3",
28+
"postcss": "^8.4.29",
2729
"react": "^18.2.0",
28-
"react-dom": "^18.2.0"
30+
"react-dom": "^18.2.0",
31+
"tailwindcss": "^3.3.3"
2932
},
3033
"devDependencies": {
31-
"@types/node": "20.5.9",
34+
"@types/node": "20.6.0",
3235
"typescript": "^5.2.2"
3336
}
3437
}

‎postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎styles/globals.css

+41-66
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
15
:root {
2-
--brand-main-text: #231F20;
6+
--brand-main-text: #231f20;
37
--secondary-text: #646265;
48
}
59

@@ -12,22 +16,26 @@ body {
1216
color: var(--secondary-text);
1317
}
1418

15-
article a,
16-
article a:visited,
17-
article a:hover,
19+
article a,
20+
article a:visited,
21+
article a:hover,
1822
article a:active {
19-
color: #8C0082 !important;
23+
color: #8c0082 !important;
2024
}
2125

22-
h1, h3 {
26+
h1,
27+
h3 {
2328
font-weight: 600;
2429
}
2530

2631
h2 {
2732
font-weight: 400;
2833
}
2934

30-
h4, h5, h6, h7 {
35+
h4,
36+
h5,
37+
h6,
38+
h7 {
3139
font-weight: 500;
3240
}
3341

@@ -51,14 +59,19 @@ h4 {
5159
line-height: 28px;
5260
}
5361

54-
h5, h6, h7 {
62+
h5,
63+
h6,
64+
h7 {
5565
font-size: 18px;
5666
line-height: 24px;
5767
}
5868

5969
nav .nextra-scrollbar .nx-text-primary-600 {
60-
color: #8C0082; /* Fallback color */
61-
background: var(--gradient-2, linear-gradient(99deg, #FFC500 -44.02%, #DC2223 15.24%, #720096 100%));
70+
color: #8c0082; /* Fallback color */
71+
background: var(
72+
--gradient-2,
73+
linear-gradient(99deg, #ffc500 -44.02%, #dc2223 15.24%, #720096 100%)
74+
);
6275
background-clip: text;
6376
-webkit-background-clip: text;
6477
-webkit-text-fill-color: transparent;
@@ -76,31 +89,41 @@ nav .nextra-scrollbar {
7689

7790
.nextra-sidebar-container .active > a {
7891
border-radius: 4px;
79-
background: linear-gradient(104deg, rgba(255, 197, 0, 0.12) 0%, rgba(220, 34, 35, 0.12) 41.15%, rgba(114, 0, 150, 0.12) 100%);
92+
background: linear-gradient(
93+
104deg,
94+
rgba(255, 197, 0, 0.12) 0%,
95+
rgba(220, 34, 35, 0.12) 41.15%,
96+
rgba(114, 0, 150, 0.12) 100%
97+
);
8098
font-size: 14px;
8199
font-weight: 600;
82100
line-height: 21px;
83101
}
84102

85103
.nextra-card:hover {
86104
border-radius: 4px;
87-
border: 1px solid var(--silver-gray, #E6E6E6);
88-
background: linear-gradient(104deg, rgba(255, 197, 0, 0.20) 0%, rgba(220, 34, 35, 0.20) 41.15%, rgba(114, 0, 150, 0.20) 100%);
105+
border: 1px solid var(--silver-gray, #e6e6e6);
106+
background: linear-gradient(
107+
104deg,
108+
rgba(255, 197, 0, 0.2) 0%,
109+
rgba(220, 34, 35, 0.2) 41.15%,
110+
rgba(114, 0, 150, 0.2) 100%
111+
);
89112
}
90113

91114
.nextra-code-block pre {
92-
background-color: #F9F9F9 !important;
115+
background-color: #f9f9f9 !important;
93116
}
94117

95-
.nextra-toc,
118+
.nextra-toc,
96119
.nextra-toc * {
97120
font-weight: 500 !important;
98121
}
99122

100123
/* Styles for the footer */
101124
footer {
102125
flex-shrink: 0;
103-
background: var(--background-gray, #F9F9F9);
126+
background: var(--background-gray, #f9f9f9);
104127
display: flex;
105128
justify-content: space-between;
106129
padding: 20px 0 60px;
@@ -113,72 +136,24 @@ footer {
113136
display: flex;
114137
align-items: center;
115138
justify-content: flex-start;
116-
text-decoration: none;
139+
text-decoration: none;
117140
}
118141

119142
.external-link-text {
120143
margin-right: 8px;
121144
}
122145

123-
footer .column-text {
124-
display: flex;
125-
flex-direction: column;
126-
gap: 15px;
127-
}
128-
129-
footer .column-title {
130-
color: var(--brand-main-text);
131-
font-size: 18px;
132-
font-weight: 500;
133-
line-height: 31px;
134-
margin-bottom: 55px;
135-
}
136-
137146
.footer-container {
138147
display: flex;
139148
justify-content: space-between;
140149
flex-wrap: wrap;
141150
}
142151

143-
.footer-logo, .footer-column {
144-
margin: 10px;
145-
}
146-
147-
@media (max-width: 768px) {
148-
.footer-container {
149-
flex-direction: column;
150-
align-items: flex-start;
151-
}
152-
}
153-
154152
.whole-footer-wrapper {
155-
background: var(--background-gray, #F9F9F9);
153+
background: var(--background-gray, #f9f9f9);
156154
margin-left: calc(-50vw + 50%);
157155
margin-right: calc(-50vw + 50%);
158156
padding-left: calc(50vw - 50%);
159157
padding-right: calc(50vw - 50%);
160158
position: relative;
161159
}
162-
163-
.custom-copyright {
164-
display: flex;
165-
justify-content: space-between;
166-
padding: 20px;
167-
max-width: 1440px;
168-
width: 100%;
169-
margin: 0 auto;
170-
color: var(--secondary-text);
171-
font-size: 11px;
172-
font-weight: 400;
173-
position: relative;
174-
}
175-
176-
.custom-copyright::before {
177-
content: "";
178-
position: absolute;
179-
top: 0;
180-
left: -100vw;
181-
right: -100vw;
182-
height: 0.5px;
183-
background: #BAB8BB;
184-
}

‎tailwind.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: [
4+
"./pages/**/*.{js,jsx,ts,tsx,md,mdx}",
5+
"./components/**/*.{js,jsx,ts,tsx,md,mdx}",
6+
7+
// Or if using `src` directory:
8+
"./src/**/*.{js,jsx,ts,tsx,md,mdx}",
9+
],
10+
theme: {
11+
extend: {},
12+
},
13+
plugins: [],
14+
};

0 commit comments

Comments
 (0)