Skip to content

Commit

Permalink
Added colors & hovers
Browse files Browse the repository at this point in the history
  • Loading branch information
@hcourdent
hcourdent committed Sep 6, 2023
1 parent 53fe1e1 commit 8b71b3b
Show file tree
Hide file tree
Showing 2 changed files with 168 additions and 66 deletions.
16 changes: 16 additions & 0 deletions src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,3 +317,19 @@ th {
article a {
@apply text-blue-500 dark:!text-blue-400;
}

div.pt-8 a:hover .twitter-name {
color: #1DA1F2;
}

div.pt-8 a:hover .hn-name {
color: #ff4000;
}

div.pt-8 a:hover .discord-name {
color: #7289da;
}

div.pt-8 a:hover .wm-name {
color: #2196F3;
}
218 changes: 152 additions & 66 deletions src/landing/TestimonialsSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,121 +1,207 @@
import React from 'react';
import LandingSection from './LandingSection';
import '../css/custom.css';


const testimonials = [
{
body: '@windmilldev -- super powerful tool, built by @rubenfiszel, it\'s just insane how good it is. You can build reusable scripts with Go, Deno, Python, wire them up in a workflow, run them on a cron, build an internal tool, and a lot more, all in one place :D',
body: (
<span>
<strong>
<span className="text-blue-500">
@windmilldev
</span>
</strong>{' '}
-- super powerful tool, built by @rubenfiszel, it's just insane how good it is. You can build reusable scripts with Go, Deno, Python, wire them up in a workflow, run them on a cron, build an internal tool, and a lot more, all in one place :D
</span>
),
author: {
handle: 'simo',
name: '@fr3fou',
handle: 'twitter',
name: '@fr3fou on Twitter',
date: 'June 19th 2023',
backlink: 'https://twitter.com/fr3fou/status/1670866672448569361'
}
},
{
body: 'We\'ve been using windmill for our internal tooling and dashboards and its been great! Windmill made running and tracking these things (like the ATS system) accessible to my "low"-technical co-founder, who regularly will hop in and run the job or browse through error logs of previous runs.',
author: {
handle: 'thawab',
body: (
<span>
We've been using windmill for our internal tooling and dashboards and its been great!{' '}
<strong>
<span className="text-blue-500">
Windmill
</span>
</strong>{' '}
made running and tracking these things (like the ATS system) accessible to my "low"-technical co-founder, who regularly will hop in and run the job or browse through error logs of previous runs.
</span>
),
author: {
handle: 'hn',
backlink: 'https://news.ycombinator.com/item?id=37001413',
name: 'bluecoconut from HackerNews'
date: 'August 4th 2023',
name: 'bluecoconut on HackerNews'
}
},
{
body: 'Hey filter bubble, why keep @windmilldev a secret? Immersed in data, I was fixated on Nifi, Pulsar, Dagster, etc., trying to build a serverless function orchestrator on such until I stumbled upon windmill. I\'m amazed by what I\'m able to achieve in a brief time playing with it.',
body: (
<span>
Hey filter bubble, why keep{' '}
<strong>
<span className="text-blue-500">@windmilldev</span>
</strong>{' '}
a secret? Immersed in data, I was fixated on Nifi, Pulsar, Dagster, etc., trying to build a serverless function orchestrator on such until I stumbled upon windmill. I'm amazed by what I'm able to achieve in a brief time playing with it.
</span>
),
author: {
handle: 'lesliealexander',
handle: 'twitter',
backlink: 'https://twitter.com/muskirac/status/1689325443420131328',
name: '@muskirac'
name: '@muskirac on Twitter',
date: 'August 9th 2023',
}
},
{
body: 'Windmill is amazing. This is the “just get the thing done” tool my brain has needed for my entire career. I can see it becoming a hub for all kinds of logic in my system. I’m so pleased. Thanks for making such a wonderful platform, and thanks for keeping it open source. the one time I hit a snag, you helped me out within a minute. I got a lot done tonight without even expecting to, and that’s a really cool feeling.',
body: (
<span>
<strong>
<span className="text-blue-500">Windmill</span>
</strong>{' '}
is amazing. This is the “just get the thing done” tool my brain has needed for my entire career. I can see it becoming a hub for all kinds of logic in my system. I’m so pleased. Thanks for making such a wonderful platform, and thanks for keeping it open source. the one time I hit a snag, you helped me out within a minute. I got a lot done tonight without even expecting to, and that’s a really cool feeling.
</span>
),
author: {
handle: 'stevea',
name: 'Steve A from Discord',
handle: 'discord',
name: 'Steve A on Discord',
date: 'August 5th 2023',
backlink: 'https://discord.com/channels/930051556043276338/930051949888405524/1137307730105868348'
}
},
{
body: 'As clients, we are very satisfied with Windmill. We align with Windmill\'s mindset of using the littlest code as possible. Everything is well-structured and things do not break.',
body: (
<span>
As clients, we are very satisfied with {' '}
<strong>
<span className="text-blue-500">Windmill</span>
</strong>{''}
. We align with Windmill's mindset of using the littlest code as possible. Everything is well-structured and things do not break.
</span>
),
author: {
handle: 'zegoverno',
handle: 'wm',
name: 'José Governo - Responsible for Quantitative Strategies and Data Engineering at Tera Capital',
backlink: '/blog/teracapital-case-study'
backlink: '/blog/teracapital-case-study',
date: 'September 5th 2023',
}
},
{
body: 'The best part about Windmill is the team behind it, join the discord server to see how fast they fix issues and add features.',
body: (
<span>
The best part about {' '}
<strong>
<span className="text-blue-500">Windmill</span>
</strong>{' '}
is the team behind it, join the discord server to see how fast they fix issues and add features.
</span>
),
author: {
handle: 'thawab',
handle: 'hn',
backlink: 'https://news.ycombinator.com/item?id=35921601',
name: 'thawab from HackerNews'
name: 'thawab on HackerNews',
date: 'May 12th 2023',
}
},
{
body: 'Love Windmill so much. It\'s blazing fast, super easier to try it out locally with docker-compose, and Ruben and his team are shipping new features / fixing bugs every day, and the product only gets better.',
body: (
<span>
Love {' '}
<strong>
<span className="text-blue-500">Windmill</span>
</strong>{' '}
so much. It's blazing fast, super easier to try it out locally with docker-compose, and Ruben and his team are shipping new features / fixing bugs every day, and the product only gets better.
</span>
),
author: {
handle: 'slig',
handle: 'hn',
backlink: 'https://news.ycombinator.com/item?id=37001402',
name: 'slig from HackerNews'
name: 'slig on HackerNews',
date: 'August 4th 2023',
}
},
{
body: 'Windmill is amazing, incredibly powerful and easy to run anywhere. Thank you so much for making it open source and building in public. I wish you a LOT of success!',
body: (
<span>
<strong>
<span className="text-blue-500">
Windmill
</span>
</strong>{' '}
is amazing, incredibly powerful and easy to run anywhere. Thank you so much for making it open source and building in public. I wish you a LOT of success!
</span>
),
author: {
name: 'js4ever from HackerNews',
handle: 'js4ever',
backlink: 'https://news.ycombinator.com/item?id=37002360'
name: 'js4ever on HackerNews',
handle: 'hn',
backlink: 'https://news.ycombinator.com/item?id=37002360',
date: 'August 4th 2023',
}
},
{
body: 'Currently with Windmill, we employ 9 apps, 20 flows, and 63 scripts in our daily operations. They all serve as the foundation for essential tasks, allowing users to independently manage their activities according to their specific needs.',
body: (
<span>
Currently with {' '}
<strong>
<span className="text-blue-500">Windmill</span>
</strong>{''}
, we employ 9 apps, 20 flows, and 63 scripts in our daily operations. They all serve as the foundation for essential tasks, allowing users to independently manage their activities according to their specific needs.
</span>
),
author: {
handle: 'sindre',
handle: 'wm',
name: 'Sindre Svendby - Software Engineer at Kahoot!',
backlink: '/blog/kahoot-case-study'
backlink: '/blog/kahoot-case-study',
date: 'September 4th 2023',
}
},
];

export default function Example() {
return (
<LandingSection bgClass="">
<div>
<div className="mx-auto text-left">
<h1 className="tracking-tight leading-tight text-left font-bold text-transparent bg-clip-text bg-gradient-to-br from-blue-400 to-blue-600">
Testimonials
</h1>
<p className="mt-2 text-3xl font-bold tracking-tight sm:text-4xl"></p>
<span className="text-lg text-gray-600 max-w-3xl dark:text-gray-200">
We are proud to be recommended by our users and a committed community.
</span>
</div>
<div className="mx-auto mt-16 flow-root max-w-2xl sm:mt-20 lg:mx-0 lg:max-w-none">
<div className="-mt-8 sm:-mx-4 sm:columns-2 sm:text-[0] lg:columns-3">
{testimonials.map((testimonial) => (
<div
key={testimonial.author.handle}
className="pt-8 sm:inline-block sm:w-full sm:px-4"
>
<a
href={testimonial.author.backlink}
className="block rounded-2xl dark:bg-gray-1000 bg-gray-50 p-8 text-sm leading-6 hover:bg-gray-100 hover:no-underline"
>
<blockquote className="dark:text-gray-50 text-gray-900">
<p>{`“${testimonial.body}”`}</p>
</blockquote>
<figcaption className="mt-6 flex items-center gap-x-4">
<div>
<div className="font-semibold dark:text-gray-50 text-gray-900">
{testimonial.author.name}
</div>
</div>
</figcaption>
</a>
</div>
))}
<LandingSection bgClass="">
<div>
<div className="mx-auto text-left">
<h1 className="tracking-tight leading-tight text-left font-bold text-transparent bg-clip-text bg-gradient-to-br from-blue-400 to-blue-600">
Testimonials
</h1>
<p className="mt-2 text-3xl font-bold tracking-tight sm:text-4xl"></p>
<span className="text-lg text-gray-600 max-w-3xl dark:text-gray-200">
We are proud to be recommended by our users.
</span>
</div>
<div className="mx-auto mt-8 flow-root max-w-2xl sm:mt-20 lg:mx-0 lg:max-w-none">
<div className="columns-3">
{testimonials.map((testimonial) => (
<div
key={testimonial.author.handle}
className="pt-8 sm:inline-block sm:w-full sm:px-4"
>
<a
href={testimonial.author.backlink}
className="block rounded-2xl dark:bg-gray-1000 border dark:border-0 p-8 text-sm leading-6 hover:bg-gray-50 hover:no-underline"
target="_blank"
>
<div className="dark:text-gray-50 text-gray-900">
<p>{testimonial.body}</p>
</div>
<div className={`font-semibold dark:text-gray-50 text-gray-900 mt-2 ${testimonial.author.handle}-name`}>
{testimonial.author.name}
</div>
<div className="text-xs text-gray-400 mt-1">
{testimonial.author.date}
</div>
</a>
</div>
))}
</div>
</LandingSection>
</div>
</div>
</LandingSection>
);
}
}

0 comments on commit 8b71b3b

Please sign in to comment.