-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* page done * add floating card * Enhance SigNoz vs New Relic comparison page with improved metadata and SEO optimizations. Updated page title and description, added Open Graph and Twitter card data, and included relevant keywords. Adjusted internal link paths for better navigation. * change floating card to bottom of the div to avoid h1 seo heading issue * build * updated theme to be consistent in all three pages
- Loading branch information
1 parent
c0b8995
commit bd3f755
Showing
13 changed files
with
5,462 additions
and
3,623 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1,706 changes: 1,706 additions & 0 deletions
1,706
app/product-comparison/signoz-vs-newrelic/SigNozVsNewRelicV2.tsx
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,53 @@ | ||
| import SigNozVSNewRelic from './SigNozVsNewRelic' | ||
|
|
||
| import SigNozVSNewRelicV2 from './SigNozVsNewRelicV2' | ||
| import siteMetadata from '../../../data/siteMetadata' | ||
| import { Metadata } from 'next' | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: 'SigNoz VS New Relic', | ||
| title: 'In Depth - SigNoz vs New Relic', | ||
| description: | ||
| 'How is SigNoz a great alternative to New Relic? Learn where SigNoz is a better fit for your use cases when compared to New Relic.', | ||
| openGraph: { | ||
| title: 'In Depth - SigNoz vs New Relic', | ||
| description: | ||
| 'How is SigNoz a great alternative to New Relic? Learn where SigNoz is a better fit for your use cases when compared to New Relic.', | ||
| images: [ | ||
| { | ||
| url: '/img/product-comparisons/signoz-vs-datadog/messaging-queue-monitoring-otel.webp', | ||
| width: 800, | ||
| height: 400, | ||
| alt: 'SigNoz vs New Relic Comparison', | ||
| }, | ||
| ], | ||
| type: 'website', | ||
| url: `${siteMetadata.siteUrl}/product-comparison/signoz-vs-newrelic`, | ||
| siteName: siteMetadata.title, | ||
| } as const, | ||
| twitter: { | ||
| card: 'summary_large_image', | ||
| title: 'In Depth - SigNoz vs New Relic | SigNoz', | ||
| description: | ||
| 'How is SigNoz a great alternative to New Relic? Learn where SigNoz is a better fit for your use cases when compared to New Relic.', | ||
| images: ['/img/product-comparisons/signoz-vs-datadog/messaging-queue-monitoring-otel.webp'], | ||
| site: siteMetadata.twitter, | ||
| } as const, | ||
| keywords: [ | ||
| 'SigNoz vs New Relic', | ||
| 'New Relic alternative', | ||
| 'open source New Relic alternative', | ||
| 'New Relic comparison', | ||
| 'observability platform', | ||
| 'application monitoring', | ||
| 'OpenTelemetry', | ||
| 'APM', | ||
| 'application performance monitoring', | ||
| 'SigNoz', | ||
| ], | ||
| robots: { | ||
| index: true, | ||
| follow: true, | ||
| }, | ||
| } | ||
|
|
||
| export default function SigNozVSNewRelicPage() { | ||
| return <SigNozVSNewRelic /> | ||
| } | ||
| return <SigNozVSNewRelicV2 /> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
87 changes: 87 additions & 0 deletions
87
components/MigrationFloatingCard/NewrelicMigrationFloatingCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| 'use client' | ||
|
|
||
| import React, { useState, useEffect } from 'react' | ||
| import Link from 'next/link' | ||
| import { ArrowRight, X } from 'lucide-react' | ||
| import Button from '@/components/Button/Button' | ||
|
|
||
| const NewrelicMigrationFloatingCard: React.FC = () => { | ||
| const [isVisible, setIsVisible] = useState(false) | ||
| const [isClosed, setIsClosed] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| const cardClosed = localStorage.getItem('newrelicMigrationCardClosed') | ||
| if (cardClosed) { | ||
| setIsClosed(true) | ||
| } | ||
| }, []) | ||
|
|
||
| useEffect(() => { | ||
| const handleScroll = () => { | ||
| const scrollPosition = window.scrollY | ||
| const windowHeight = window.innerHeight | ||
| const documentHeight = document.documentElement.scrollHeight | ||
|
|
||
| // Show when past 20% of page | ||
| const showThreshold = documentHeight * 0.15 | ||
|
|
||
| // Hide when near the bottom section (adjust 800px based on your needs) | ||
| const hideThreshold = documentHeight - windowHeight - 800 | ||
|
|
||
| if (scrollPosition > showThreshold && scrollPosition < hideThreshold) { | ||
| setIsVisible(true) | ||
| } else { | ||
| setIsVisible(false) | ||
| } | ||
| } | ||
|
|
||
| window.addEventListener('scroll', handleScroll) | ||
| return () => window.removeEventListener('scroll', handleScroll) | ||
| }, []) | ||
|
|
||
| const handleClose = () => { | ||
| setIsClosed(true) | ||
| localStorage.setItem('newrelicMigrationCardClosed', 'true') | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| className={`fixed bottom-6 right-6 z-50 hidden w-64 transform rounded-lg bg-gradient-to-r from-blue-900/90 to-purple-900/90 p-4 shadow-lg backdrop-blur-sm transition-all duration-500 ease-in-out hover:-translate-y-1 hover:shadow-xl lg:block ${ | ||
| isVisible && !isClosed | ||
| ? 'translate-y-0 opacity-100' | ||
| : 'pointer-events-none translate-y-8 opacity-0' | ||
| }`} | ||
| > | ||
| <button | ||
| onClick={handleClose} | ||
| className="absolute right-2 top-2 text-gray-400 hover:text-white" | ||
| aria-label="Close" | ||
| > | ||
| <X size={14} /> | ||
| </button> | ||
|
|
||
| <h3 className="mb-2 text-lg font-bold text-white">Save up to 67% on your New Relic bill</h3> | ||
| <p className="mb-3 text-xs text-gray-300"> | ||
| We provide migration support if your monthly New Relic bill is over $1000. Get started with | ||
| SigNoz quickly. | ||
| </p> | ||
| <div className="flex flex-col gap-2"> | ||
| <Link href="/teams/" className="w-full"> | ||
| <Button className="flex w-full items-center justify-center gap-1 text-xs font-bold"> | ||
| Try SigNoz - Free <ArrowRight className="h-3 w-3" /> | ||
| </Button> | ||
| </Link> | ||
| <Link href="/product-comparison/migrate-from-newrelic/" className="w-full"> | ||
| <Button | ||
| type={Button.TYPES.SECONDARY} | ||
| className="flex w-full items-center justify-center gap-1 text-xs font-bold" | ||
| > | ||
| Request Migration Support <ArrowRight className="h-3 w-3" /> | ||
| </Button> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default NewrelicMigrationFloatingCard |
Oops, something went wrong.