Skip to content

Commit 95fac1c

Browse files
JamesllllllllllJamesllllllllll
committed
Implement mockup in React
1 parent c832deb commit 95fac1c

File tree

11 files changed

+198
-46
lines changed

11 files changed

+198
-46
lines changed

‎package-lock.json‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"format": "prettier --write ."
1313
},
1414
"dependencies": {
15+
"lucide-react": "^0.469.0",
1516
"react": "19.0.0",
1617
"react-dom": "19.0.0",
1718
"react-router": "^7.1.1"

‎public/images/coffee_cup.jpg‎

141 KB
Loading

‎src/App.css‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/App.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,21 @@
1-
import "./App.css";
1+
import Header from "./components/Header";
2+
import Hero from "./components/Hero";
3+
import Features from "./components/Features";
4+
import CTA from "./components/CTA";
5+
import Footer from "./components/Footer";
26

37
function App() {
4-
return <h1>Code Café Community</h1>;
8+
return (
9+
<>
10+
<Header />
11+
<main>
12+
<Hero />
13+
<Features />
14+
<CTA />
15+
</main>
16+
<Footer />
17+
</>
18+
);
519
}
620

721
export default App;

‎src/components/CTA.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export default function CTA() {
2+
return (
3+
<section
4+
id="cta"
5+
className="bg-primary flex justify-center items-center p-6 md:py-20"
6+
>
7+
<div className="cta-container bg-gradient-to-r from-accent to-secondary shadow-md rounded-3xl p-10 md:px-60 md:py-20 flex flex-col justify-evenly items-center text-primary">
8+
<h2 className="text-3xl font-bold mb-4 text-center">
9+
Ready to Join Our Community?
10+
</h2>
11+
<p className="text-center text-lg mb-6">
12+
Start your journey with Code Cafe today and become part of a thriving
13+
developer community.
14+
</p>
15+
<a
16+
className="discord-button bg-primary px-8 py-4 rounded-lg border-2 border-primary text-secondary hover:bg-secondary hover:text-primary transition-all"
17+
href="https://discord.gg/code-cafe"
18+
>
19+
Join Code Cafe
20+
</a>
21+
</div>
22+
</section>
23+
);
24+
}

‎src/components/Features.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Users, CircleHelp, BookOpen } from "lucide-react";
2+
3+
export default function Features() {
4+
return (
5+
<section
6+
id="features"
7+
className="min-h-[35vh] bg-secondary flex flex-wrap gap-8 items-stretch p-8"
8+
>
9+
<div className="bg-primary shadow-lg rounded-3xl p-8 lg:p-12 text-center flex flex-col items-center justify-center flex-1 min-w-[300px]">
10+
<Users size={48} className="text-accent mb-2" />
11+
<h3 className="text-secondary text-xl mb-2">Active Community</h3>
12+
<p className="text-secondary text-sm">
13+
Connect with like-minded developers and build lasting relationships.
14+
</p>
15+
</div>
16+
<div className="bg-primary shadow-lg rounded-3xl p-8 lg:p-12 text-center flex flex-col items-center justify-center flex-1 min-w-[300px]">
17+
<CircleHelp size={48} className="text-accent mb-2" />
18+
<h3 className="text-secondary text-xl mb-2">Some other thing</h3>
19+
<p className="text-secondary text-sm">
20+
Description about that other thing.
21+
</p>
22+
</div>
23+
<div className="bg-primary shadow-lg rounded-3xl p-8 lg:p-12 text-center flex flex-col items-center justify-center flex-1 min-w-[300px]">
24+
<BookOpen size={48} className="text-accent mb-2" />
25+
<h3 className="text-secondary text-xl mb-2">Learning Resources</h3>
26+
<p className="text-secondary text-sm">
27+
Access curated learning materials and documentation.
28+
</p>
29+
</div>
30+
</section>
31+
);
32+
}

‎src/components/Footer.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Link } from "react-router";
2+
import { Code } from "lucide-react";
3+
4+
export default function Footer() {
5+
return (
6+
<footer className="py-16 bg-secondary flex justify-around">
7+
<div className="footer-container text-primary">
8+
<h4 className="text-xl font-bold flex items-center gap-2">
9+
<Code size={48} className="text-accent" />
10+
Code Cafe
11+
</h4>
12+
<p className="text-sm">Your home for coding and community</p>
13+
</div>
14+
<div className="footer-container text-primary">
15+
<h4 className="text-xl font-bold mb-4">Community</h4>
16+
<ul className="list-none">
17+
<li className="mb-3 text-sm">
18+
<Link to="/events">Events</Link>
19+
</li>
20+
<li className="mb-3 text-sm">
21+
<a href="https://discord.gg/code-cafe">Discord</a>
22+
</li>
23+
</ul>
24+
</div>
25+
<div className="footer-container text-primary">
26+
<h4 className="text-xl font-bold mb-4">Resources</h4>
27+
<ul className="list-none">
28+
<li className="mb-3 text-sm">Documentation</li>
29+
<li className="mb-3 text-sm">Blog</li>
30+
<li className="mb-3 text-sm">GitHub</li>
31+
</ul>
32+
</div>
33+
</footer>
34+
);
35+
}

‎src/components/Header.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { NavLink } from "react-router";
2+
3+
export default function Header() {
4+
return (
5+
<header className="bg-secondary py-4 flex justify-around items-center">
6+
<h1 className="text-primary text-3xl">Code Cafe</h1>
7+
<nav>
8+
<ul className="flex list-none gap-3">
9+
<li>
10+
<NavLink
11+
className="text-primary hover:text-accent transition-all"
12+
to="/"
13+
>
14+
Home
15+
</NavLink>
16+
</li>
17+
<li>
18+
<NavLink
19+
className="text-primary hover:text-accent transition-colors"
20+
to="/about"
21+
>
22+
About Us
23+
</NavLink>
24+
</li>
25+
<li>
26+
<NavLink
27+
className="text-primary hover:text-accent transition-colors"
28+
to="/events"
29+
>
30+
Events
31+
</NavLink>
32+
</li>
33+
</ul>
34+
</nav>
35+
</header>
36+
);
37+
}

‎src/components/Hero.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export default function Hero() {
2+
return (
3+
<section
4+
id="hero"
5+
className="min-h-[85vh] bg-primary flex flex-col justify-evenly items-center text-accent py-8"
6+
>
7+
<div className="text-center flex items-center justify-center flex-wrap xl:flex-nowrap p-8 lg:p-20">
8+
<div className="flex flex-col items-center">
9+
<h2 className="text-5xl md:text-6xl lg:text-8xl mb-4">
10+
Where Code Meets Community
11+
</h2>
12+
<p className="text-2xl max-w-prose">
13+
Join our vibrant community of developers, share knowledge and grow
14+
together in a welcoming environment.
15+
</p>
16+
</div>
17+
<img
18+
src="/images/coffee_cup.jpg"
19+
alt="Code Cafe Logo"
20+
height="300"
21+
width="300"
22+
className="rounded-full shadow-lg"
23+
/>
24+
</div>
25+
<div className="flex gap-10 my-6">
26+
<button className="px-8 py-4 rounded-lg border-2 border-secondary hover:border-secondary text-secondary hover:bg-secondary hover:text-primary transition-all">
27+
Join us
28+
</button>
29+
<button className="px-8 py-4 rounded-lg border-2 border-secondary hover:border-secondary text-secondary hover:bg-secondary hover:text-primary transition-all">
30+
Learn more
31+
</button>
32+
</div>
33+
</section>
34+
);
35+
}

0 commit comments

Comments
 (0)