Blockquote
apps/www/src/components/Blockquote.astro · 53 lines · group Testimonials
Used by
- codeexpert.se / × 2
Live sites: codeexpert.se.
Samples 1
<ProductQualitySection>How do we ensure product quality?
Quality comes from proper processes
- We do WELL-DESIGNED software ARCHITECTURE that ensures the scalability, maintainability, and longevity of the product
- We hold ARCHITECTURE MEETINGS where the team finds optimal architectural solutions
- We use coding STANDARDS: a codebase is self-documented, easy to learn and navigate
- We provide WELL-DOCUMENTED software
- We use almost all types of QA TESTING, both functional and non-functional
- CONTINUOUS INTEGRATION AND DELIVERY (CI/CD) is always used without exception
We work according to our own unique software development process: the whole process is divided into two parallel streams that run simultaneously: DEVELOPMENT in the current sprint and ANALYSIS for the next sprint. This approach is based on Kanban methodology, but with some differences, and provides psychological comfort to the developers.
David HamrenCEO at Code Expert
MDX of this sample
<ProductQualitySection
title="How do we ensure product quality?"
description=""
firstBtnTitle="Contact us"
firstBtnUrl="/#contacts"
>
<Fragment slot="article">
## Quality comes from proper processes
* We do WELL-DESIGNED software ARCHITECTURE that ensures the scalability, maintainability, and longevity of the product
* We hold ARCHITECTURE MEETINGS where the team finds optimal architectural solutions
* We use coding STANDARDS: a codebase is self-documented, easy to learn and navigate
* We provide WELL-DOCUMENTED software
* We use almost all types of QA TESTING, both functional and non-functional
* CONTINUOUS INTEGRATION AND DELIVERY (CI/CD) is always used without exception
</Fragment>
<Blockquote
logoImageName="codeexpertGREY.png"
text="We work according to our own unique software development process: the whole process is divided into two parallel streams that run simultaneously: DEVELOPMENT in the current sprint and ANALYSIS for the next sprint. This approach is based on Kanban methodology, but with some differences, and provides psychological comfort to the developers."
avatarImageName="david.jpg"
name="David Hamren"
role="CEO at Code Expert"
/>
</ProductQualitySection>Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| logoImageName | string | yes | ||
| text | string | yes | ||
| avatarImageName | string | yes | ||
| name | string | yes | ||
| role | string | yes |
Source apps/www/src/components/Blockquote.astro @ gitt.one
---
import { Image } from 'astro:assets';
import { resolveImage } from '../lib/images';
interface Props {
logoImageName: string;
text: string;
avatarImageName: string;
name: string;
role: string;
}
const { logoImageName, text, avatarImageName, name, role } = Astro.props;
const logoImage = await resolveImage(logoImageName);
const avatarImage = await resolveImage(avatarImageName);
---
<blockquote class="relative bg-white rounded-lg shadow-lg">
<div class="rounded-t-lg px-4 py-4 sm:px-8">
<Image src={logoImage} alt="" widths={[400]} class="max-w-[12rem]" />
<div class="relative text-lg text-gray-700 font-medium mt-4">
<svg
class="absolute top-0 left-0 transform -translate-x-3 -translate-y-2 h-8 w-8 text-gray-200"
fill="currentColor"
viewBox="0 0 32 32"
aria-hidden="true"
>
<path
d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z"
></path>
</svg>
<p class="relative">{text}</p>
</div>
</div>
<cite
class="relative flex items-center sm:items-start bg-primary-800 rounded-b-lg not-italic py-5 px-6 sm:py-5 sm:pl-12 sm:pr-10 sm:mt-8"
>
<div class="relative rounded-full border-2 border-white sm:absolute sm:top-0 sm:transform sm:-translate-y-1/2">
<Image
src={avatarImage}
alt=""
widths={[400]}
class="w-12 h-12 sm:w-20 sm:h-20 rounded-full bg-primary-300"
/>
</div>
<span class="relative ml-4 text-primary-100 font-semibold leading-6 sm:ml-24 sm:pl-1">
<span class="text-white font-semibold sm:inline">{name}</span>
<span class="sm:inline">{role}</span>
</span>
</cite>
</blockquote>Source links point to engine-astro@e857a859. Samples are cut from the sites' own content by scripts/gallery-extract.mjs; nothing is merged or removed yet.