Feature/landing page setup

app/(landing)/page.tsx

@@ -11,6 +11,7 @@ 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';
 
 export default function LandingPage() {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -95,11 +96,15 @@ export default function LandingPage() {
   return (
     <div ref={containerRef} className='relative overflow-hidden'>
       <BeamBackground />
-      <div ref={contentRef} className='relative z-10 space-y-[80px]'>
+      <div
+        ref={contentRef}
+        className='relative z-10 space-y-[23px] md:space-y-[80px] max-w-[1300px] mx-auto'
+      >
         <Hero />
         <WhyBoundless />
         <BackedBy />
         <NewsLetter />
+        <BlogSection />
         <HowBoundlessWork />
       </div>
     </div>

app/globals.css

@@ -357,6 +357,8 @@ input[type='number'] {
     #3ae6b2 73.28%
   );
   -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
   -webkit-text-fill-color: transparent;
 }
 

components/landing-page/BackedBy.tsx

@@ -128,7 +128,7 @@ const BackedBy = () => {
 
   return (
     <div
-      className='w-full h-full py-16 px-6 md:px-12 lg:px-[100px] relative'
+      className='w-full h-full md:py-16 py-5 px-6 md:px-12 lg:px-[100px] relative'
       id='backed-by'
     >
       <div className='mx-auto relative max-w-[1200px]'>

components/landing-page/BeamBackground.tsx

@@ -304,14 +304,14 @@ export default function BeamBackground() {
       </div>
 
       {/* Pattern Placeholder */}
-      <div className='flex items-center justify-center'>
+      <div className='flex items-center bg-acscent'>
         <div id='pattern' className='w-full h-screen'>
           <svg
             width='1252'
             height='810'
             id='pattern'
             viewBox='0 0 1252 810'
-            className='justify-self-center h-screen'
+            className='justify-self-center w-full h-screen'
             fill='none'
             xmlns='http://www.w3.org/2000/svg'
           >

components/landing-page/Hero.tsx

@@ -84,7 +84,7 @@ export default function Hero() {
 
   return (
     <div
-      className='min-h-screen h-screen flex items-stretch md:items-end justify-between pb-[66px] md:mx-[116px] mx-5 relative'
+      className='min-h-screen h-screen flex items-stretch md:items-end justify-between pb-[36] md:pb-[66px] md:mx-[116px] mx-5 relative '
       id='hero'
     >
       <div
@@ -104,7 +104,7 @@ export default function Hero() {
           src='/glow.svg'
           alt='glow'
           unoptimized
-          className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full z-10 glow-element'
+          className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2  h-full z-10 glow-element !max-w-screen !w-screen'
           width={1920}
           height={1080}
         />
@@ -116,13 +116,13 @@ export default function Hero() {
           width={1920}
           height={1080}
         />
-        <div
-          className='absolute bottom-0 left-0 w-full h-[150px] z-10 bg-gradient-to-t from-transparent to-background'
+        {/* <div
+          className='absolute bottom-0 left-0 !w-screen !max-w-screen h-[150px] z-10 bg-gradient-to-t from-transparent to-background'
           style={{
             background:
               'linear-gradient(180deg, rgba(3, 3, 3, 0.00) 32.3%, #030303 84.8%)',
           }}
-        />
+        /> */}
       </div>
       <div className='flex flex-col md:flex-row justify-between items-end gap-4 h-full w-full md:h-auto mt-[120px] z-10'>
         <h2 className='text-left text-white xl:text-[48px] lg:text-[32px] text-[30px] leading-[140%] md:max-w-[579px] max-w-[350px]'>

components/landing-page/NewsLetter.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { BoundlessButton } from '../buttons';
+import Newsletter from '../overview/Newsletter';
 
 const NewsLetter = () => {
+  const [open, setOpen] = useState(false);
   return (
     <div className='w-full h-full my-[98px] px-5 md:px-[100px] relative'>
       <div
@@ -20,11 +22,13 @@ const NewsLetter = () => {
             variant='secondary'
             className='bg-background hover:text-background'
             size='xl'
+            onClick={() => setOpen(true)}
           >
             Subscribe to Our Newsletter
           </BoundlessButton>
         </div>
       </div>
+      <Newsletter open={open} onOpenChange={setOpen} />
     </div>
   );
 };

components/landing-page/WhyBoundless.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 const WhyBoundless = () => {
   return (
     <div
-      className='w-full h-full py-20 px-6 md:px-10 xl:px-[100px]'
+      className='w-full h-full md:py-20 py-5 px-6 md:px-10 xl:px-[100px]'
       id='how-boundless-work'
     >
       {/* Heading & Description */}

components/landing-page/blog/BlogCard.tsx

@@ -0,0 +1,75 @@
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Clock } from 'lucide-react';
+import Link from 'next/link';
+import Image from 'next/image';
+import React from 'react';
+
+type Blog = {
+  id: number;
+  title: string;
+  excerpt: string;
+  image: string;
+  date: string;
+  slug: string;
+  category: string;
+};
+
+const BlogCard = ({ blog }: { blog: Blog }) => {
+  return (
+    <Card
+      key={blog.id}
+      className='rounded-[8px] border-[#1B1B1B] bg-[#101010] w-full max-w-none p-0 overflow-hidden gap-0 hover:border-[#2A2A2A] transition-colors duration-300'
+    >
+      <CardHeader className='p-0 !pb-0 relative'>
+        <CardTitle
+          className='absolute top-3.5 left-3.5 px-2.5 py-1 rounded-full border border-[rgba(255,255,255,0.48)] backdrop-blur-[12px] text-white leading-[160%] font-medium text-sm z-10'
+          style={{
+            background:
+              'conic-gradient(from 180deg at 50% 50%, rgba(3, 3, 3, 0.12) 18.88653337955475deg, rgba(3, 3, 3, 0.12) 73.51145267486572deg, rgba(3, 3, 3, 0.12) 128.6191964149475deg, rgba(16, 16, 16, 0.12) 223.4290623664856deg, rgba(3, 3, 3, 0.12) 317.18567848205566deg)',
+          }}
+        >
+          {blog.category}
+        </CardTitle>
+        <div className='h-[214px] w-full'>
+          <Image
+            src={blog.image}
+            alt={blog.title}
+            width={397}
+            height={214}
+            className='w-full h-full object-cover'
+          />
+        </div>
+      </CardHeader>
+      <CardContent className='p-5 pb-2'>
+        <h2 className='text-white leading-[145%] font-semibold text-sm sm:text-base line-clamp-2'>
+          {blog.title}
+        </h2>
+        <p className='text-[#D9D9D9] text-sm sm:text-base leading-[160%] tracking-[-0.48px] mt-3 line-clamp-2'>
+          {blog.excerpt}
+        </p>
+      </CardContent>
+      <CardFooter className='pb-5 px-5 mt-3'>
+        <div className='flex items-center justify-between gap-2 w-full'>
+          <div className='flex items-center justify-start gap-1 text-[#b5b5b5] text-xs sm:text-sm'>
+            <Clock className='w-3 h-3 sm:w-4 sm:h-4' />
+            {blog.date}
+          </div>
+          <Link
+            href={`/blog/${blog.slug}`}
+            className='underline text-white text-xs sm:text-sm hover:text-[#D9D9D9] transition-colors duration-200'
+          >
+            Continue Reading
+          </Link>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default BlogCard;