chore: Add feature pages

apps/landing/src/pages/features/segments.tsx

@@ -123,10 +123,10 @@ export default function SegmentsFeature() {
               <span className={'font-medium text-neutral-600'}>Audience Segmentation</span>
             </div>
 
-            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
-              Target the Right
+            <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
+              Target the Right Audience,
               <br />
-              Audience Every Time
+              Every Time
             </h1>
             <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
               Organize contacts into dynamic segments based on behavior, attributes, and engagement. Send targeted
@@ -169,10 +169,10 @@ export default function SegmentsFeature() {
             transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
             className={'mb-16 text-center'}
           >
-            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
-              Powerful segmentation tools
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              The right message to the right person
             </h2>
-            <p className={'mt-4 text-lg text-neutral-600'}>Everything you need to organize and target your audience</p>
+            <p className={'mt-4 text-lg text-neutral-600'}>Build precise audiences and send campaigns that land</p>
           </motion.div>
 
           <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
@@ -208,7 +208,7 @@ export default function SegmentsFeature() {
             transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
             className={'mb-16 text-center'}
           >
-            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
               Flexible filtering options
             </h2>
             <p className={'mt-4 text-lg text-neutral-600'}>Build complex segments with nested AND/OR logic</p>
@@ -252,7 +252,7 @@ export default function SegmentsFeature() {
             transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
             className={'mx-auto max-w-4xl text-center'}
           >
-            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>Two types of segments</h2>
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>Two types of segments</h2>
             <p className={'mt-6 text-lg text-neutral-600'}>Choose between dynamic filtering or manual curation</p>
           </motion.div>
 
@@ -331,7 +331,7 @@ export default function SegmentsFeature() {
             transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
             className={'mb-16 text-center'}
           >
-            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
               Use segments everywhere
             </h2>
             <p className={'mt-4 text-lg text-neutral-600'}>From targeted campaigns to automated workflows</p>
@@ -366,7 +366,12 @@ export default function SegmentsFeature() {
         </section>
 
         {/* CTA Section */}
-        <section className={'border-t border-neutral-200 py-20'}>
+        <section className={'relative overflow-hidden border-t border-neutral-200 py-20'}>
+          <div
+            className={
+              'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_100%,#000_70%,transparent_110%)]'
+            }
+          />
           <motion.div
             initial={{opacity: 0, y: 20}}
             whileInView={{opacity: 1, y: 0}}
@@ -374,11 +379,11 @@ export default function SegmentsFeature() {
             transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
             className={'mx-auto max-w-3xl text-center'}
           >
-            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
-              Start segmenting your audience
+            <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
+              Stop sending the same email to everyone
             </h2>
             <p className={'mt-6 text-lg text-neutral-600'}>
-              Create targeted campaigns and personalized workflows with powerful segmentation. No credit card required.
+              Build precise audience segments and watch your open rates climb. 1,000 emails free, no credit card required.
             </p>
             <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
               <motion.a