Landing fixes

app/(landing)/about/AboutUsHero.tsx

@@ -97,7 +97,7 @@ export default function AboutUsHero() {
         <h1 className='mb-6 text-[30px] leading-[100%] tracking-[-1.92px] text-white lg:text-[32px] xl:text-[48px]'>
           Boundless is Where
           <br />
-          <span className='gradient-text font-medium'>
+          <span className='gradient-text font-medium text-nowrap'>
             Ideas meet Opportunity
           </span>
         </h1>

app/(landing)/page.tsx

@@ -2,13 +2,13 @@
 
 import BeamBackground from '@/components/landing-page/BeamBackground';
 import { Hero } from '@/components/landing-page';
-import HowBoundlessWork from '@/components/landing-page/HowBoundlessWork';
 import WhyBoundless from '@/components/landing-page/WhyBoundless';
 import BackedBy from '@/components/landing-page/BackedBy';
 import NewsLetter from '@/components/landing-page/NewsLetter';
 import BlogSection from '@/components/landing-page/blog/BlogSection';
 import { Footer } from '@/components/landing-page/footer';
 import Explore from '@/components/landing-page/Explore';
+import CleanBanner from '@/components/landing-page/Banner';
 
 export default function LandingPage() {
   return (
@@ -21,7 +21,7 @@ export default function LandingPage() {
         <BackedBy />
         <NewsLetter />
         <BlogSection />
-        <HowBoundlessWork />
+        <CleanBanner />
         <Footer />
       </div>
     </div>

components/landing-page/Banner.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import CleanBannerBg from './CleanBannerBg';
+import Link from 'next/link';
+
+const CleanBanner = () => {
+  return (
+    <div className='px-10 md:px-30'>
+      <section className='relative mx-auto min-h-[18rem] max-w-6xl overflow-hidden rounded-[3.2rem]'>
+        <div className='absolute inset-0'>
+          <CleanBannerBg />
+        </div>
+        <div className='relative z-10 flex h-full flex-col items-center justify-between gap-8 px-6 py-12 min-[1119px]:flex-row min-[1119px]:items-start sm:px-10 sm:py-16 lg:py-24'>
+          <div className='flex flex-col gap-3 text-center min-[1119px]:text-left'>
+            <h2 className='text-2xl font-semibold tracking-tight text-white sm:text-3xl lg:text-4xl'>
+              Stay Boundless!
+            </h2>
+            <p className='mx-auto max-w-md text-base text-[#B5B5B5] min-[1119px]:mx-0 sm:text-lg'>
+              Ready to validate, fund, or build your next big idea?
+            </p>
+          </div>
+
+          <div className='flex flex-col justify-center gap-4 sm:flex-row md:justify-end'>
+            <Link
+              href='/projects'
+              className='rounded-lg border border-[#2B2B2B] bg-[#a5f84f] px-20 py-3 text-center text-sm font-medium text-[#030303] shadow-sm sm:px-6 sm:text-base'
+            >
+              Explore Projects
+            </Link>
+            <Link
+              href='/submit'
+              className='rounded-lg border border-[#484848] bg-[#4f4f4f] px-20 py-3 text-center text-sm font-medium text-white sm:px-6 sm:text-base'
+            >
+              Submit Your Idea
+            </Link>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default CleanBanner;

components/landing-page/CleanBannerBg.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+
+const CleanBannerBg = () => {
+  return (
+    <div className='relative h-full w-full'>
+      <div className='pointer-events-none absolute inset-0 rounded-[3.2rem] border border-[#a5f84f] [mask-image:linear-gradient(to_bottom,white,white,rgba(255,255,255,0.3))] [mask-size:100%_100%] [mask-repeat:no-repeat]' />
+
+      <svg
+        viewBox='0 0 1240 323'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+        className='block h-full w-full rounded-[3.2rem] border-transparent bg-[#030303]'
+        preserveAspectRatio='none'
+      >
+        <defs>
+          <linearGradient
+            id='paint0_linear_2175_8266'
+            x1='718'
+            y1='178'
+            x2='718'
+            y2='0'
+            gradientUnits='userSpaceOnUse'
+          >
+            <stop stopColor='#030303' />
+            <stop offset='0.55925' stopColor='#030303' />
+            <stop offset='1' stopColor='#030303' stopOpacity='0' />
+          </linearGradient>
+
+          <clipPath id='clip1_2175_8266'>
+            <rect
+              width='1236'
+              height='216'
+              fill='white'
+              transform='translate(4 2)'
+            />
+          </clipPath>
+
+          <mask
+            id='mask0_2175_8266'
+            style={{ maskType: 'luminance' }}
+            maskUnits='userSpaceOnUse'
+            x='-21'
+            y='-135'
+            width='1271'
+            height='903'
+          >
+            <path
+              d='M987.833 -134.357H240.717C96.4446 -134.357 -20.5115 -70.0941 -20.5115 9.17879V623.514C-20.5115 702.787 96.4446 767.05 240.717 767.05H987.833C1132.11 767.05 1249.06 702.787 1249.06 623.514V9.17879C1249.06 -70.0941 1132.11 -134.357 987.833 -134.357Z'
+              fill='white'
+            />
+          </mask>
+        </defs>
+
+        {/* Decorative pattern area */}
+        <g clipPath='url(#clip1_2175_8266)'>
+          <g mask='url(#mask0_2175_8266)'>
+            <path
+              d='M401.91 1719.21L2186.79 -681.116L2281.73 -553.44L496.851 1846.88L401.91 1719.21Z'
+              fill='#A7F950'
+              fillOpacity='0.6'
+            />
+            <path
+              opacity='0.5'
+              d='M401.91 1466.21L2186.79 -934.116L2281.73 -806.44L496.851 1593.88L401.91 1466.21Z'
+              fill='#A7F950'
+            />
+            <path
+              opacity='0.4'
+              d='M213.411 1466.21L1999.11 -934.116L2094.09 -806.44L308.396 1593.88L213.411 1466.21Z'
+              fill='#A7F950'
+            />
+            <path
+              opacity='0.35'
+              d='M25.7734 1466.21L1810.65 -934.116L1905.6 -806.44L120.713 1593.88L25.7734 1466.21Z'
+              fill='#A7F950'
+            />
+            <path
+              opacity='0.3'
+              d='M-27.5913 1285.21L1757.29 -1115.12L1852.23 -987.44L67.3494 1412.88L-27.5913 1285.21Z'
+              fill='#A7F950'
+            />
+            <path
+              opacity='0.25'
+              d='M-55.1345 1069.21L1730.56 -1331.12L1825.55 -1203.44L39.8488 1196.88L-55.1345 1069.21Z'
+              fill='#A7F950'
+            />
+            <path
+              opacity='0.2'
+              d='M-135.182 924.207L1649.7 -1476.12L1744.64 -1348.44L-40.242 1051.88L-135.182 924.207Z'
+              fill='#A7F950'
+            />
+            <path
+              opacity='0.15'
+              d='M-323.68 924.207L1462.02 -1476.12L1557 -1348.44L-228.696 1051.88L-323.68 924.207Z'
+              fill='#A7F950'
+            />
+            <path
+              opacity='0.1'
+              d='M-511.318 924.207L1273.56 -1476.12L1368.5 -1348.44L-416.378 1051.88L-511.318 924.207Z'
+              fill='#A7F950'
+            />
+          </g>
+
+          {/* Gradient overlay */}
+          <rect
+            width='1436'
+            height='178'
+            transform='translate(-96 85)'
+            fill='url(#paint0_linear_2175_8266)'
+          />
+        </g>
+      </svg>
+    </div>
+  );
+};
+
+export default CleanBannerBg;

components/landing-page/Hero.tsx

@@ -99,16 +99,20 @@ export default function Hero({ className = '' }: HeroProps) {
           quality={85}
           sizes='100vw'
         /> */}
-        <Image
-          src='/elipse.svg'
-          alt=''
-          className='ellipse-image absolute top-1/2 left-1/2 z-10 h-[90%] w-[90%] -translate-x-1/2 -translate-y-1/2'
-          width={1920}
-          height={1080}
-          priority
-          quality={85}
-          sizes='90vw'
-        />
+        {[1, 2, 3].map(elipse => (
+          <Image
+            key={`elipse${elipse}`}
+            src={`/elipse${elipse}.svg`}
+            alt=''
+            className={`ellipse-image absolute top-1/2 left-1/2 z-10 h-[90%] ${elipse === 1 ? 'w-[70%]' : elipse === 2 ? 'w-[90%]' : 'w-[1500px]'} -translate-x-1/2 -translate-y-1/2`}
+            width={1920}
+            height={1080}
+            priority
+            quality={85}
+            sizes='90vw'
+          />
+        ))}
+
         <div
           className='absolute bottom-0 left-0 z-10 h-[150px] w-screen max-w-screen bg-gradient-to-t from-transparent'
           style={{

components/landing-page/LandingPageBanner.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const LandingPageBanner = () => {
+  return (
+    <section className='relative mx-auto w-full max-w-sm'>
+      <h1 className='text-4xl text-white'>LandingPageBanner</h1>
+    </section>
+  );
+};
+
+export default LandingPageBanner;

components/landing-page/WhyBoundless.tsx

@@ -12,14 +12,17 @@ interface FeatureCardProps {
 }
 
 const FeatureCard = ({ icon, title, description }: FeatureCardProps) => (
-  <div className='space-y-4'>
-    <div className='flex flex-col'>
-      {icon}
-      <h4 className='mt-2 text-lg leading-[145%] font-medium tracking-[-0.4px] text-white md:text-xl'>
-        {title}
-      </h4>
+  <div className='relative rounded-xl bg-[#101010] p-4'>
+    <div className='pointer-events-none absolute inset-0 rounded-xl border border-white/20 [mask-image:linear-gradient(to_bottom,white,rgba(255,255,255,0.3))]'></div>
+    <div className='relative z-10 space-y-4'>
+      <div className='flex flex-col'>
+        {icon}
+        <h4 className='mt-2 leading-[145%] font-medium tracking-[-0.4px] text-white'>
+          {title}
+        </h4>
+      </div>
+      <p className='leading-[160%] text-[#B5B5B5]'>{description}</p>
     </div>
-    <p className='leading-[160%] text-[#B5B5B5]'>{description}</p>
   </div>
 );
 
@@ -29,27 +32,27 @@ const WhyBoundless = () => {
 
   const features = [
     {
-      icon: <FileLock size={32} className='text-white' />,
+      icon: <FileLock size={32} className='text-gray-500' />,
       title: 'Milestone Escrow',
       description:
         'Funds are locked in smart contracts and released only when milestones are completed. Backers know their contributions support real progress, while creators stay accountable.',
     },
     {
-      icon: <Globe size={32} className='text-white' />,
+      icon: <Globe size={32} className='text-gray-500' />,
       title: 'Inclusive Opportunities',
       description:
         'From crowdfunding to grants and hackathons, Boundless provides builders with multiple ways to access funding and grow their ideas, while supporters discover projects that inspire them.',
     },
     {
-      icon: <UserCheck size={32} className='text-white' />,
+      icon: <UserCheck size={32} className='text-gray-500' />,
       title: 'Powered by Stellar',
       description:
         'Built on Stellar and Soroban smart contracts, Boundless makes funding secure, fast, and affordable. This global infrastructure enables builders and backers to connect without barriers.',
     },
   ];
 
   const communityValidation = {
-    icon: <UserCheck size={32} className='text-white' />,
+    icon: <UserCheck size={32} className='text-gray-500' />,
     title: 'Community Validation',
     description: [
       'Every project starts with open feedback and voting, allowing builders to refine their ideas and prove demand before funding begins.',
@@ -97,18 +100,23 @@ const WhyBoundless = () => {
             />
           </div>
         </div>
-        <div className='w-full space-y-6 lg:w-1/2'>
-          <div className='flex flex-col'>
-            {communityValidation.icon}
-            <h3 className='mt-2 text-xl leading-[120%] font-medium tracking-[-0.4px] text-white'>
-              {communityValidation.title}
-            </h3>
+        <div className='relative w-full rounded-xl bg-[#101010] lg:w-1/2'>
+          <div className='pointer-events-none absolute inset-0 rounded-xl border border-white/20 [mask-image:linear-gradient(to_bottom,white,rgba(255,255,255,0.3))]'></div>
+          <div className='relative z-10 space-y-6 p-8'>
+            <div className='space-y-4'>
+              <div className='flex flex-col'>
+                {communityValidation.icon}
+                <h4 className='mt-2 leading-[145%] font-medium tracking-[-0.4px] text-white'>
+                  {communityValidation.title}
+                </h4>
+              </div>
+              {communityValidation.description.map((paragraph, index) => (
+                <p key={index} className='leading-[160%] text-[#B5B5B5]'>
+                  {paragraph}
+                </p>
+              ))}
+            </div>
           </div>
-          {communityValidation.description.map((paragraph, index) => (
-            <p key={index} className='leading-[160%] text-[#B5B5B5]'>
-              {paragraph}
-            </p>
-          ))}
         </div>
       </div>
 
@@ -140,19 +148,25 @@ const WhyBoundless = () => {
         </div>
 
         <div className='mt-10 grid gap-8 md:grid-cols-2 lg:grid-cols-3'>
-          <div className='w-full space-y-6 lg:hidden lg:w-1/2'>
-            <div className='flex flex-col'>
-              {communityValidation.icon}
-              <h3 className='mt-2 text-xl leading-[120%] font-medium tracking-[-0.4px] text-white'>
-                {communityValidation.title}
-              </h3>
+          <div className='relative w-full rounded-xl bg-[#101010] lg:hidden lg:w-1/2'>
+            <div className='pointer-events-none absolute inset-0 rounded-xl border border-white/20 [mask-image:linear-gradient(to_bottom,white,rgba(255,255,255,0.3))]'></div>
+            <div className='relative z-10 space-y-6 p-4'>
+              <div className='space-y-4'>
+                <div className='flex flex-col'>
+                  {communityValidation.icon}
+                  <h4 className='mt-2 leading-[145%] font-medium tracking-[-0.4px] text-white'>
+                    {communityValidation.title}
+                  </h4>
+                </div>
+                {communityValidation.description.map((paragraph, index) => (
+                  <p key={index} className='leading-[160%] text-[#B5B5B5]'>
+                    {paragraph}
+                  </p>
+                ))}
+              </div>
             </div>
-            {communityValidation.description.map((paragraph, index) => (
-              <p key={index} className='leading-[160%] text-[#B5B5B5]'>
-                {paragraph}
-              </p>
-            ))}
           </div>
+
           {features.map((feature, index) => (
             <FeatureCard
               key={index}