Skip to content

Commit dd239f1

Browse files
KampouseKampouse
committed
trying things
1 parent 4e93651 commit dd239f1

File tree

10 files changed

+175
-103
lines changed

10 files changed

+175
-103
lines changed

‎src/components/header/Mainheader.tsx‎

Lines changed: 69 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -46,76 +46,78 @@ export default component$(() => {
4646
: "/home";
4747
});
4848
return (
49-
<header class="fixed top-0 z-50 h-fit w-full border-b border-border/40 bg-background/80 backdrop-blur-sm">
50-
<nav
51-
class=" mx-auto flex w-full items-center justify-between px-4 py-3"
52-
role="navigation"
53-
>
54-
<div class="flex items-center gap-4">
55-
<Link
56-
href={session.value ? "/home" : "/landing"}
57-
class="hidden bg-gradient-to-r from-primary to-primary bg-clip-text px-1 text-xl font-bold text-transparent transition-colors hover:from-primary/90 hover:to-primary/90 md:block"
58-
>
59-
Just R&D
60-
</Link>
61-
62-
{location.url.pathname === "/home" && (
63-
<Link
64-
href="/new"
65-
class="rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg md:hidden"
66-
>
67-
Start New Session
68-
</Link>
69-
)}
70-
{session.value && location.url.pathname !== "/home" && (
49+
session.value != null && (
50+
<header class="fixed top-0 z-50 h-fit w-full border-b border-border/40 bg-background/80 backdrop-blur-sm">
51+
<nav
52+
class=" mx-auto flex w-full items-center justify-between px-4 py-3"
53+
role="navigation"
54+
>
55+
<div class="flex items-center gap-4">
7156
<Link
72-
href="/home"
73-
class="rounded-lg bg-secondary p-2 text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg md:hidden"
57+
href={session.value ? "/home" : "/landing"}
58+
class="hidden bg-gradient-to-r from-primary to-primary bg-clip-text px-1 text-xl font-bold text-transparent transition-colors hover:from-primary/90 hover:to-primary/90 md:block"
7459
>
75-
<ArrowLeftIcon size={20} />
60+
Just R&D
7661
</Link>
77-
)}
78-
</div>
7962

80-
<div class="flex items-center gap-4">
81-
{session.value ? (
82-
<>
83-
{location.url.href.includes("home") ? (
84-
<Link
85-
href="/new"
86-
class="hidden rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg md:block"
87-
>
88-
Start New Session
89-
</Link>
90-
) : (
91-
<Link
92-
href="/home"
93-
class="hidden rounded-lg bg-secondary p-2 text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg md:block"
94-
>
95-
<ArrowLeftIcon size={20} />
96-
</Link>
97-
)}
98-
{location.url.pathname !== "/profile" && (
99-
<Link
100-
prefetch="js"
101-
href="/profile"
102-
class="rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg"
103-
>
104-
My Profile
105-
</Link>
106-
)}
107-
<Dropdown />
108-
</>
109-
) : (
110-
<Link
111-
href="/login"
112-
class="rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg"
113-
>
114-
Get Started
115-
</Link>
116-
)}
117-
</div>
118-
</nav>
119-
</header>
63+
{location.url.pathname === "/home" && (
64+
<Link
65+
href="/new"
66+
class="rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg md:hidden"
67+
>
68+
Start New Session
69+
</Link>
70+
)}
71+
{session.value && location.url.pathname !== "/home" && (
72+
<Link
73+
href="/home"
74+
class="rounded-lg bg-secondary p-2 text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg md:hidden"
75+
>
76+
<ArrowLeftIcon size={20} />
77+
</Link>
78+
)}
79+
</div>
80+
81+
<div class="flex items-center gap-4">
82+
{session.value ? (
83+
<>
84+
{location.url.href.includes("home") ? (
85+
<Link
86+
href="/new"
87+
class="hidden rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg md:block"
88+
>
89+
Start New Session
90+
</Link>
91+
) : (
92+
<Link
93+
href="/home"
94+
class="hidden rounded-lg bg-secondary p-2 text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg md:block"
95+
>
96+
<ArrowLeftIcon size={20} />
97+
</Link>
98+
)}
99+
{location.url.pathname !== "/profile" && (
100+
<Link
101+
prefetch="js"
102+
href="/profile"
103+
class="rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg"
104+
>
105+
My Profile
106+
</Link>
107+
)}
108+
<Dropdown />
109+
</>
110+
) : (
111+
<Link
112+
href="/login"
113+
class="rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg"
114+
>
115+
Get Started
116+
</Link>
117+
)}
118+
</div>
119+
</nav>
120+
</header>
121+
)
120122
);
121123
});

‎src/routes/(app)/join/[id]/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export default component$(() => {
133133
alt={event.value.data.event?.location || "Event Image"}
134134
height={400}
135135
width={800}
136-
class="size-full absolute inset-0 object-cover transition-transform duration-300 hover:scale-105"
136+
class="size-full absolute inset-0 object-cover transition-transform duration-300 "
137137
onError$={(e) => {
138138
const img = e.target as HTMLImageElement;
139139
img.src =

‎src/routes/landing/CommunityEvent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const colors = {
1818
export const CommunityEventsSection = component$<CommunityEventsSectionProps>(
1919
({ events }) => {
2020
return (
21-
<section class={`bg-[${colors.background}] py-24`}>
21+
<section class={`bg-[${colors.background}] py-12`}>
2222
<div class="container mx-auto px-4">
2323
<h2
2424
class={`mb-16 text-center text-4xl font-bold tracking-tight text-[${colors.text.heading}]`}

‎src/routes/landing/CommunitySpaceSection.tsx‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Space } from "./types";
22
import { component$ } from "@builder.io/qwik";
3-
3+
import { Link } from "@builder.io/qwik-city";
44
interface CommunitySpacesSectionProps {
55
spaces: Space[];
66
}
@@ -10,11 +10,34 @@ export const CommunitySpacesSection = component$<CommunitySpacesSectionProps>(
1010
return (
1111
<section class="py-24">
1212
<div class="container mx-auto px-4">
13-
<h2 class="mb-16 text-center text-4xl font-bold tracking-tight text-[#5B3E29]">
14-
<span class="border-b-4 border-[#D98E73] pb-2">
15-
Curated Community Spaces
16-
</span>
17-
</h2>
13+
<div class="mb-16 flex flex-col items-center">
14+
<h2 class="mb-4 text-center text-4xl font-bold tracking-tight text-[#5B3E29]">
15+
<span class="border-b-4 border-[#D98E73] pb-2">
16+
Curated Community Spaces
17+
</span>
18+
</h2>
19+
<Link
20+
href="/login"
21+
class="mt-4 transform rounded-full bg-[#D98E73] px-6 py-2 text-sm font-medium text-white shadow-md transition duration-300 hover:scale-105 hover:bg-[#c07b61] hover:shadow-lg active:press"
22+
>
23+
<div class="flex items-center gap-2">
24+
<svg
25+
class="h-4 w-4"
26+
fill="none"
27+
stroke="currentColor"
28+
viewBox="0 0 24 24"
29+
>
30+
<path
31+
stroke-linecap="round"
32+
stroke-linejoin="round"
33+
stroke-width="2"
34+
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z"
35+
/>
36+
</svg>
37+
Share Your Cozy Space
38+
</div>
39+
</Link>
40+
</div>
1841
<div class="grid gap-8 md:grid-cols-3">
1942
{spaces.map((space) => (
2043
<div

‎src/routes/landing/JoinCommunity.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Link } from "@builder.io/qwik-city";
2+
import { component$ } from "@builder.io/qwik";
3+
export const JoinCommunity = component$(() => {
4+
return (
5+
<section class="relative overflow-hidden bg-[#5B3E29] py-16 text-white">
6+
{/* Subtle background effects */}
7+
<div class="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-[#D98E73] opacity-20 blur-3xl"></div>
8+
<div class="absolute -bottom-20 -left-20 h-64 w-64 rounded-full bg-[#F8D7BD] opacity-20 blur-3xl"></div>
9+
10+
<div class="relative flex items-center justify-center px-4 md:px-6">
11+
<div class="mx-auto max-w-3xl text-center">
12+
<h2 class="mb-4 bg-gradient-to-r from-[#FFE4C4] via-[#FFF1E6] to-white bg-clip-text text-center text-3xl font-bold text-transparent">
13+
Join Our Community Today
14+
</h2>
15+
<p class="mb-8 text-center text-lg leading-relaxed text-[#E6D7C3]">
16+
Be part of a growing community that shares and discovers cozy spaces
17+
together. Create events, share your favorite spots, and connect with
18+
like-minded individuals.
19+
</p>
20+
<div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
21+
<Link
22+
href="/login"
23+
class="group inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#D98E73] via-[#E09B82] to-[#C27B62] px-6 py-3 text-base font-medium text-white shadow-md transition-all duration-300 hover:-translate-y-0.5 hover:scale-105 hover:shadow-lg hover:shadow-[#D98E73]/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D98E73]/50 active:translate-y-0.5 active:scale-95 disabled:pointer-events-none disabled:opacity-50"
24+
>
25+
<span class="relative">
26+
Join the Community
27+
<span class="absolute -bottom-1 left-0 h-0.5 w-0 bg-white transition-all duration-300 group-hover:w-full"></span>
28+
</span>
29+
</Link>
30+
</div>
31+
</div>
32+
</div>
33+
</section>
34+
);
35+
});

‎src/routes/landing/TestimonialsSection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { component$ } from "@builder.io/qwik";
22

33
export const TestimonialsSection = component$(() => {
44
return (
5-
<section class="py-24">
5+
<section class="py-12">
66
<div class="container mx-auto px-4">
77
<h2 class="mb-16 text-center text-4xl font-bold tracking-tight text-[#5B3E29]">
88
<span class="border-b-4 border-[#D98E73] pb-2">
@@ -74,4 +74,4 @@ export const TestimonialsSection = component$(() => {
7474
</div>
7575
</section>
7676
);
77-
});
77+
});

‎src/routes/landing/ThreePillarsSection.tsx‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
import { component$ } from "@builder.io/qwik";
2-
32
export const ThreePillarsSection = component$(() => {
43
return (
5-
<section class="bg-white py-24">
4+
<section class="bg-[hsl(33,56%,93%)] py-24">
65
<div class="container mx-auto px-4">
7-
<h2 class="mb-16 text-center text-4xl font-bold tracking-tight text-[#5B3E29]">
8-
<span class="border-b-4 border-[#D98E73] pb-2">
6+
<h2 class="mb-16 text-center text-4xl font-bold tracking-tight text-[hsl(28,45%,29%)]">
7+
<span class="border-b-4 border-[hsl(32,47%,75%)] pb-2">
98
Our Three Pillars
109
</span>
1110
</h2>
1211
<div class="grid gap-8 md:grid-cols-3">
13-
<div class="rounded-2xl bg-[#FFF8F0] p-8 text-center transition-all duration-300 hover:-translate-y-2">
14-
<div class="mb-6 inline-block rounded-full bg-[#D98E73] p-4">
12+
<div class="rounded-2xl bg-[hsl(32,47%,85%)] p-8 text-center shadow-lg transition-all duration-300 hover:-translate-y-2 hover:bg-[hsl(32,47%,80%)] hover:shadow-xl">
13+
<div class="mb-6 inline-block rounded-full bg-[hsl(32,33%,98%)] p-4">
1514
<svg
16-
class="h-8 w-8 text-white"
15+
class="h-8 w-8 text-[hsl(28,45%,29%)]"
1716
fill="none"
1817
stroke="currentColor"
1918
viewBox="0 0 24 24"
@@ -26,16 +25,18 @@ export const ThreePillarsSection = component$(() => {
2625
/>
2726
</svg>
2827
</div>
29-
<h3 class="mb-4 text-2xl font-semibold text-[#5B3E29]">Create</h3>
30-
<p class="text-[#6D5D4E]">
28+
<h3 class="mb-4 text-2xl font-semibold text-[hsl(28,45%,29%)]">
29+
Create
30+
</h3>
31+
<p class="text-[hsl(28,29%,49%)]">
3132
Share your favorite cozy spots and organize meaningful events that
3233
bring people together.
3334
</p>
3435
</div>
35-
<div class="rounded-2xl bg-[#FFF8F0] p-8 text-center transition-all duration-300 hover:-translate-y-2">
36-
<div class="mb-6 inline-block rounded-full bg-[#D98E73] p-4">
36+
<div class="rounded-2xl bg-[hsl(32,47%,85%)] p-8 text-center shadow-lg transition-all duration-300 hover:-translate-y-2 hover:bg-[hsl(32,47%,80%)] hover:shadow-xl">
37+
<div class="mb-6 inline-block rounded-full bg-[hsl(32,33%,98%)] p-4">
3738
<svg
38-
class="h-8 w-8 text-white"
39+
class="h-8 w-8 text-[hsl(28,45%,29%)]"
3940
fill="none"
4041
stroke="currentColor"
4142
viewBox="0 0 24 24"
@@ -48,16 +49,18 @@ export const ThreePillarsSection = component$(() => {
4849
/>
4950
</svg>
5051
</div>
51-
<h3 class="mb-4 text-2xl font-semibold text-[#5B3E29]">Share</h3>
52-
<p class="text-[#6D5D4E]">
52+
<h3 class="mb-4 text-2xl font-semibold text-[hsl(28,45%,29%)]">
53+
Share
54+
</h3>
55+
<p class="text-[hsl(28,29%,49%)]">
5356
Connect with like-minded individuals and build a community around
5457
your favorite spaces.
5558
</p>
5659
</div>
57-
<div class="rounded-2xl bg-[#FFF8F0] p-8 text-center transition-all duration-300 hover:-translate-y-2">
58-
<div class="mb-6 inline-block rounded-full bg-[#D98E73] p-4">
60+
<div class="rounded-2xl bg-[hsl(32,47%,85%)] p-8 text-center shadow-lg transition-all duration-300 hover:-translate-y-2 hover:bg-[hsl(32,47%,80%)] hover:shadow-xl">
61+
<div class="mb-6 inline-block rounded-full bg-[hsl(32,33%,98%)] p-4">
5962
<svg
60-
class="h-8 w-8 text-white"
63+
class="h-8 w-8 text-[hsl(28,45%,29%)]"
6164
fill="none"
6265
stroke="currentColor"
6366
viewBox="0 0 24 24"
@@ -70,8 +73,10 @@ export const ThreePillarsSection = component$(() => {
7073
/>
7174
</svg>
7275
</div>
73-
<h3 class="mb-4 text-2xl font-semibold text-[#5B3E29]">Join</h3>
74-
<p class="text-[#6D5D4E]">
76+
<h3 class="mb-4 text-2xl font-semibold text-[hsl(28,45%,29%)]">
77+
Join
78+
</h3>
79+
<p class="text-[hsl(28,29%,49%)]">
7580
Discover and participate in events that match your interests and
7681
expand your social circle.
7782
</p>
@@ -80,4 +85,4 @@ export const ThreePillarsSection = component$(() => {
8085
</div>
8186
</section>
8287
);
83-
});
88+
});

‎src/routes/landing/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { component$ } from "@builder.io/qwik";
2+
import { JoinCommunity } from "./JoinCommunity";
23
import { CommunityEventsSection } from "./CommunityEvent";
34
import { CommunitySpacesSection } from "./CommunitySpaceSection";
45
import { ThreePillarsSection } from "./ThreePillarsSection";
@@ -83,6 +84,7 @@ export default component$(() => {
8384
<CommunitySpacesSection spaces={demoSpaces} />
8485
<TestimonialsSection />
8586
<CommunityEventsSection events={demoEvent} />
87+
<JoinCommunity />
8688
</>
8789
);
8890
});

‎src/routes/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const onGet: RequestHandler = async (ctx) => {
3030
export default component$(() => {
3131
return (
3232
<div class="">
33-
<div class="pt-16">
33+
<div class="">
3434
<MainHeader />
3535
</div>
3636
<Slot />

0 commit comments

Comments
 (0)