Skip to content

Commit 2193121

Browse files
keybasegitkeybasegit
committed
5
1 parent d9085f5 commit 2193121

8 files changed

Lines changed: 568 additions & 0 deletions

File tree

‎assets/media/avatar-copy.jpg‎

2.01 MB
Loading

‎assets/media/luis.jpg‎

38.8 KB
Loading

‎content/_index.md‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -359,5 +359,185 @@ sections:
359359
design:
360360
# Choose how many columns the section has. Valid values: '1' or '2'.
361361
columns: '2'
362+
- block: resume-languages1 #In light theme the percentage isn't visible hence my contribution
363+
content:
364+
title: Languages
365+
# Note: `username` refers to the user's folder name in `content/authors/`
366+
username: admin
367+
- block: testimonials-many
368+
id: trust-indicators
369+
content:
370+
# Header Content
371+
title: "Trusted by millions of users worldwide"
372+
blue: "TESTIMONIALS or TEAM OF AUTHORS OF SITE"
373+
text: "Join thousands of satisfied customers who trust our platform"
374+
375+
# Customizable Rating System
376+
stars: 5 # Number of stars (1-5)
377+
rating: "5.0" # Rating score display
378+
reviews: "10,000+" # Review count
379+
# user_count: REMOVED # No more user badge
380+
381+
# Profile Images with URLs
382+
items:
383+
- name: "Sarah Johnson" # Used for alt text
384+
image: "luis.jpg" # From assets/media/
385+
url: "https://twitter.com/sarah" # Optional: profile/social URL
386+
external: true # Optional: opens in new tab
387+
388+
- name: "Michael Chen" # Used for alt text
389+
image: "luis.jpg" # From assets/media/
390+
url: "https://linkedin.com/in/michael"
391+
external: true
392+
393+
- name: "Emily Rodriguez" # Used for alt text
394+
image: "luis.jpg" # From assets/media/
395+
url: "/team/emily" # Internal link (no external needed)
396+
397+
- name: "David Kim" # Used for alt text
398+
image: "luis.jpg" # From assets/media/
399+
url: "https://github.com/david"
400+
external: true
401+
402+
- name: "Lisa Thompson" # Used for alt text
403+
image: "luis.jpg" # From assets/media/
404+
# url: not required # Image won't be clickable
405+
406+
design:
407+
spacing:
408+
padding: ["1rem", 0, 0, 0]
409+
- block: witness
410+
content:
411+
title: "We have some fans."
412+
text: "Words from real users and collaborators."
413+
414+
items:
415+
- name: "Daniella Doe"
416+
role: "Mobile Developer"
417+
image: "avatar-copy.jpg"
418+
quote: >
419+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aliquid quo eum quae
420+
quos illo earum ipsa doloribus nostrum minus libero…
421+
button:
422+
text: "LinkedIn"
423+
url: "https://linkedin.com"
424+
rating: 4
425+
- name: "Daniella Doe"
426+
role: "Mobile Developer"
427+
image: "avatar-copy.jpg"
428+
quote: >
429+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aliquid quo eum quae
430+
quos illo earum ipsa doloribus nostrum minus libero…
431+
button:
432+
text: "LinkedIn"
433+
url: "https://linkedin.com"
434+
rating: 4
435+
- name: "Daniella Doe"
436+
role: "Mobile Developer"
437+
image: "avatar-copy.jpg"
438+
quote: >
439+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aliquid quo eum quae
440+
quos illo earum ipsa doloribus nostrum minus libero…
441+
button:
442+
text: "LinkedIn"
443+
url: "https://linkedin.com"
444+
rating: 4
445+
- name: "Jane Doe"
446+
role: "Marketing"
447+
image: "avatar-copy.jpg"
448+
quote: >
449+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto laboriosam…
450+
rating: 4
451+
- block: pricing
452+
content:
453+
title: "Choose Your Plan"
454+
text: ""
455+
blue: ""
456+
items:
457+
- name: "Starter"
458+
icon: "custom/twitter"
459+
description: "Perfect for individuals and small projects"
460+
price: "$20"
461+
period: "/month"
462+
button:
463+
text: "Get Started"
464+
url: "#"
465+
target: "_blank"
466+
features:
467+
- text: "10 users"
468+
included: true
469+
- text: "2GB of storage"
470+
included: true
471+
- text: "Email support"
472+
included: true
473+
- text: "Help center access"
474+
included: false
475+
- text: "Phone support"
476+
included: false
477+
- text: "Community access"
478+
included: false
479+
- name: "Pro"
480+
icon: "star"
481+
description: "Great for growing teams and businesses"
482+
price: "$30"
483+
period: "/month"
484+
featured: true # This adds the ring highlight
485+
button:
486+
text: "Get Started"
487+
url: "#"
488+
features:
489+
- text: "20 users"
490+
included: true
491+
- text: "5GB of storage"
492+
included: true
493+
- text: "Email support"
494+
included: true
495+
- text: "20 users"
496+
included: true
497+
- text: "5GB of storage"
498+
included: true
499+
- text: "Email support"
500+
included: true
501+
- text: "Help center access"
502+
included: true
503+
- text: "Phone support"
504+
included: false
505+
- text: "Community access"
506+
included: false
507+
- name: "Enterprise"
508+
icon: "custom/twitter"
509+
description: "For large organizations with advanced needs"
510+
price: "$100"
511+
period: "/month"
512+
button:
513+
text: "Contact Sales"
514+
url: "#"
515+
features:
516+
- text: "50 users"
517+
included: true
518+
- text: "20GB of storage"
519+
included: true
520+
- text: "Email support"
521+
included: true
522+
- text: "Help center access"
523+
included: true
524+
- text: "Phone support"
525+
included: true
526+
- text: "Community access"
527+
included: true
528+
- text: "20GB of storage"
529+
included: true
530+
- text: "Email support"
531+
included: true
532+
- text: "Help center access"
533+
included: true
534+
- text: "Phone support"
535+
included: true
536+
- text: "Community access"
537+
included: true
538+
button:
539+
text: "Need a custom plan?"
540+
url: "/contact"
541+
362542

363543
---

‎layouts/partials/hbx/blocks/pricing/block.html‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
{{/* Hugo Blox: Pricing - Masonry Style with Sourced Button */}}
2+
{{/* Documentation: https://hugoblox.com/blocks/ */}}
3+
{{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}}
4+
5+
{{/* Initialise */}}
6+
{{ $page := .wcPage }}
7+
{{ $block := .wcBlock }}
8+
{{ $title := $block.content.title | emojify | $page.RenderString }}
9+
{{ $text := $block.content.text | emojify | $page.RenderString }}
10+
{{ $blue := $block.content.blue | emojify | $page.RenderString }}
11+
12+
<style>
13+
/* MASONRY LAYOUT STYLES */
14+
.masonry-grid {
15+
display: grid;
16+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
17+
gap: 2rem;
18+
align-items: start; /* Key change: start instead of stretch */
19+
}
20+
21+
@media (min-width: 640px) {
22+
.masonry-grid {
23+
grid-template-columns: repeat(2, 1fr);
24+
gap: 1rem;
25+
}
26+
}
27+
28+
@media (min-width: 768px) {
29+
.masonry-grid {
30+
grid-template-columns: repeat(3, 1fr);
31+
gap: 2rem;
32+
}
33+
}
34+
35+
/* PRICING CARD ENHANCEMENTS */
36+
.pricing-card {
37+
height: fit-content; /* Allow natural height */
38+
transition: transform 0.3s ease, box-shadow 0.3s ease;
39+
}
40+
41+
.pricing-card:hover {
42+
transform: translateY(-4px);
43+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
44+
}
45+
46+
.dark .pricing-card:hover {
47+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
48+
}
49+
</style>
50+
51+
<section>
52+
53+
<div class="mx-auto max-w-7xl mt-0 px-1 lg:px-0 markdown-content">
54+
55+
<!-- Header Section -->
56+
<div class="flex flex-col text-left">
57+
{{ with $blue }}
58+
<p class="mb-2 text-lg md:text-xl tracking-tight uppercase font-semibold text-primary-600 dark:text-primary-300">{{.}}</p>
59+
{{ end }}
60+
<div class="px-1 md:px-6 lg:px-0">
61+
<!-- Red horizontal line above title -->
62+
<div class="w-16 border-2 border-primary-700 mb-4 px-2"></div>
63+
64+
{{ with $title }}
65+
<h2 class="mb-4 text-3xl font-bold text-gray-900 dark:text-white">{{.}}</h2>
66+
{{ end }}</div>
67+
68+
{{ with $text }}
69+
<div class="text-xl text-gray-600 dark:text-gray-300 content-text">{{.}}</div>
70+
{{ end }}
71+
</div>
72+
73+
<!-- Pricing Cards Grid - MASONRY STYLE -->
74+
<div class="masonry-grid">
75+
{{ range $block.content.items }}
76+
<div class="pricing-card flex flex-col rounded-2xl shadow-lg
77+
divide-y divide-gray-200 dark:divide-gray-700
78+
{{ if .featured }}border-2 border-primary-600 dark:border-primary-400 bg-gradient-to-br from-primary-50 to-white dark:from-primary-900/20 dark:to-gray-800{{ else }}border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800{{ end }}">
79+
80+
<!-- Plan Header - Centered Content -->
81+
<div class="p-6 sm:px-8 flex flex-col items-center text-center">
82+
{{ with .icon }}
83+
<div class="mb-4 text-primary-600 dark:text-primary-300" style="width:128px; height:128px;">
84+
{{ partial "functions/get_icon" (dict "name" . "attributes" `class="w-32 h-32"`) }}
85+
</div>
86+
{{ end }}
87+
88+
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">{{ .name | $page.RenderString }}</h2>
89+
{{ with .description }}
90+
<p class="text-xl text-gray-700 dark:text-gray-300 mb-4 max-w-xs">{{ . | $page.RenderString }}</p>
91+
{{ end }}
92+
93+
<p class="flex items-baseline gap-1 text-5xl font-extrabold text-gray-900 dark:text-white">
94+
<span>{{ .price }}</span>
95+
{{ with .period }}
96+
<span class="text-2xl font-normal text-gray-900 dark:text-white">{{ . }}</span>
97+
{{ end }}
98+
</p>
99+
</div>
100+
101+
<!-- Features Section -->
102+
{{ with .features }}
103+
<div class="p-6 sm:px-8 flex-1">
104+
<p class="text-lg font-medium text-gray-900 dark:text-white sm:text-xl mb-4">What's included:</p>
105+
106+
<ul class="space-y-3 sm:mt-0 text-lg">
107+
{{ range . }}
108+
<li class="flex items-center gap-3">
109+
{{ if .included }}
110+
<svg
111+
xmlns="http://www.w3.org/2000/svg"
112+
fill="none"
113+
viewBox="0 0 24 24"
114+
stroke-width="1.5"
115+
stroke="currentColor"
116+
class="w-6 h-6 text-green-600 dark:text-green-400 shadow-sm flex-shrink-0"
117+
>
118+
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
119+
</svg>
120+
{{ else }}
121+
<svg
122+
xmlns="http://www.w3.org/2000/svg"
123+
fill="none"
124+
viewBox="0 0 24 24"
125+
stroke-width="1.5"
126+
stroke="currentColor"
127+
class="w-6 h-6 text-red-500 dark:text-red-400 shadow-sm flex-shrink-0"
128+
>
129+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
130+
</svg>
131+
{{ end }}
132+
133+
<span class="text-gray-700 dark:text-gray-300">{{ .text | $page.RenderString }}</span>
134+
</li>
135+
{{ end }}
136+
</ul>
137+
</div>
138+
{{ end }}
139+
140+
<!-- Button at Bottom -->
141+
{{ with .button }}
142+
<div class="p-6 sm:px-8 mt-auto">
143+
<a
144+
class="block w-full rounded-lg px-12 py-3 text-center text-xl border border-primary-700 font-medium text-primary-700 hover:bg-gradient-to-l focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-800 focus:outline-none transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1"
145+
href="{{ .url }}"
146+
{{ if .target }}target="{{ .target }}"{{ end }}
147+
>
148+
{{ .text }}
149+
</a>
150+
</div>
151+
{{ end }}
152+
</div>
153+
{{ end }}
154+
</div>
155+
156+
<!-- Global CTA Button - SOURCED FROM YOUR CODE -->
157+
{{ with $block.content.button }}
158+
<div class="text-center mt-16">
159+
<a href="{{.url}}"
160+
{{ if .target }}target="{{ .target }}"{{ end }}
161+
class="mt-3 relative inline-flex items-center gap-1 rounded-lg border border-primary-700 bg-white dark:bg-gray-800 px-6 py-2 text-xl font-medium text-primary-700 dark:text-primary-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-200">
162+
{{.text}}
163+
</a>
164+
</div>
165+
{{ end }}
166+
</div>
167+
</section>

0 commit comments

Comments
 (0)