Skip to content

Commit e194c48

Browse files
arivveraarivvera
committed
Remake the Testimonials section
Remake the content and profile pictures of the `Testimonials` section. Add the `Testimonials` component back into the page. Update hte content of the `See the Magic` section.
1 parent 2523ce7 commit e194c48

File tree

6 files changed

+148
-82
lines changed

6 files changed

+148
-82
lines changed

‎src/assets/user-placeholder.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎src/components/landing/Landing.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@ import Mascot from "./Mascot.astro";
1515
<Features />
1616
<Mascot />
1717
<GetStarted />
18-
<!-- <Testimonial /> -->
18+
<Testimonial />
1919
<Footer />
2020
</div>

‎src/components/landing/SeeTheMagic.astro‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,36 @@
22
import { FileTerminal, SquareTerminal, Terminal } from "lucide-astro";
33
---
44

5-
<section class="px-4 py-20 z-20">
6-
<div class="container mx-auto max-w-6xl">
7-
<div class="mb-12 text-center">
8-
<h2 class="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
9-
<span
10-
class="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"
11-
>
12-
See the Magic
13-
</span>
14-
</h2>
15-
<p class="mx-auto max-w-2xl text-lg text-purple-200/70">
16-
Now check your browser's console by pressing <code
17-
class="p-1 bg-purple-400/5 rounded-sm">F12</code
18-
>, or check your server logs, and see the magic 🤩. In either
19-
case you should see a little console message like the one shown
20-
below, indicating that you have, indeed, been blessed 🙂‍↕️. Now
21-
you are vibing like a true master 😁.
22-
</p>
23-
</div>
24-
25-
<div
26-
class="rounded-xl border border-purple-500/20 bg-purple-500/[0.02] p-6 z-10 animate-float"
5+
<section class="px-4 pt-20 z-20">
6+
<div class="container mx-auto max-w-6xl">
7+
<div class="mb-12 text-center">
8+
<h2 class="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
9+
<span
10+
class="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"
2711
>
28-
<div
29-
class="h-[100px] rounded-lg border border-purple-500/10 bg-black/50 p-4 font-mono flex items-center gap-1"
30-
>
31-
<span class="text-purple-300/50">
32-
✨ This website is blessed with Cascarilla.js 💫
33-
</span>
34-
</div>
35-
</div>
12+
See the Magic
13+
</span>
14+
</h2>
15+
<p class="mx-auto max-w-2xl text-lg text-purple-200/70">
16+
Now check your browser's console by pressing <code
17+
class="p-1 bg-purple-400/5 rounded-sm">F12</code
18+
>, or check your server logs, and see the magic 🤩. In either case you
19+
should see a little console message like the one shown below, indicating
20+
that you have, indeed, been blessed 🙂‍↕️. Now you are vibing like a true
21+
master 😁.
22+
</p>
23+
</div>
24+
25+
<div
26+
class="rounded-xl border border-purple-500/20 bg-purple-500/[0.02] p-6 z-10 animate-float"
27+
>
28+
<div
29+
class="h-[100px] rounded-lg border border-purple-500/10 bg-black/50 p-4 font-mono flex items-center gap-1"
30+
>
31+
<span class="text-purple-300/50">
32+
✨ This website is blessed with Cascarilla.js 💫
33+
</span>
34+
</div>
3635
</div>
36+
</div>
3737
</section>

‎src/components/landing/Testimonial.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ import { TestimonialCarousel } from "./TestimonialCarousel";
99
<span
1010
class="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"
1111
>
12-
Magical Testimonials
12+
Vibing Testimonials
1313
</span>
1414
</h2>
1515
<p class="mx-auto max-w-2xl text-lg text-purple-200/70">
16-
Hear from our community of enchanted developers who have mastered the
17-
art of magical programming.
16+
Hear it directly from a community of developers who have mastered the
17+
art of programming with good vibes.
1818
</p>
1919
</div>
2020

‎src/components/landing/TestimonialCarousel.tsx‎

Lines changed: 38 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,48 @@
11
import { useEffect, useState } from "react";
2+
import { testimonials } from "../../utils/Testimonials"
23

3-
interface Testimonial {
4-
id: number;
5-
name: string;
6-
role: string;
7-
avatar: string;
8-
quote: string;
9-
}
4+
// const testimonials2: Testimonial[] = [
5+
// {
6+
// id: 1,
7+
// name: "Sarah Enchanter",
8+
// role: "Senior Spellcaster",
9+
// avatar: "https://placehold.co/600x400",
10+
// quote:
11+
// "Siacaraa has revolutionized our magical code transformations. The enchanted functions are pure wizardry!",
12+
// },
13+
// {
14+
// id: 2,
15+
// name: "Marcus Thaumaturge",
16+
// role: "Code Alchemist",
17+
// avatar: "https://placehold.co/600x400",
18+
// quote:
19+
// "The performance improvements are truly mystical. Our spells execute faster than ever before.",
20+
// },
21+
// {
22+
// id: 3,
23+
// name: "Luna Codebinder",
24+
// role: "Arcane Developer",
25+
// avatar: "https://placehold.co/600x400",
26+
// quote:
27+
// "The elegant syntax feels like writing in an ancient spellbook. Simply magical!",
28+
// },
29+
// {
30+
// id: 4,
31+
// name: "Eldrich Bytecraft",
32+
// role: "Magic Systems Architect",
33+
// avatar: "https://placehold.co/600x400",
34+
// quote:
35+
// "Finally, a framework that understands the art of computational sorcery. Outstanding work!",
36+
// },
37+
// ];
1038

11-
const testimonials: Testimonial[] = [
12-
{
13-
id: 1,
14-
name: "Sarah Enchanter",
15-
role: "Senior Spellcaster",
16-
avatar: "https://placehold.co/600x400",
17-
quote:
18-
"Siacaraa has revolutionized our magical code transformations. The enchanted functions are pure wizardry!",
19-
},
20-
{
21-
id: 2,
22-
name: "Marcus Thaumaturge",
23-
role: "Code Alchemist",
24-
avatar: "https://placehold.co/600x400",
25-
quote:
26-
"The performance improvements are truly mystical. Our spells execute faster than ever before.",
27-
},
28-
{
29-
id: 3,
30-
name: "Luna Codebinder",
31-
role: "Arcane Developer",
32-
avatar: "https://placehold.co/600x400",
33-
quote:
34-
"The elegant syntax feels like writing in an ancient spellbook. Simply magical!",
35-
},
36-
{
37-
id: 4,
38-
name: "Eldrich Bytecraft",
39-
role: "Magic Systems Architect",
40-
avatar: "https://placehold.co/600x400",
41-
quote:
42-
"Finally, a framework that understands the art of computational sorcery. Outstanding work!",
43-
},
44-
];
4539

4640
function TestimonialCarousel() {
4741
const [currentIndex, setCurrentIndex] = useState(0);
4842
const [isAnimating, setIsAnimating] = useState(false);
4943

5044
const [autoPlay, setAutoPlay] = useState(true);
51-
const autoPlayInterval = 5000; // 5 seconds between slides
45+
const autoPlayInterval = 5000;
5246

5347
const showNext = () => {
5448
if (isAnimating) return;
@@ -69,9 +63,8 @@ function TestimonialCarousel() {
6963
setIsAnimating(false);
7064
}, 500);
7165
return () => clearTimeout(timer);
72-
}, [currentIndex]);
66+
}, [currentIndex]);
7367

74-
// Handle automatic movement
7568
useEffect(() => {
7669
let interval: NodeJS.Timeout;
7770

@@ -88,7 +81,6 @@ function TestimonialCarousel() {
8881

8982
return (
9083
<div className="relative overflow-hidden px-4">
91-
{/* Navigation Buttons */}
9284
<div className="absolute left-0 top-1/2 z-10 -translate-y-1/2">
9385
<button
9486
className="flex justify-center items-center h-12 w-12 rounded-full text-purple-300 opacity-75 transition-all hover:bg-purple-500/10 hover:opacity-100"
@@ -136,13 +128,12 @@ function TestimonialCarousel() {
136128
</button>
137129
</div>
138130

139-
{/* Testimonials */}
140131
<div className="relative mx-auto max-w-4xl overflow-hidden">
141132
<div
142133
className="flex transition-transform duration-500 ease-out"
143134
style={{ transform: `translateX(-${currentIndex * 100}%)` }}
144135
>
145-
{testimonials.map((testimonial) => (
136+
{testimonials.map((testimonial) => (
146137
<div key={testimonial.id} className="min-w-full px-16">
147138
<div className="flex flex-col items-center space-y-4">
148139
<div className="relative h-20 w-20 overflow-hidden rounded-full border-2 border-purple-500/20 bg-purple-500/5">
@@ -173,7 +164,6 @@ function TestimonialCarousel() {
173164
</div>
174165
</div>
175166

176-
{/* Dots */}
177167
<div className="mt-8 flex justify-center gap-2">
178168
{testimonials.map((_, index) => (
179169
<button

‎src/utils/Testimonials.ts‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import type Testimonial from "../components/landing/Testimonial.astro";
2+
3+
interface Testimonial {
4+
id: number;
5+
name: string;
6+
role: string;
7+
avatar: string;
8+
quote: string;
9+
}
10+
11+
export const testimonials: Testimonial[] = [
12+
{
13+
id: 1,
14+
name: "Satoru Iwata",
15+
role: "Chief Enthusiasm Officer",
16+
avatar: "/src/assets/user-placeholder.svg",
17+
quote:
18+
"By importing Cascarilla.js, you'll be starting your project on the right foot.",
19+
},
20+
{
21+
id: 2,
22+
name: "Yukihiro Matsumoto",
23+
role: "Technical Wizard",
24+
avatar: "/src/assets/user-placeholder.svg",
25+
quote:
26+
"With Cascarilla.js, you can harness the power of good vibes in your website. From server-side rendering to static sites, our library will get you started on the right path.",
27+
},
28+
{
29+
id: 3,
30+
name: "Alexis Ohanian",
31+
role: "Community Ambassador",
32+
avatar: "/src/assets/user-placeholder.svg",
33+
quote:
34+
"Check your browser's console and see the magic happen. You'll know you've been blessed when our little console message appears, indicating that you're vibing like a true master.",
35+
},
36+
{
37+
id: 4,
38+
name: "Alejandro Rivera",
39+
role: "Author",
40+
avatar: "/src/assets/user-placeholder.svg",
41+
quote:
42+
"You know all this reviews are AI generated... right?",
43+
},
44+
{
45+
id: 5,
46+
name: "John Resig",
47+
role: "Code Maestro",
48+
avatar: "/src/assets/user-placeholder.svg",
49+
quote:
50+
"Cascarilla.js is more than just a library – it's an experience. Do yourself a favor and embrace the power of good vibes in your web development workflow.",
51+
},
52+
{
53+
id: 6 ,
54+
name: "Cascarilla-kun",
55+
role: "Mascot in Chief",
56+
avatar: "/src/assets/user-placeholder.svg",
57+
quote:
58+
"Wiiiiiiii...",
59+
},
60+
]
61+

0 commit comments

Comments
 (0)