refactor: Resolves comments

sourcegraph · Apr 26, 2024 · 6c8e0ac · 6c8e0ac
1 parent 2bd3178
commit 6c8e0ac
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 70 deletions.
diff --git a/src/components/Code-search/CodeSearchCard.tsx b/src/components/Code-search/CodeSearchCard.tsx
@@ -0,0 +1,59 @@
+import { FunctionComponent } from 'react'
+
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon'
+import Link from 'next/link'
+
+import { ContentSection } from '../ContentSection'
+import { Heading } from '../Heading'
+
+export const CodeSearchCard: FunctionComponent = () => (
+    <ContentSection
+        id="contact-form"
+        parentClassName="!py-24"
+        className="mx-auto flex flex-col gap-6 md:flex-row lg:pl-6"
+    >
+        <div className="sg-bg-code-search-new-cta hover:cta-free-cody relative overflow-hidden rounded-2xl border border-gray-200 border-opacity-25 !px-14 py-16 md:w-1/2 md:p-16">
+            <div className="bg-grad absolute right-0 top-0 h-[3px] w-full flex-1 bg-gradient-to-r from-blue-300 via-violet-400 to-vermillion-300" />
+            <Heading size="h2" className="text-5xl !leading-10 !tracking-[-1px] text-white">
+                Code Search Enterprise
+            </Heading>
+            <Heading
+                size="h3"
+                className="py-4 !text-[18px] !leading-[27px] !tracking-[-0.25px] text-white text-opacity-80"
+            >
+                Get Code Search for your team’s entire private codebase. Contact us for a demo or to get started with a
+                free trial.
+            </Heading>
+            <div className="flex max-w-[356px] flex-col flex-wrap gap-4 pt-4 sm:flex-row">
+                <Link href="/demo" className="btn btn-primary max-w-[216px]">
+                    Contact us for a demo
+                </Link>
+                <Link
+                    href="/pricing?product=codeSearch"
+                    className="flex items-center justify-start gap-[10px] whitespace-nowrap font-semibold text-white hover:text-violet-300 hover:underline"
+                >
+                    See pricing <ChevronRightIcon />
+                </Link>
+            </div>
+        </div>
+        <div className="hover:cta-free-cody !md:px-14 relative overflow-hidden rounded-2xl border border-opacity-25 bg-white p-4 md:w-1/2 md:p-16">
+            <Heading size="h2" className="!text-5xl !leading-10 !tracking-[-1px]">
+                Try our public Code Search environment
+            </Heading>
+
+            <Heading size="h3" className="mt-4 !text-[18px] !leading-[27px] !tracking-[-0.25px] text-gray-500">
+                See how Code Search works with our public search environment, offering the same search and navigation
+                features as Code Search Enterprise. Search an index of than 2 million public repositories.
+            </Heading>
+            <div className="mt-6 flex w-fit flex-wrap justify-center gap-2 md:flex-row md:gap-8">
+                <Link
+                    href="https://sourcegraph.com/search"
+                    title="Get Cody free"
+                    className="btn btn-primary w-[173px] text-center xs:w-fit"
+                >
+                    Try Code Search
+                </Link>
+            </div>
+        </div>
+    </ContentSection>
+)
diff --git a/src/components/Compare/CompareTables.tsx b/src/components/Compare/CompareTables.tsx
@@ -35,7 +35,7 @@ export const CompareTables: FunctionComponent<CompareTableProps> = ({
                     <Table key={data.selection}>
                         <thead>
                             <tr>
-                                <th className="w-1/2 border-0 text-left text-base font-semibold xs:text-base">
+                                <th className="w-1/2 border-0 text-left text-base !font-semibold xs:text-base">
                                     {data.selection}
                                 </th>
                                 <th className="text w-1/4 border-0 text-base !font-semibold !tracking-normal xs:text-base">

diff --git a/src/pages/code-search.tsx b/src/pages/code-search.tsx
@@ -4,6 +4,7 @@ import ChevronRightIcon from 'mdi-react/ChevronRightIcon'
 import Link from 'next/link'
 
 import { ContentSection, Layout, TwoColumnSection, Heading, Video, InfiniteCarousel } from '../components'
+import { CodeSearchCard } from '../components/Code-search/CodeSearchCard'
 
 export const carouselImages = [
     { src: '/home/carousel/1password-logo.svg', className: 'w-[208px] h-[40px] mx-6' },
@@ -307,57 +308,7 @@ export const CodeSearchPage: FunctionComponent = () => (
                 ))}
             </div>
         </ContentSection>
-
-        <ContentSection
-            id="contact-form"
-            parentClassName="!py-24"
-            className="mx-auto flex flex-col gap-6 md:flex-row lg:pl-6"
-        >
-            <div className="sg-bg-code-search-new-cta hover:cta-free-cody relative overflow-hidden rounded-2xl border border-gray-200 border-opacity-25 !px-14 py-16 md:w-1/2 md:p-16">
-                <div className="bg-grad absolute right-0 top-0 h-[3px] w-full flex-1 bg-gradient-to-r from-blue-300 via-violet-400 to-vermillion-300" />
-                <Heading size="h2" className="text-5xl !leading-10 !tracking-[-1px] text-white">
-                    Code Search Enterprise
-                </Heading>
-                <Heading
-                    size="h3"
-                    className="py-4 !text-[18px] !leading-[27px] !tracking-[-0.25px] text-white text-opacity-80"
-                >
-                    Get Code Search for your team’s entire private codebase. Contact us for a demo or to get started
-                    with a free trial.
-                </Heading>
-                <div className="flex max-w-[356px] flex-col flex-wrap gap-4 pt-4 sm:flex-row">
-                    <Link href="/demo" className="btn btn-primary max-w-[216px]">
-                        Contact us for a demo
-                    </Link>
-                    <Link
-                        href="/pricing?product=codeSearch"
-                        className="flex items-center justify-start gap-[10px] whitespace-nowrap font-semibold text-white hover:text-violet-300 hover:underline"
-                    >
-                        See pricing <ChevronRightIcon />
-                    </Link>
-                </div>
-            </div>
-            <div className="hover:cta-free-cody !md:px-14 relative overflow-hidden rounded-2xl border border-opacity-25 bg-white p-4 md:w-1/2 md:p-16">
-                <Heading size="h2" className="!text-5xl !leading-10 !tracking-[-1px]">
-                    Try our public Code Search environment
-                </Heading>
-
-                <Heading size="h3" className="mt-4 !text-[18px] !leading-[27px] !tracking-[-0.25px] text-gray-500">
-                    See how Code Search works with our public search environment, offering the same search and
-                    navigation features as Code Search Enterprise. Search an index of than 2 million public
-                    repositories.
-                </Heading>
-                <div className="mt-6 flex w-fit flex-wrap justify-center gap-2 md:flex-row md:gap-8">
-                    <Link
-                        href="https://sourcegraph.com/search"
-                        title="Get Cody free"
-                        className="btn btn-primary w-[173px] text-center xs:w-fit"
-                    >
-                        Try Code Search
-                    </Link>
-                </div>
-            </div>
-        </ContentSection>
+        <CodeSearchCard />
     </Layout>
 )
 

diff --git a/src/pages/compare/github-vs-code-search.tsx b/src/pages/compare/github-vs-code-search.tsx
@@ -1,11 +1,10 @@
 import { FunctionComponent } from 'react'
 
 import { Layout } from '../../components'
+import { CodeSearchCard } from '../../components/Code-search/CodeSearchCard'
 import CompareHero from '../../components/Compare/CompareHero'
 import { CompareTables } from '../../components/Compare/CompareTables'
 import { githubVsCodeSearch } from '../../components/Compare/constants'
-import { OtherComparisons } from '../../components/Compare/OtherComparisons'
-import { CodyCallToActionContentSection } from '../../components/cta/CodyCallToActionContentSection'
 
 const GithubVsCodeSearch: FunctionComponent = () => (
     <Layout
@@ -15,11 +14,11 @@ const GithubVsCodeSearch: FunctionComponent = () => (
         }}
         hero={
             <CompareHero
-                title="Sourcegraph Code Search vs GitHub code search"
-                competitorDescription="GitHub Copilot Logo"
-                competitorIcon="/assets/compare/github-code-search.svg"
-                defaultIcon="/assets/compare/sourcegraph-code-search.svg"
-                defaultIconDescription="Sourcegraph Cody Logo"
+                title='Sourcegraph Code Search vs GitHub code search'
+                competitorDescription='GitHub Copilot Logo'
+                competitorIcon='/assets/compare/github-code-search.svg'
+                defaultIcon='/assets/compare/sourcegraph-code-search.svg'
+                defaultIconDescription='Sourcegraph Cody Logo'
                 useCustomImage={true}
             >
                 <p>
@@ -37,7 +36,7 @@ const GithubVsCodeSearch: FunctionComponent = () => (
                 </p>
 
                 <p>
-                    <strong className="inline-block rounded-sm bg-blue-100 px-2 py-1 text-blue-500">TL;DR:</strong>{' '}
+                    <strong className='inline-block rounded-sm bg-blue-100 px-2 py-1 text-blue-500'>TL;DR:</strong>{' '}
                     GitHub code search is a good choice for individuals or small teams operating with a small codebase
                     looking to find code, issues, or pull requests with simple search queries. Sourcegraph Code Search
                     is a better option for organizations with a large number of repositories or a large and complex
@@ -49,16 +48,8 @@ const GithubVsCodeSearch: FunctionComponent = () => (
             </CompareHero>
         }
     >
-        <CompareTables compareData={githubVsCodeSearch} firstChoiceTitle="Sourcegraph Code Search" />
-
-        <CodyCallToActionContentSection
-            title="Get Cody, the AI coding assistant"
-            description="Cody makes it easy to write, fix, and maintain code."
-            cta1={{ text: 'Try Cody for free', ctaStyle: 'primaryButtonWhite', link: '/cody' }}
-            cta2={{ text: 'See enterprise pricing', ctaStyle: 'link', link: '/cody/pricing' }}
-        />
-
-        <OtherComparisons />
+        <CompareTables compareData={githubVsCodeSearch} firstChoiceTitle='Sourcegraph Code Search' />
+        <CodeSearchCard />
     </Layout>
 )