mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-01-11 19:56:44 +00:00
Refactor demo page: integrate reviews section and remove testimonials view for improved layout and content management
This commit is contained in:
parent
5e04a8c13c
commit
8d1fe98c17
3 changed files with 6 additions and 142 deletions
|
|
@ -952,6 +952,7 @@ const HomeFeatureSet: FeatureSet = {
|
|||
"/enterprise/demo",
|
||||
res.locals["homeUrl"] as string,
|
||||
);
|
||||
const { reviewsList1, reviewsList2, reviewsList3 } = Reviews;
|
||||
res.render(`${ViewsPath}/demo`, {
|
||||
support: false,
|
||||
enableGoogleTagManager: IsBillingEnabled,
|
||||
|
|
@ -960,6 +961,9 @@ const HomeFeatureSet: FeatureSet = {
|
|||
blackLogo: true,
|
||||
requestDemoCta: false,
|
||||
seo,
|
||||
reviewsList1,
|
||||
reviewsList2,
|
||||
reviewsList3,
|
||||
});
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -401,61 +401,8 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section class="py-16 sm:py-20 lg:py-28 bg-gray-50 border-t border-gray-100">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="max-w-2xl mb-10 sm:mb-16">
|
||||
<h2 class="text-2xl sm:text-3xl font-semibold tracking-tight text-gray-900">
|
||||
What our customers say
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
|
||||
<div class="bg-white rounded-xl p-5 sm:p-8 border border-gray-200">
|
||||
<blockquote>
|
||||
<p class="text-sm sm:text-base text-gray-700 leading-relaxed">
|
||||
"OneUptime replaced three separate tools for us. Having everything unified has cut our incident response time in half and saved us over $50k annually."
|
||||
</p>
|
||||
</blockquote>
|
||||
<div class="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-gray-100">
|
||||
<p class="font-medium text-gray-900 text-sm sm:text-base">Engineering Lead</p>
|
||||
<p class="text-xs sm:text-sm text-gray-500">Fortune 500 Technology Company</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-5 sm:p-8 border border-gray-200">
|
||||
<blockquote>
|
||||
<p class="text-sm sm:text-base text-gray-700 leading-relaxed">
|
||||
"The AI copilot is a game changer. It automatically fixed a memory leak that had been plaguing us for weeks. Just created a PR and we merged it."
|
||||
</p>
|
||||
</blockquote>
|
||||
<div class="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-gray-100">
|
||||
<p class="font-medium text-gray-900 text-sm sm:text-base">Senior SRE</p>
|
||||
<p class="text-xs sm:text-sm text-gray-500">Series B Startup</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-5 sm:p-8 border border-gray-200">
|
||||
<blockquote>
|
||||
<p class="text-sm sm:text-base text-gray-700 leading-relaxed">
|
||||
"We self-host OneUptime in our private cloud. Having full control over our observability data while getting enterprise features is exactly what we needed."
|
||||
</p>
|
||||
</blockquote>
|
||||
<div class="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-gray-100">
|
||||
<p class="font-medium text-gray-900 text-sm sm:text-base">VP of Engineering</p>
|
||||
<p class="text-xs sm:text-sm text-gray-500">Healthcare SaaS Company</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-10 text-center text-sm text-gray-500 flex items-center justify-center gap-2">
|
||||
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"></path>
|
||||
</svg>
|
||||
Want to speak with one of our customers? <a href="mailto:sales@oneuptime.com" class="text-gray-600 hover:text-gray-700 font-medium">Contact us</a> to arrange a reference call.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Reviews -->
|
||||
<%- include('./Partials/reviews') -%>
|
||||
|
||||
<!-- Security & Compliance -->
|
||||
<section class="py-16 sm:py-24 lg:py-32 border-t border-gray-100 relative overflow-hidden">
|
||||
|
|
|
|||
|
|
@ -1,87 +0,0 @@
|
|||
<style>
|
||||
.testimonial-card {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.testimonial-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.testimonial-glow-emerald:hover {
|
||||
box-shadow: 0 0 0 1px rgb(16 185 129 / 0.2), 0 8px 24px -4px rgb(16 185 129 / 0.15), 0 0 32px -8px rgb(16 185 129 / 0.1);
|
||||
}
|
||||
.testimonial-glow-blue:hover {
|
||||
box-shadow: 0 0 0 1px rgb(59 130 246 / 0.2), 0 8px 24px -4px rgb(59 130 246 / 0.15), 0 0 32px -8px rgb(59 130 246 / 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="relative py-24 sm:py-32 overflow-hidden">
|
||||
<!-- Subtle grid pattern background - matching hero section -->
|
||||
<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_50%,#000_40%,transparent_100%)]"></div>
|
||||
|
||||
<!-- Background decoration blobs -->
|
||||
<div class="absolute inset-0 -z-10">
|
||||
<div class="absolute top-0 right-1/4 w-64 h-64 bg-emerald-100/40 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 left-1/4 w-64 h-64 bg-blue-100/40 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<!-- G2 Crowd Review - Emerald -->
|
||||
<div class="testimonial-card testimonial-glow-emerald bg-white rounded-2xl p-8 ring-1 ring-gray-200 hover:ring-emerald-200">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<span class="flex items-center justify-center w-10 h-10 rounded-full bg-emerald-50 ring-1 ring-emerald-200">
|
||||
<svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
|
||||
</svg>
|
||||
</span>
|
||||
<img class="h-8" src="/img/g2.svg" alt="G2 Crowd">
|
||||
</div>
|
||||
<blockquote class="flex flex-col flex-grow">
|
||||
<div class="relative text-lg text-gray-700 flex-grow">
|
||||
<svg class="absolute -top-2 -left-2 h-8 w-8 text-emerald-100" 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" />
|
||||
</svg>
|
||||
<p class="relative pl-6">Status Page looks stellar. Alerting of specific team members by SMS, Call and Email during performance degradation or downtime works perfectly well.</p>
|
||||
</div>
|
||||
<footer class="mt-8 pt-6 border-t border-gray-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 text-white font-semibold text-sm ring-2 ring-white shadow-sm">KA</span>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Kumar Abhishek</div>
|
||||
<div class="text-xs text-gray-500">Review on G2 Crowd</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<!-- AlternativeTo Review - Blue -->
|
||||
<div class="testimonial-card testimonial-glow-blue bg-white rounded-2xl p-8 ring-1 ring-gray-200 hover:ring-blue-200">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<span class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-50 ring-1 ring-blue-200">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
|
||||
</svg>
|
||||
</span>
|
||||
<img class="h-16" src="/img/alternative.svg" alt="AlternativeTo">
|
||||
</div>
|
||||
<blockquote class="flex flex-col flex-grow">
|
||||
<div class="relative text-lg text-gray-700 flex-grow">
|
||||
<svg class="absolute -top-2 -left-2 h-8 w-8 text-blue-100" 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" />
|
||||
</svg>
|
||||
<p class="relative pl-6">OneUptime combines multiple vendors into one platform. No more integrating multiple platforms, dealing with multiple support teams, etc. One platform, one source of truth for our team.</p>
|
||||
</div>
|
||||
<footer class="mt-8 pt-6 border-t border-gray-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 text-white font-semibold text-sm ring-2 ring-white shadow-sm">MA</span>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">Mikah Akpan</div>
|
||||
<div class="text-xs text-gray-500">Reviewer on AlternativeTo</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Loading…
Add table
Reference in a new issue