gradient text

Author: brettstack

src/components/Features1.jsx

@@ -21,9 +21,11 @@ export const Features1 = () => {
       >
         <div className="w-11/12 xl:w-10/12 2xl:w-[1280px] mx-auto md:pl-4 xl:pr-16 xl:pl-16">
           <div className="w-full xl:w-2/3 mb-12 lg:mb-0">
-            <span className="custom-block-subtitle">Kickstart innovation</span>
-            <h2 className="mt-6 mb-8 text-4xl lg:text-5xl custom-block-big-title">
-              🚀 A solid foundation tailored to your requirements
+            <span className="custom-block-subtitle">
+              🚀 Kickstart innovation
+            </span>
+            <h2 className="gradient-text mt-6 mb-8 text-4xl lg:text-5xl custom-block-big-title">
+              A solid foundation tailored to your requirements
             </h2>
             <p className="mb-10 text-customGrayText leading-loose">
               Code Genie takes care of the undifferentiated heavy lifting so

src/components/Features2.jsx

@@ -20,10 +20,10 @@ export const Features2 = () => (
         <div className="w-full flex justify-end mb-8">
           <div className="w-full xl:w-2/3 lg:mb-0">
             <span className="custom-block-subtitle">
-              Superb Developer Experience
+              🧑‍💻 Superb Developer Experience
             </span>
-            <h2 className="mt-6 mb-8 text-4xl md:text-5xl custom-block-big-title">
-              🧑‍💻 Technology that devs know and love
+            <h2 className="gradient-text mt-6 mb-8 text-4xl md:text-5xl custom-block-big-title">
+              Technology that devs know and love
             </h2>
             <p className="text-customGrayText leading-loose">
               Code Genie generates source code written in languages and

src/components/Features3.jsx

@@ -20,10 +20,10 @@ export const Features3 = () => {
         <div className="w-11/12 xl:w-10/12 2xl:w-[1280px] mx-auto md:pl-4 xl:pr-16 xl:pl-16">
           <div className="w-full xl:w-2/3 mb-12 lg:mb-0">
             <span className="custom-block-subtitle">
-              Scale from zero to infinity
+              ☁️ Scale from zero to infinity
             </span>
-            <h2 className="mt-6 mb-8 text-4xl lg:text-5xl custom-block-big-title">
-              ☁️ Backed by AWS Cloud Native, Serverless Services
+            <h2 className="gradient-text mt-6 mb-8 text-4xl lg:text-5xl custom-block-big-title">
+              Backed by AWS Cloud Native, Serverless Services
             </h2>
             <p className="mb-10 text-customGrayText leading-loose">
               Code Genie leverages the power of AWS to provide infinitely

src/components/FeaturesDiagonal.jsx

@@ -30,8 +30,8 @@ export const FeaturesDiagonal = ({ children }) => {
       >
         <div className=" 2xl:w-[1150px] xl:w-[1050px]  md:w-4/5 flex justify-center bg-customDarkBg1 pt-12 lg:pt-24 pb-8 lg:pb-20 mx-auto lg:flex-row flex-col">
           <div className="w-3/4 lg:w-1/2 flex flex-col lg:mx-unset mx-auto">
-            <span className="custom-block-subtitle">Built for you</span>
-            <h2 className="mt-10 mb-8 text-4xl lg:text-5xl custom-block-big-title">
+            <span className="custom-block-subtitle">🏗️ Built for you</span>
+            <h2 className="gradient-text mt-10 mb-8 text-4xl lg:text-5xl custom-block-big-title">
               Relevant source code based on your data model or idea
             </h2>
             <p className="mb-16 text-customGrayText leading-loose">

src/components/Hero.jsx

@@ -28,10 +28,12 @@ export const Hero = () => {
           transition={{ duration: 0.5, delay: 0.05 }}
         >
           <div className="text-5xl sm:text-6xl lg:text-7xl xl:text-7xl font-bold tracking-wide text-white px-8 sm:px-8 md:px-20 lg:px-4">
-            <span className="inline md:hidden">No-code</span>
-            <span className="hidden md:inline">No-code/Low-code</span>
+            <span className="inline md:hidden gradient-text">No-code</span>
+            <span className="hidden md:inline gradient-text">
+              No-code/Low-code
+            </span>
           </div>
-          <div className="mt-2 sm:mt-2 text-4xl sm:text-6xl lg:text-7xl xl:text-7xl font-bold tracking-wide text-white px-8 sm:px-20 md:px-24 lg:px-24">
+          <div className="gradient-text mt-2 sm:mt-2 text-4xl sm:text-6xl lg:text-7xl xl:text-7xl font-bold tracking-wide text-white px-8 sm:px-20 md:px-24 lg:px-24">
             for developers
           </div>
           {/* <div className="text-5xl sm:text-6xl lg:text-7xl xl:text-7xl font-bold tracking-wide text-white px-8 sm:px-8 md:px-20 lg:px-4">

src/components/Pricing.jsx

@@ -32,23 +32,23 @@ export const Pricing = () => {
         >
           <div className="container mx-auto px-4">
             <div className="max-w-2xl mx-auto text-center mb-16">
-              <span className="custom-block-subtitle">Get in touch</span>
-              <h2 className="mt-6 mb-6 text-4xl lg:text-5xl font-bold font-heading text-white">
+              <span className="custom-block-subtitle">📧 Get in touch</span>
+              <h2 className="gradient-text mt-6 mb-6 text-4xl lg:text-5xl font-bold font-heading text-white">
                 Custom pricing available now
               </h2>
               <p className="mb-6 text-customGrayText">
-                Code Genie is not yet generally available and we're currently
+                Code Genie is not yet generally available. We're currently
                 working closely with partners to jumpstart the development of
                 their new software projects. We're also offering free builds for
                 some Nonprofits.{' '}
                 <a href="mailto:[email protected]">
-                  Shoot us an email to schedule a demo
+                  Contact us to schedule a demo
                 </a>
                 .
               </p>
               <div className="flex justify-center">
                 <div
-                  className="w-[210px] h-12 custom-button-colored mr-10 "
+                  className="h-12 custom-button-colored"
                   onClick={() =>
                     window.open(
                       'mailto:[email protected]?subject=Code Genie Demo'

src/styles/Theme.css

@@ -62,5 +62,12 @@ html {
 }
 
 a:not(.unstyled) {
-  @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600
+  @apply underline text-blue-600 hover:text-blue-400
+}
+
+.gradient-text {
+  -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(132deg, #185a9d, #43cea2);
+    -webkit-background-clip: text;
+    background-clip: text;
 }

tailwind.config.cjs

@@ -4,8 +4,8 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        customPrimary: "rgb(34, 136, 221)",
-        customSecondary: "rgb(16, 225, 183)",
+        customPrimary: "rgb(34, 136, 221)", //#579ddd
+        customSecondary: "rgb(16, 225, 183)", //#10e1b8
         customDarkBg1: "rgb(31, 32, 35)",
         customDarkBg2: "rgb(38, 39, 43)",
         customDarkBg3: "rgb(48, 49, 54)",