Skip to content

Commit 2aaa2c5

Browse files
leonard84leonard84
committed
Fix hover animation for cards
1 parent bc74fff commit 2aaa2c5

File tree

2 files changed

+54
-26
lines changed

2 files changed

+54
-26
lines changed

‎spock-website/index.html‎

Lines changed: 53 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ <h2 class="text-3xl md:text-4xl font-bold mb-8 text-gray-100" data-aos="fade-up"
5858
<a href="https://groovyconsole.dev/?g=groovy_4_0&gist=437e9026ff86d2d709c2c56eb7e2eef1#g8qcDpYAQE" target="_blank" class="cta-button cta-primary">
5959
Try it online
6060
</a>
61-
<a href="https://docs.spockframework.org" target="_blank" class="cta-button cta-secondary">
61+
<a href="https://docs.spockframework.org" target="_blank" class="cta-button cta-tertiary">
6262
Read the Docs
6363
</a>
6464
<a href="https://github.com/spockframework/spock-example" target="_blank" class="cta-button cta-tertiary">
@@ -82,35 +82,63 @@ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-100" data-
8282
Why Choose Spock?
8383
</h2>
8484
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
85-
<div class="feature-card" data-aos="fade-up" data-aos-delay="100">
86-
<svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>
87-
<h3 class="text-xl font-semibold text-gray-100 mb-2">Expressive Specifications</h3>
88-
<p class="text-gray-300">Write tests that are easy to read and understand, even for non-programmers.</p>
85+
<div data-aos="fade-up" data-aos-delay="100">
86+
<div class="feature-card h-full">
87+
<svg viewBox="0 0 24 24">
88+
<rect x="4" y="4" width="16" height="16" rx="2"/>
89+
</svg>
90+
<h3 class="text-xl font-semibold text-gray-100 mb-2">Expressive Specifications</h3>
91+
<p class="text-gray-300">Write tests that are easy to read and understand, even for
92+
non-programmers.</p>
93+
</div>
8994
</div>
90-
<div class="feature-card" data-aos="fade-up" data-aos-delay="150">
91-
<svg viewBox="0 0 24 24"><path d="M3 17l6-6 4 4 8-8" /></svg>
92-
<h3 class="text-xl font-semibold text-gray-100 mb-2">Powerful Mocking</h3>
93-
<p class="text-gray-300">Create flexible and powerful mocks and stubs with built-in support.</p>
95+
<div data-aos="fade-up" data-aos-delay="150">
96+
<div class="feature-card h-full">
97+
<svg viewBox="0 0 24 24">
98+
<path d="M3 17l6-6 4 4 8-8"/>
99+
</svg>
100+
<h3 class="text-xl font-semibold text-gray-100 mb-2">Powerful Mocking</h3>
101+
<p class="text-gray-300">Create flexible and powerful mocks and stubs with built-in support.</p>
102+
</div>
94103
</div>
95-
<div class="feature-card" data-aos="fade-up" data-aos-delay="200">
96-
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></svg>
97-
<h3 class="text-xl font-semibold text-gray-100 mb-2">JUnit Platform</h3>
98-
<p class="text-gray-300">Seamless integration with JUnit 5+ and build tools.</p>
104+
<div data-aos="fade-up" data-aos-delay="200">
105+
<div class="feature-card h-full">
106+
<svg viewBox="0 0 24 24">
107+
<circle cx="12" cy="12" r="10"/>
108+
<path d="M12 6v6l4 2"/>
109+
</svg>
110+
<h3 class="text-xl font-semibold text-gray-100 mb-2">JUnit Platform</h3>
111+
<p class="text-gray-300">Seamless integration with JUnit 5+ and build tools.</p>
112+
</div>
99113
</div>
100-
<div class="feature-card" data-aos="fade-up" data-aos-delay="250">
101-
<svg viewBox="0 0 24 24"><path d="M3 3h18v6H3zM3 15h18v6H3z" /><path d="M9 9v6" /></svg>
102-
<h3 class="text-xl font-semibold text-gray-100 mb-2">Data-Driven Testing</h3>
103-
<p class="text-gray-300">Easily run the same test with different sets of data.</p>
114+
<div data-aos="fade-up" data-aos-delay="250">
115+
<div class="feature-card h-full">
116+
<svg viewBox="0 0 24 24">
117+
<path d="M3 3h18v6H3zM3 15h18v6H3z"/>
118+
<path d="M9 9v6"/>
119+
</svg>
120+
<h3 class="text-xl font-semibold text-gray-100 mb-2">Data-Driven Testing</h3>
121+
<p class="text-gray-300">Easily run the same test with different sets of data.</p>
122+
</div>
104123
</div>
105-
<div class="feature-card" data-aos="fade-up" data-aos-delay="300">
106-
<svg viewBox="0 0 24 24"><polygon points="12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2" /></svg>
107-
<h3 class="text-xl font-semibold text-gray-100 mb-2">Groovy DSL</h3>
108-
<p class="text-gray-300">Leverage the power and flexibility of the Groovy language.</p>
124+
<div data-aos="fade-up" data-aos-delay="300">
125+
<div class="feature-card h-full">
126+
<svg viewBox="0 0 24 24">
127+
<polygon points="12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2"/>
128+
</svg>
129+
<h3 class="text-xl font-semibold text-gray-100 mb-2">Groovy DSL</h3>
130+
<p class="text-gray-300">Leverage the power and flexibility of the Groovy language.</p>
131+
</div>
109132
</div>
110-
<div class="feature-card" data-aos="fade-up" data-aos-delay="350">
111-
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M9 12l2 2 4-4" /></svg>
112-
<h3 class="text-xl font-semibold text-gray-100 mb-2">Built-in Matchers</h3>
113-
<p class="text-gray-300">Use a rich set of matchers to verify expectations with clarity.</p>
133+
<div data-aos="fade-up" data-aos-delay="350">
134+
<div class="feature-card h-full">
135+
<svg viewBox="0 0 24 24">
136+
<rect x="3" y="3" width="18" height="18" rx="2"/>
137+
<path d="M9 12l2 2 4-4"/>
138+
</svg>
139+
<h3 class="text-xl font-semibold text-gray-100 mb-2">Built-in Matchers</h3>
140+
<p class="text-gray-300">Use a rich set of matchers to verify expectations with clarity.</p>
141+
</div>
114142
</div>
115143
</div>
116144
</div>

‎spock-website/src/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ code .number { color: #fca5a5; } /* Red */
128128
transition: transform 0.3s ease, box-shadow 0.3s ease;
129129
}
130130
.feature-card:hover {
131-
transform: translateY(-4px);
131+
transform: translateY(-8px);
132132
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
133133
}
134134

0 commit comments

Comments
 (0)