Skip to content

Commit 8cd1a57

Browse files
monuk7735monuk7735
committed
add: faq and support pages + responsive nav bar
1 parent 936f1f6 commit 8cd1a57

File tree

4 files changed

+217
-34
lines changed

4 files changed

+217
-34
lines changed

‎components/home-container.tsx‎

Lines changed: 59 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { ReactNode } from "react";
1+
import { ReactNode, useState } from "react";
22
import Link from "next/link";
33
import Image from "next/image";
44
import { Inter } from "next/font/google";
55
import { useRouter } from "next/router";
6-
import { FaGithub } from "react-icons/fa";
76
import Head from "next/head";
87
import nextConfig from "../next.config";
98

@@ -19,6 +18,7 @@ interface HomeContainerProps {
1918

2019
export default function HomeContainer({ children }: HomeContainerProps) {
2120
const router = useRouter();
21+
const [navOpen, setNavOpen] = useState(false);
2222

2323
// Get the current page type from the route
2424
const currentPage = router.pathname.split("/")[1] || "";
@@ -32,40 +32,74 @@ export default function HomeContainer({ children }: HomeContainerProps) {
3232
</Head>
3333
<div className={`${inter.className} flex flex-col h-dvh w-dvw`}>
3434
{/* Background Layer */}
35-
<div className="fixed inset-0 -z-10 bg-[#2d3436]" />
35+
<div className="fixed h-dvh w-dvw -z-10 bg-[#2d3436]" />
3636

37-
<div
38-
className="w-full top-0 z-30 text-white p-8 flex justify-between items-center"
39-
>
40-
<Link href="/" className="flex items-center gap-2 font-bold text-3xl">
41-
<Image
42-
src={`${assetPrefix}/logo.png`}
43-
alt="Logo"
44-
width={40}
45-
height={40}
46-
/>
47-
MewNotch
48-
</Link>
49-
50-
<div className="flex-grow" />
51-
52-
<div className="flex items-center gap-6">
37+
{/* Responsive Banner/Header */}
38+
<div className="w-full text-white p-4 md:p-8 flex flex-col md:flex-row md:justify-between md:items-center">
39+
<div className="flex items-center justify-between w-full md:w-auto">
40+
<Link href="/" className="flex items-center gap-2 font-bold text-3xl">
41+
<Image
42+
src={`${assetPrefix}/logo.png`}
43+
alt="Logo"
44+
width={40}
45+
height={40}
46+
/>
47+
MewNotch
48+
</Link>
49+
<button
50+
className="md:hidden p-2 ml-2 focus:outline-none relative w-10 h-10 flex items-center justify-center"
51+
aria-label="Toggle navigation menu"
52+
onClick={() => setNavOpen((v) => !v)}
53+
>
54+
{/* Hamburger/Cross icon with animation */}
55+
<span className="absolute top-1/2 left-1/2 w-6 h-6 -translate-x-1/2 -translate-y-1/2 flex flex-col justify-center items-center">
56+
<span
57+
className={`absolute h-0.5 w-6 bg-white rounded transition-all duration-300 translate-y-2 ${navOpen ? 'opacity-0' : 'opacity-100'}`}
58+
/>
59+
<span
60+
className={`absolute h-0.5 w-6 bg-white rounded my-1 transition-all duration-300 ${navOpen ? 'rotate-45' : 'rotate-0'}`}
61+
/>
62+
<span
63+
className={`absolute h-0.5 w-6 bg-white rounded my-1 transition-all duration-300 ${navOpen ? 'opacity-100 -rotate-45' : 'opacity-0 rotate-0'}`}
64+
/>
65+
<span
66+
className={`absolute h-0.5 w-6 bg-white rounded transition-all duration-300 -translate-y-2 ${navOpen ? 'opacity-0' : 'opacity-100'}`}
67+
/>
68+
</span>
69+
</button>
70+
</div>
71+
<nav
72+
className={`flex flex-col md:flex-row items-end md:items-center gap-6 w-full px-5 md:px-0 md:w-auto transition-all duration-300 overflow-hidden ${navOpen ? 'max-h-60 py-4 opacity-100' : 'max-h-0 md:max-h-none py-0 opacity-0 md:opacity-100'} md:py-0 md:max-h-none`}
73+
>
74+
<Link
75+
href="/faq"
76+
className={`text-lg font-bold transition-colors duration-200 ${currentPage === "faq" ? "underline" : ""}`}
77+
onClick={() => setNavOpen(false)}
78+
>
79+
FAQs
80+
</Link>
81+
<Link
82+
href="/support"
83+
className={`text-lg font-bold transition-colors duration-200 ${currentPage === "support" ? "underline" : ""}`}
84+
onClick={() => setNavOpen(false)}
85+
>
86+
Support
87+
</Link>
5388
<Link
5489
href="/about"
5590
className={`text-lg font-bold transition-colors duration-200 ${currentPage === "about" ? "underline" : ""}`}
91+
onClick={() => setNavOpen(false)}
5692
>
5793
About
5894
</Link>
59-
</div>
95+
</nav>
6096
</div>
61-
6297
{/* Main Content */}
6398
<div className="flex flex-col flex-grow w-dvw">
6499
{children}
65100
</div>
66-
67101
{/* Fork on GitHub Ribbon */}
68-
{currentPage !== "" && (
102+
{/* {currentPage === "" && (
69103
<div>
70104
<Link
71105
href="https://github.com/monuk7735/mew-notch/fork"
@@ -75,10 +109,10 @@ export default function HomeContainer({ children }: HomeContainerProps) {
75109
aria-label="GitHub"
76110
>
77111
<FaGithub size={28} />
78-
<div>Fork</div>
112+
<div>Star</div>
79113
</Link>
80114
</div>
81-
)}
115+
)} */}
82116
</div>
83117
</>
84118
);

‎pages/about.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,18 @@ export default function About() {
99
<title>About MewNotch</title>
1010
</Head>
1111

12-
<div className="flex-grow flex flex-col items-center justify-center min-h-[60vh] py-16 gap-6">
13-
<p className="text-3xl text-blue-400 font-semibold text-center">
12+
<div className="flex-grow flex flex-col items-center justify-center min-h-[60vh] p-8 gap-8">
13+
<p className="text-3xl text-blue-400 font-semibold text-center mb-4">
1414
100% Open Source &amp; Completely Free
1515
</p>
16-
<p className="text-lg text-gray-300 max-w-3xl p-8 text-center">
17-
MewNotch is a macOS app designed to make the MacBook notch actually
18-
useful! It displays system information such as brightness, volume, power
19-
state, and more, right in the notch area. Built with a focus on
20-
minimalism, customization, and a seamless user experience, MewNotch is open
21-
source and inspired by the idea of turning a hardware quirk into a
22-
feature.
16+
<p className="text-lg text-gray-300 max-w-3xl px-8 py-4 text-center leading-relaxed">
17+
MewNotch is a macOS app designed to make the MacBook notch actually useful!
18+
<br />
19+
<br />
20+
It displays system information such as brightness, volume, power state, and more, right in the notch area.
21+
<br />
22+
<br />
23+
Built with a focus on minimalism, customization, and a seamless user experience, MewNotch is open source and inspired by the idea of turning a hardware quirk into a feature.
2324
</p>
2425
</div>
2526
</>

‎pages/faq.tsx‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import HomeContainer from "@/components/home-container";
2+
import { ReactNode, useState } from "react";
3+
import { FaChevronRight } from "react-icons/fa";
4+
5+
const faqs = [
6+
{
7+
question: "What should I do if I encounter a bug or have feedback?",
8+
answer:
9+
"If you find a bug or have suggestions, please open an issue on the GitHub repository or contact me directly. Your feedback and contributions are always welcome!",
10+
},
11+
{
12+
question: "Will MewNotch receive more features?",
13+
answer:
14+
"Yes! MewNotch is actively developed and new features are planned. If you have ideas or requests, feel free to submit them on GitHub to help shape the future of the app.",
15+
},
16+
{
17+
question: "Is MewNotch really free?",
18+
answer:
19+
"Absolutely. MewNotch is 100% free and open source. There are no ads, no tracking, no paywalls, and no hidden catches—just a tool for the community.",
20+
},
21+
{
22+
question: "Does MewNotch collect any data?",
23+
answer:
24+
"No. MewNotch does not collect, track, or share any personal data. All your information stays on your device.",
25+
},
26+
{
27+
question: "Which MacBooks are supported?",
28+
answer:
29+
"MewNotch is designed for MacBooks with a notch (M1/M2/M3 MacBook Pro and Air). It can also run on older Macs and Macs without a notch, but the notch overlay may cover menu bar icons or not appear as intended on those devices.",
30+
},
31+
{
32+
question: "Can I customize what appears in the notch?",
33+
answer:
34+
"Yes! MewNotch is customizable. You can choose which system indicators to show and adjust their appearance in the app settings.",
35+
},
36+
{
37+
question: "How do I install MewNotch?",
38+
answer:
39+
"Visit the GitHub Releases page and download the latest DMG file for macOS. Drag the app to your Applications folder to install.",
40+
},
41+
{
42+
question: "Can I support the project?",
43+
answer:
44+
"MewNotch is free, but you can support the project by starring the GitHub repo, sharing it with friends, or buying me a beer from the Support page!",
45+
},
46+
];
47+
48+
function Accordion({
49+
faqs,
50+
}: {
51+
faqs: {
52+
question: string;
53+
answer: string;
54+
}[];
55+
}) {
56+
const [openIdx, setOpenIdx] = useState<number | null>(null);
57+
58+
return (
59+
<div className="w-full max-w-2xl mx-auto flex flex-col gap-4">
60+
{faqs.map((faq, idx) => (
61+
<div key={idx} className="rounded-xl">
62+
<button
63+
className="w-full flex flex-col p-5 text-left text-white focus:outline-none hover:bg-gray-900/10 transition rounded-xl"
64+
onClick={() => setOpenIdx(openIdx === idx ? null : idx)}
65+
aria-expanded={openIdx === idx}
66+
aria-controls={`faq-panel-${idx}`}
67+
>
68+
<div className="flex justify-between items-center text-lg font-semibold">
69+
<span>{faq.question}</span>
70+
<FaChevronRight
71+
className={`ml-4 transition-transform duration-300 ${openIdx === idx ? "rotate-90" : "rotate-0"
72+
}`}
73+
size={16}
74+
/>
75+
</div>
76+
77+
<div
78+
id={`faq-panel-${idx}`}
79+
className={`overflow-hidden transition-all duration-500 ${
80+
openIdx === idx ? "max-h-40 pt-4 opacity-100" : "max-h-0 pt-0 opacity-0"
81+
}`}
82+
style={{ color: "#d1d5db" }}
83+
aria-hidden={openIdx !== idx}
84+
>
85+
<div>{faq.answer}</div>
86+
</div>
87+
</button>
88+
</div>
89+
))}
90+
</div>
91+
);
92+
}
93+
94+
export default function FAQ() {
95+
return (
96+
<div className="flex flex-col items-center justify-center min-h-[70vh] p-8 lg:p-16 gap-8">
97+
<h1 className="text-4xl font-bold text-white mb-4 text-center">
98+
Frequently Asked Questions
99+
</h1>
100+
<Accordion faqs={faqs} />
101+
</div>
102+
);
103+
}
104+
105+
FAQ.getLayout = function getLayout(page: ReactNode) {
106+
return <HomeContainer>{page}</HomeContainer>;
107+
};

‎pages/support.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import HomeContainer from "@/components/home-container";
2+
import { ReactNode } from "react";
3+
4+
export default function Support() {
5+
return (
6+
<div className="flex flex-col items-center justify-center min-h-[70vh] p-8 gap-8">
7+
<div className="max-w-2xl text-center text-lg text-gray-300 flex flex-col gap-6">
8+
<p className="pb-10">
9+
<span className="text-2xl md:text-3xl font-extrabold text-blue-400 block mb-2">MewNotch is completely free and open source.</span>
10+
<span className="text-xl font-semibold text-white block mb-2">You don&apos;t owe me anything for using it.</span>
11+
<span className="text-base text-gray-400">No ads, no tracking, no paywalls, and no hidden catches—just a tool for the community.</span>
12+
</p>
13+
<p>
14+
If you find MewNotch useful, the best way to support me is to <span className="text-blue-400 font-semibold">star the GitHub repo</span> and {" "}
15+
<span className="inline-flex items-center gap-1 text-blue-400 font-semibold">
16+
share it with your friends
17+
</span>
18+
{" "}by word of mouth or online.
19+
<br/>
20+
<br/>
21+
Your feedback, bug reports, and contributions are always welcome!
22+
</p>
23+
<div className="flex flex-col items-center gap-2 pt-16">
24+
<span className="text-gray-400">But if you really want to show appreciation...</span>
25+
<a
26+
href="https://coff.ee/monuk7735"
27+
target="_blank"
28+
rel="noopener noreferrer"
29+
className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-yellow-400 hover:bg-yellow-300 text-black font-bold shadow transition-colors duration-200 text-lg mt-2"
30+
>
31+
🍺 Buy me a beer
32+
</a>
33+
</div>
34+
</div>
35+
</div>
36+
);
37+
}
38+
39+
Support.getLayout = function getLayout(page: ReactNode) {
40+
return <HomeContainer>{page}</HomeContainer>;
41+
};

0 commit comments

Comments
 (0)