feat: add atom on the website

avneesh0612 · avneesh0612 · commit f4a9247a3d0a · 2022-02-20T08:02:51.000+05:30
diff --git a/web/components/Hero.tsx b/web/components/Hero.tsx
@@ -15,7 +15,7 @@ export default function Hero() {
           <span className="text-[#24D1DC]">Next.js</span> code
         </div>
         <div className="mt-7 text-3xl leading-normal text-gray-400">
-          Use our VSCode and Jetbrains snippets extension
+          Use our VSCode and Atom snippets extension
         </div>
         <div className="mt-8 grid grid-cols-1 gap-5 md:grid-cols-2">
           <a
diff --git a/web/components/Icons.tsx b/web/components/Icons.tsx
@@ -359,92 +359,50 @@ export const VsCodeIcon: FC<Props> = ({ className, ...otherProps }) => {
   )
 }
 
-export const JetBrainsIcon: FC<Props> = ({ className, ...otherProps }) => {
+export const AtomIcon: FC<Props> = ({ className, ...otherProps }) => {
   return (
     <svg
       className={className}
       {...otherProps}
       xmlns="http://www.w3.org/2000/svg"
-      width="80"
+      version="1.1"
+      width="88"
       height="80"
-      viewBox="0 0 180 180"
+      viewBox="0 0 131 120"
     >
-      <linearGradient
-        id="a"
-        x1="32.64"
-        x2="82.77"
-        y1="61.16"
-        y2="85.54"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset=".21" stopColor="#fe2857" />
-        <stop offset="1" stopColor="#293896" />
-      </linearGradient>
-      <linearGradient
-        id="b"
-        x1="17.38"
-        x2="82.95"
-        y1="69.86"
-        y2="21.23"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0" stopColor="#fe2857" />
-        <stop offset=".01" stopColor="#fe2857" />
-        <stop offset=".86" stopColor="#ff318c" />
-      </linearGradient>
-      <linearGradient
-        id="c"
-        x1="74.17"
-        x2="160.27"
-        y1="21.58"
-        y2="99.76"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset=".02" stopColor="#ff318c" />
-        <stop offset=".21" stopColor="#fe2857" />
-        <stop offset=".86" stopColor="#fdb60d" />
-      </linearGradient>
-      <linearGradient
-        id="d"
-        x1="155.46"
-        x2="55.07"
-        y1="89.8"
-        y2="158.9"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset=".01" stopColor="#fdb60d" />
-        <stop offset=".86" stopColor="#fcf84a" />
-      </linearGradient>
       <path
-        fill="url(#a)"
-        d="m81.56 83.71-41.35-35a15 15 0 1 0 -14.47 25.7h.15l.39.12 52.16 15.89a3.53 3.53 0 0 0 1.18.21 3.73 3.73 0 0 0 1.93-6.91z"
+        d="M 103.96875,29.43727 C 106.08143,18.684552 104.89996,10.523975 99.90625,7.2810201 98.241679,6.2000351 96.24602,5.7270015 94,5.8122701 81.871494,6.2727205 62.301679,22.972344 46.3125,47.59352 27.362362,76.774173 20.627996,106.01897 31.28125,112.93727 c 5.056946,3.28402 13.115147,0.95604 22.21875,-5.53125"
+        style={{
+          fill: 'none',
+          stroke: '#66595c',
+          strokeWidth: 5,
+          strokeLinecap: 'round',
+        }}
       />
       <path
-        fill="url(#b)"
-        d="m89.85 25.93a10.89 10.89 0 0 0 -16.85-9.18l-50.5 30.66a15 15 0 1 0 17.9 24l45.27-36.89.36-.3a10.93 10.93 0 0 0 3.82-8.29z"
+        d="m 113.6875,77.15602 c 8.99437,-3.489189 14.52504,-8.265012 14.8125,-13.75 0.6648,-12.685141 -26.94124,-24.429026 -61.6875,-26.25 -3.257461,-0.170716 -6.460588,-0.260544 -9.59375,-0.25 -30.287234,0.101927 -53.9287749,8.410341 -54.53125,19.90625 -0.286892,5.474225 4.7004836,10.782383 13.25,15.1875"
+        style={{
+          fill: 'none',
+          stroke: '#66595c',
+          strokeWidth: 5,
+          strokeLinecap: 'round',
+        }}
       />
       <path
-        fill="url(#c)"
-        d="m163.29 92-76.62-73.79a10.91 10.91 0 1 0 -14.81 16l.14.12 81.4 68.58a7.36 7.36 0 0 0 12.09-5.65 7.39 7.39 0 0 0 -2.2-5.26z"
+        d="M 57,10.53102 C 50.846125,5.4251295 45.074552,2.683237 40.4375,3.0310201 39.20289,3.123617 38.061068,3.4278792 37,3.9685201 25.681946,9.7353567 29.297632,39.560643 45.09375,70.56227 c 15.796118,31.00163 37.775696,51.45434 49.09375,45.6875 10.8844,-5.54588 7.94666,-33.337754 -6.34375,-63.03125"
+        style={{
+          fill: 'none',
+          stroke: '#66595c',
+          strokeWidth: 5,
+          strokeLinecap: 'round',
+        }}
       />
       <path
-        fill="url(#d)"
-        d="m165.5 97.29a7.35 7.35 0 0 0 -11.67-6l-92.71 45.3a15 15 0 1 0 15.48 25.59l85.73-58.84a7.35 7.35 0 0 0 3.17-6.05z"
+        d="m 73.5,61 a 7.5,7.5 0 0 1 -15,0 7.5,7.5 0 1 1 15,0 z"
+        style={{
+          stroke: '#66595c',
+        }}
       />
-      <path d="m60 60h60v60h-60z" />
-      <g fill="#fff">
-        <path d="m66.53 108.75h22.5v3.75h-22.5z" />
-        <path d="m65.59 75.47 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.45 1.06-1.32v-5.92h2.58v5.94a3.44 3.44 0 0 1 -.92 2.63 3.52 3.52 0 0 1 -2.57 1 3.84 3.84 0 0 1 -3.29-1.62z" />
-        <path d="m73.53 67.52h7.53v2.19h-5v1.43h4.49v2h-4.45v1.49h5v2.2h-7.6z" />
-        <path d="m84.73 69.79h-2.8v-2.27h8.21v2.27h-2.81v7.09h-2.6z" />
-        <path d="m66.63 80.58h4.42a3.47 3.47 0 0 1 2.55.83 2.09 2.09 0 0 1 .61 1.52 2.18 2.18 0 0 1 -1.45 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.69-1.31 2.69-3.55 2.69h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.25c.78 0 1.24-.27 1.24-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31 1.24-.86-.02-.53-.4-.87-1.27-.87z" />
-        <path d="m75.45 80.58h4.15a4.14 4.14 0 0 1 3.05 1 2.92 2.92 0 0 1 .83 2.18 3 3 0 0 1 -1.93 2.89l2.24 3.35h-3l-1.89-2.84h-.87v2.84h-2.6zm4 4.5c.87 0 1.4-.43 1.4-1.12 0-.75-.55-1.13-1.41-1.13h-1.39v2.27z" />
-        <path d="m87.09 80.51h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.74h-2.71zm2.28 5.73-1.05-2.65-1.06 2.65z" />
-        <path d="m94 80.55h2.6v9.37h-2.6z" />
-        <path d="m97.56 80.55h2.44l3.37 5v-5h2.57v9.37h-2.27l-3.53-5.14v5.14h-2.58z" />
-        <path d="m106.37 88.53 1.44-1.73a4.86 4.86 0 0 0 3 1.13c.71 0 1.08-.25 1.08-.65 0-.41-.3-.61-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.38-3 3.63-3a5.88 5.88 0 0 1 3.85 1.25l-1.25 1.78a4.56 4.56 0 0 0 -2.62-.92c-.63 0-.94.25-.94.6 0 .43.32.62 1.63.91 2.15.47 3.48 1.17 3.48 2.92 0 1.91-1.51 3-3.78 3a6.56 6.56 0 0 1 -4.4-1.45z" />
-      </g>
-      <path fill="none" d="m0 0h180v180h-180z" />
     </svg>
   )
 }
diff --git a/web/components/Installation.tsx b/web/components/Installation.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { JetBrainsIcon, VsCodeIcon } from './Icons'
+import { AtomIcon, VsCodeIcon } from './Icons'
 import InstallCard from './InstallCard'
 
 const Installation: FC = () => {
@@ -13,15 +13,15 @@ const Installation: FC = () => {
       <div className="mt-28 grid w-full max-w-4xl grid-cols-1 gap-10">
         <InstallCard
           Icon={VsCodeIcon}
-          enabled={true}
           link="https://marketplace.visualstudio.com/items?itemName=AvneeshAgarwal.react-nextjs-snippets"
           name="Visual Studio Code"
+          enabled
         />
         <InstallCard
-          Icon={JetBrainsIcon}
-          enabled={false}
-          link="#"
-          name="Jetbrains IDE"
+          Icon={AtomIcon}
+          link="https://atom.io/packages/react-nextjs-snippets"
+          name="Atom text editor"
+          enabled
         />
       </div>
     </div>
