Skip to content

Commit a9a5a25

Browse files
CykotechCykotech
committed
Experiment with design changes
1 parent 43b4c03 commit a9a5a25

File tree

7 files changed

+91
-101
lines changed

7 files changed

+91
-101
lines changed

‎src/components/Features.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Users, CircleHelp, BookOpen } from "lucide-react";
22

33
export default function Features() {
44
return (
5-
<section className="bg-secondary py-36">
5+
<section className="bg-secondary py-20">
66
<div className="outer">
77
<div className="inner">
88
<div className="flex-1 flex flex-col items-center text-center py-6">

‎src/components/Header.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import { NavLink } from "react-router";
2-
import { Code } from "lucide-react";
32

43
export default function Header() {
54
return (
65
<header className="sticky top-0 bg-primary/80 backdrop-blur-lg py-4 flex justify-around items-center">
76
<div className="flex gap-2 items-center">
8-
<Code size={48} className="text-secondary" />
7+
<img
8+
className="w-16"
9+
src={"/images/coffee_cup.jpg"}
10+
alt="Code Cafe Logo"
11+
/>
912
<h1 className="text-secondary text-3xl">Code Cafe</h1>
1013
</div>
1114
<nav>

‎src/components/Hero.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,23 @@ export default function Hero() {
22
return (
33
<section
44
id="hero"
5-
className="min-h-[80vh] bg-primary flex flex-col justify-evenly items-center text-accent py-8"
5+
className="min-h-[8vh] bg-primary flex flex-col justify-evenly items-center text-accent py-8"
66
>
7-
<div className="text-center flex items-center justify-center flex-wrap xl:flex-nowrap p-8 lg:p-20">
7+
<div className="text-center flex items-center justify-center flex-wrap xl:flex-nowrap p-8 lg:p-5">
88
<div className="flex flex-col items-center">
9-
<h2 className="text-5xl md:text-6xl lg:text-8xl mb-4">
9+
<h2 className="text-xl md:text-xl lg:text-4xl mb-2">
1010
Where Code Meets Community
1111
</h2>
12-
<p className="font-mono text-2xl max-w-prose">
12+
<p className="font-mono text-lg max-w-prose">
1313
Join our vibrant community of developers, share knowledge and grow
1414
together in a welcoming environment.
1515
</p>
1616
</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-
/>
2417
</div>
2518
<div className="flex gap-10 my-6">
2619
<button className="px-8 py-4 text-primary rounded-lg border-2 border-secondary hover:border-secondary bg-secondary hover:text-secondary hover:bg-primary transition-all">
2720
Join us
2821
</button>
29-
<button className="px-8 py-4 text-primary rounded-lg border-2 border-secondary hover:border-secondary bg-secondary hover:text-secondary hover:bg-primary transition-all">
30-
Learn more
31-
</button>
3222
</div>
3323
</section>
3424
);

‎src/components/Showcase.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { Smile } from "lucide-react";
2+
3+
export default function Showcase() {
4+
return (
5+
<section className="flex flex-col items-center bg-secondary py-20">
6+
<h2 className="text-xl md:text-xl lg:text-4xl mb-6">
7+
Community Showcase
8+
</h2>
9+
{/*<div className="outer">*/}
10+
{/* <div className="inner">*/}
11+
<div className="flex flex-1">
12+
<div className="outer">
13+
<div className="inner min-h-full">
14+
<div className="flex-1 flex flex-col text-center px-6 py-6">
15+
<div className="flex flex-1 justify-start">
16+
<Smile size={48} className="text-accent mb-2 mr-4" />
17+
<h3 className="flex flex-col items-start text-secondary text-xl mb-2 font-mono">
18+
Sarah Johnson
19+
<span className="text-sm">Task Manager App</span>
20+
</h3>
21+
</div>
22+
<p className="text-secondary text-left text-md max-w-full">
23+
A sleek, intuitive task management application built with React
24+
and Node.js.
25+
</p>
26+
</div>
27+
</div>
28+
</div>
29+
{/*<div className="self-center bg-[rgba(255,255,255,0.1)] bg-clip-border bg-origin-padding bg-scroll bg-repeat shadow-[0px_0px_70px_15px_rgba(0,0,0,0.75)] box-border text-white font-sans font-[cv05_ss01_ss03_zero] text-base leading-6 h-[100px] w-[1px] text-left hidden lg:block"></div>*/}
30+
<div className="outer">
31+
<div className="inner min-h-full">
32+
<div className="flex-1 flex flex-col text-center px-6 py-6">
33+
<div className="flex flex-1 justify-start">
34+
<Smile size={48} className="text-accent mb-2 mr-4" />
35+
<h3 className="flex flex-col items-start text-secondary text-xl mb-2 font-mono">
36+
Mike Chen
37+
<span className="text-sm">Weather Dashboard</span>
38+
</h3>
39+
</div>
40+
<p className="text-secondary text-left text-md max-w-full">
41+
Real-time weather information visualized beautifully using D3.js
42+
and OpenWeatherMap API.
43+
</p>
44+
</div>
45+
</div>
46+
</div>
47+
{/*<div className="self-center bg-[rgba(255,255,255,0.1)] bg-clip-border bg-origin-padding bg-scroll bg-repeat shadow-[0px_0px_70px_15px_rgba(0,0,0,0.75)] box-border text-white font-sans font-[cv05_ss01_ss03_zero] text-base leading-6 h-[100px] w-[1px] text-left hidden lg:block"></div>*/}
48+
<div className="outer">
49+
<div className="inner min-h-full">
50+
<div className="flex-1 flex flex-col text-center px-6 py-6">
51+
<div className="flex flex-1 justify-start">
52+
<Smile size={48} className="text-accent mb-2 mr-4" />
53+
<h3 className="flex flex-col items-start text-secondary text-xl mb-2 font-mono">
54+
Emily Rodriguez
55+
<span className="text-sm">Code Snippet Library</span>
56+
</h3>
57+
</div>
58+
<p className="text-secondary text-left text-md max-w-full">
59+
A collaborative platform for developers to share and discover
60+
useful code snippets.
61+
</p>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
{/* </div>*/}
67+
{/*</div>*/}
68+
</section>
69+
);
70+
}

‎src/index.css‎

Lines changed: 8 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -2,83 +2,8 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
7-
line-height: 1.5;
8-
font-weight: 400;
9-
10-
color-scheme: light dark;
11-
color: rgba(255, 255, 255, 0.87);
12-
background-color: #240e1f;
13-
14-
font-synthesis: none;
15-
text-rendering: optimizeLegibility;
16-
-webkit-font-smoothing: antialiased;
17-
-moz-osx-font-smoothing: grayscale;
18-
}
19-
20-
a {
21-
font-weight: 500;
22-
color: var(--primary);
23-
text-decoration: inherit;
24-
}
25-
a:hover {
26-
color: var(--primary);
27-
text-decoration: underline;
28-
text-underline-offset: 2px;
29-
}
30-
315
#root {
32-
width: 100vw;
33-
min-height: 100vh;
34-
}
35-
36-
body {
37-
margin: 0;
38-
display: flex;
39-
place-items: center;
40-
min-width: 320px;
41-
min-height: 100vh;
42-
font-family: "Inter";
43-
}
44-
45-
h1 {
46-
font-size: 3.2em;
47-
line-height: 1.1;
48-
}
49-
50-
button {
51-
border-radius: 8px;
52-
border: 1px solid transparent;
53-
padding: 0.6em 1.2em;
54-
font-size: 1em;
55-
font-weight: 500;
56-
font-family: inherit;
57-
background-color: #1a1a1a;
58-
cursor: pointer;
59-
transition: border-color 0.25s;
60-
}
61-
62-
button:hover {
63-
border-color: #646cff;
64-
}
65-
66-
button:focus,
67-
button:focus-visible {
68-
outline: 4px auto -webkit-focus-ring-color;
69-
}
70-
71-
@media (prefers-color-scheme: light) {
72-
:root {
73-
color: #213547;
74-
background-color: #ffffff;
75-
}
76-
a:hover {
77-
color: #747bff;
78-
}
79-
button {
80-
background-color: #f9f9f9;
81-
}
6+
background-color: #240e1f;
827
}
838

849
#hero {
@@ -94,13 +19,13 @@ button:focus-visible {
9419
}
9520

9621
.outer {
97-
background: linear-gradient(
98-
145deg,
99-
rgba(0, 17, 34, 0.733),
100-
rgba(0, 17, 34, 0.4),
101-
rgba(0, 17, 34, 0.733)
102-
);
103-
background-color: rgba(0, 0, 0, 0);
22+
background: rgba(0, 0, 0, 0)
23+
linear-gradient(
24+
145deg,
25+
rgba(0, 17, 34, 0.733),
26+
rgba(0, 17, 34, 0.4),
27+
rgba(0, 17, 34, 0.733)
28+
);
10429
background-clip: border-box;
10530
background-origin: padding-box;
10631
border: 1px solid rgba(255, 170, 170, 0.733);

‎src/routes/Home.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import Hero from "../components/Hero";
22
import Features from "../components/Features";
33
import CTA from "../components/CTA";
4+
import Showcase from "../components/Showcase.tsx";
45

56
export default function Home() {
67
return (
78
<>
89
<Hero />
910
<Features />
11+
<Showcase />
1012
<CTA />
1113
</>
1214
);

‎tailwind.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default {
44
theme: {
55
colors: {
66
primary: "#240e1f",
7-
secondary: "#f0b052",
7+
secondary: "#c08021",
88
accent: "#e96932",
99
},
1010
extend: {},

0 commit comments

Comments
 (0)