Skip to content

Commit

Permalink
add basic testimonials
Browse files Browse the repository at this point in the history
  • Loading branch information
thejessewinton committed Oct 22, 2024
1 parent ff9f423 commit 4dd18c1
Show file tree
Hide file tree
Showing 10 changed files with 168 additions and 50 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
"date-fns": "^3.6.0",
"dequal": "^2.0.3",
"embla-carousel": "^8.1.5",
"embla-carousel-auto-scroll": "^8.3.0",
"embla-carousel-svelte": "^8.1.5",
"embla-carousel-wheel-gestures": "^8.0.1",
"eslint": "^8.57.0",
Expand Down
12 changes: 12 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions src/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -194,12 +194,14 @@
--color-primary: var(--color-greyscale-900);
--color-secondary: var(--color-greyscale-700);
--color-accent: var(--color-pink-600);
--carousel-gradient: transparent;
}

/* dark theme */
.dark {
--color-primary: var(--color-greyscale-100);
--color-secondary: var(--color-greyscale-300);
--carousel-gradient: 23, 23, 26;
}

/* Container */
Expand Down
85 changes: 60 additions & 25 deletions src/lib/components/carousel/Carousel.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,17 @@
type EmblaPluginType
} from 'embla-carousel';
import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
import AutoScrollPlugin, { type AutoScrollOptionsType } from 'embla-carousel-auto-scroll';
let emblaApi: EmblaCarouselType;
let options: EmblaOptionsType = {
export let showGradient: boolean = true;
export let showBullets: boolean = true;
export let showArrows: boolean = true;
export let autoScrollOptions: AutoScrollOptionsType = {
active: false
};
export let options: EmblaOptionsType = {
align: 'center',
skipSnaps: true,
loop: true
Expand All @@ -27,7 +34,7 @@
else hasNext = false;
};
let plugins: EmblaPluginType[] = [WheelGesturesPlugin()];
let plugins: EmblaPluginType[] = [WheelGesturesPlugin(), AutoScrollPlugin(autoScrollOptions)];
let selectedScrollIndex = 0;
const onSelect = (index: number) => {
Expand Down Expand Up @@ -123,35 +130,63 @@
</script>

<div class="embla web-carousel relative overflow-hidden">
{#if hasPrev}
<button class="web-carousel-button web-carousel-button-start" on:click={onPrev}>
<span class="web-icon-arrow-left" aria-hidden="true"></span>
</button>
{/if}
{#if hasNext}
<button class="web-carousel-button web-carousel-button-end" on:click={onNext}>
<span class="web-icon-arrow-right" aria-hidden="true"></span>
</button>
{#if showArrows}
{#if hasPrev}
<button class="web-carousel-button web-carousel-button-start" on:click={onPrev}>
<span class="web-icon-arrow-left" aria-hidden="true"></span>
</button>
{/if}
{#if hasNext}
<button class="web-carousel-button web-carousel-button-end" on:click={onNext}>
<span class="web-icon-arrow-right" aria-hidden="true"></span>
</button>
{/if}
{/if}

<div class="embla__viewport" use:embla={{ options, plugins }} on:emblaInit={onEmblaInit}>
<ul class="embla__container flex">
<slot />
</ul>
</div>
<div class="shadow" />
</div>

<div class="web-carousel-bullets">
<ul class="web-carousel-bullets-list">
{#each Array.from({ length: emblaApi?.scrollSnapList().length }) as _, i}
<li class="web-carousel-bullets-item rounded-full">
<button
class="web-carousel-bullets-button"
class:is-selected={selectedScrollIndex === i}
aria-label={`gallery item ${i + 1}`}
on:click={() => onSelect(i)}
></button>
</li>
{/each}
</ul>
</div>
{#if showBullets}
<div class="web-carousel-bullets">
<ul class="web-carousel-bullets-list">
{#each Array.from({ length: emblaApi?.scrollSnapList().length }) as _, i}
<li class="web-carousel-bullets-item rounded-full">
<button
class="web-carousel-bullets-button"
class:is-selected={selectedScrollIndex === i}
aria-label={`gallery item ${i + 1}`}
on:click={() => onSelect(i)}
></button>
</li>
{/each}
</ul>
</div>
{/if}

<style>
.shadow {
width: 100vw;
height: 80vh;
position: absolute;
top: 50%;
left: 50%;
pointer-events: none;
transform: translateX(-50%) translateY(-50%);
z-index: 10;
backdrop-filter: blur(2px);
background-color: hsl(var(--web-color-background) / 50%);
mask-composite: intersect;
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 1) 0%,
transparent,
transparent,
rgba(0, 0, 0, 1) 100%
);
}
</style>
35 changes: 14 additions & 21 deletions src/lib/components/carousel/CarouselSlide.svelte
Original file line number Diff line number Diff line change
@@ -1,25 +1,18 @@
<li class="slide web-carousel-item">
<script lang="ts">
import { classNames } from '$lib/utils/classnames';
let className = '';
export { className as class };
</script>

<li
class={classNames(
'slide web-carousel-item mr-2 flex-[0_0_100%] cursor-grab active:cursor-grabbing md:flex-[0_0_50%]',
className
)}
>
<div class="embla__slide__number">
<slot />
</div>
</li>

<style lang="scss">
@use '$scss/abstract' as *;
.slide {
cursor: grab;
&:active {
cursor: grabbing;
}
@media (max-width: 768px) {
flex: 0 0 100%;
}
flex: 0 0 50%;
min-width: 0;
margin-right: pxToRem(16);
}
</style>
2 changes: 1 addition & 1 deletion src/markdoc/layouts/Integration.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
class="web-u-sep-block-end pb-0"
style="background-color:rgba(23, 23, 26, 1); margin-block-end: 2.5rem"
>
<div class="container">
<div class="container dark">
<div class="web-integrations-top-section">
<div class="web-carousel-wrapper">
<a href="/integrations" class="web-button is-text mb-12">
Expand Down
3 changes: 1 addition & 2 deletions src/routes/init/tickets/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
import FooterNav from '$lib/components/FooterNav.svelte';
import MainFooter from '$lib/components/MainFooter.svelte';
import Main from '$lib/layouts/Main.svelte';
import { Ticket } from '../(components)/ticket';
import { getMockContributions, loginGithub } from '../helpers';
import { loginGithub } from '../helpers';
import { buildOpenGraphImage } from '$lib/utils/metadata';
import TicketScroll from '../(components)/TicketScroll.svelte';
Expand Down
64 changes: 64 additions & 0 deletions src/routes/products/auth/(components)/Testimonials.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<script lang="ts">
import { Root, Slide } from '$lib/components/carousel';
const testimonials = [
{
name: 'Ryan O’Conner',
copy: `The switch to using Appwrite brought infinite value that I'm still discovering today, but a major impact that it made was the amount of time and stress that it saved me as it simply just works.`,
image: '/',
title: 'Founder',
company: 'K-Collect'
},
{
name: 'Ryan O’Conner',
copy: `The switch to using Appwrite brought infinite value that I'm still discovering today, but a major impact that it made was the amount of time and stress that it saved me as it simply just works.`,
image: '/',
title: 'Founder',
company: 'K-Collect'
},
{
name: 'Ryan O’Conner',
copy: `The switch to using Appwrite brought infinite value that I'm still discovering today, but a major impact that it made was the amount of time and stress that it saved me as it simply just works.`,
image: '/',
title: 'Founder',
company: 'K-Collect'
},
{
name: 'Ryan O’Conner',
copy: `The switch to using Appwrite brought infinite value that I'm still discovering today, but a major impact that it made was the amount of time and stress that it saved me as it simply just works.`,
image: '/',
title: 'Founder',
company: 'K-Collect'
},
{
name: 'Ryan O’Conner',
copy: `The switch to using Appwrite brought infinite value that I'm still discovering today, but a major impact that it made was the amount of time and stress that it saved me as it simply just works.`,
image: '/',
title: 'Founder',
company: 'K-Collect'
}
];
</script>

<div class="light flex justify-center gap-3">
<Root
showBullets={false}
showArrows={false}
showGradient={false}
autoScrollOptions={{
active: true,
speed: 0.5
}}
>
{#each testimonials as testimonial}
<Slide class="md:flex-[0_0_25%]">
<div class="w-full rounded-2xl bg-white p-5">
<p class="text-sub-body text-secondary font-medium">{testimonial.copy}</p>
<span class="text-sub-body text-secondary"
>{testimonial.name} // {testimonial.company}</span
>
</div>
</Slide>
{/each}
</Root>
</div>
2 changes: 2 additions & 0 deletions src/routes/products/auth/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
import { PreFooter, FooterNav, MainFooter } from '$lib/components';
import { Features } from './(components)/features';
import Hero from './(components)/Hero.svelte';
import Testimonials from './(components)/Testimonials.svelte';
const title = 'Auth' + TITLE_SUFFIX;
const description = DEFAULT_DESCRIPTION;
Expand Down Expand Up @@ -44,6 +45,7 @@
<Access />
<SSR />
<UseCases />
<Testimonials />
<OpenSource />
</div>
</div>
Expand Down
12 changes: 11 additions & 1 deletion src/scss/7-components/_carousel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,22 @@

.#{$p}-carousel {
position:relative;
.dark {
--carousel-gradient: 23, 23, 26;
}

.light {
--carousel-gradient: 255, 255, 255;
}


@media (min-width: 768px) {

&::before {

content:""; display:block;
position:absolute; z-index:1; inset:0; inset-inline:pxToRem(0);
background: linear-gradient(90deg, rgba(23, 23, 26, 1) 0%, rgba(23, 23, 26, 0.88) 9.65%, rgba(23, 23, 26, 0) 25%, rgba(23, 23, 26, 0) 50%, rgba(23, 23, 26, 0) 75%, rgba(23, 23, 26, 0.88) 89.28%, rgba(23, 23, 26, 1) 100%);
background: linear-gradient(90deg, rgba(var(--carousel-gradient), 1) 0%, rgba(var(--carousel-gradient), 0.88) 9.65%, rgba(var(--carousel-gradient), 0) 25%, rgba(var(--carousel-gradient), 0) 50%, rgba(var(--carousel-gradient), 0) 75%, rgba(var(--carousel-gradient), 0.88) 89.28%, rgba(var(--carousel-gradient), 1) 100%);
pointer-events: none;
}
}
Expand Down

0 comments on commit 4dd18c1

Please sign in to comment.