Skip to content

Enhance site styling with testimonials #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MphoCodes wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Enhance site styling with testimonials #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<meta name="description" content="Invest with Qore Lending and earn 40% annual returns from diversified commercial loans." />
<title>Qore Lending - Secure 40% Returns</title>
</head>
<body>
<div id="app"></div>
Expand Down
63 changes: 63 additions & 0 deletions src/components/Testimonials.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<template>
<div class="py-20 px-6 bg-slate-800/40">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-4xl font-bold text-white mb-8">What Our Investors Say</h2>
<div class="relative h-48">
<transition-group name="fade" tag="div">
<div
v-for="(testimonial, idx) in [testimonials[current]]"
:key="testimonial.name"
class="absolute inset-0 flex flex-col items-center justify-center space-y-4"
>
<p class="text-xl text-slate-200 max-w-2xl">"{{ testimonial.quote }}"</p>
<div class="text-amber-400 font-semibold">{{ testimonial.name }}</div>
</div>
</transition-group>
</div>
</div>
</div>
</template>

<script>
export default {
name: 'Testimonials',
data() {
return {
current: 0,
testimonials: [
{
name: 'Sipho M.',
quote: 'Qore Lending transformed my savings into real growth. I can see a bright future ahead.'
},
{
name: 'Naledi T.',
quote: 'The 40% return sounded too good to be true, but Qore delivers every quarter.'
},
{
name: 'Thabo K.',
quote: 'Professional service and amazing results. I recommend Qore to all my friends.'
}
]
}
},
mounted() {
this.interval = setInterval(() => {
this.current = (this.current + 1) % this.testimonials.length
}, 5000)
},
beforeUnmount() {
clearInterval(this.interval)
}
}
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
5 changes: 5 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
@import "tailwindcss";

body {
font-family: 'Poppins', sans-serif;
}
9 changes: 8 additions & 1 deletion src/views/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,10 +88,17 @@
</div>
</div>
</section>

<!-- Testimonials Section -->
<Testimonials />
</template>

<script>
import Testimonials from '../components/Testimonials.vue'
export default {
name: 'Home'
name: 'Home',
components: {
Testimonials
}
}
</script>