assistant particles + colour

apps/landing/src/app/page-sections/assistant.tsx

@@ -1,38 +1,58 @@
 import Image from 'next/image';
 import React from 'react';
 
+import Particles from '../../particles';
+
 export const Assistant = () => {
 	return (
-		<div
-			className="mx-auto flex w-full max-w-[1200px] flex-col flex-wrap items-start p-4"
-			style={{
-				backgroundImage: 'url(/images/new/comet_bg.svg)',
-				backgroundSize: 'cover',
-				backgroundPosition: 'center',
-				backgroundRepeat: 'no-repeat'
-			}}
-		>
-			{/* Somewhere there is some mystery padding here. IDK, but magic I guess - @Rocky43007  */}
+		<div className="relative w-full">
+			{/* Background Image positioned absolutely */}
 			<Image
-				className="flex size-[251px] shrink-0 items-center justify-center p-[31.375px]"
-				src="/images/new/assistant.svg"
-				width={188.25}
-				height={188.25}
-				alt="Assistant"
+				src="/images/new/comet_bg.svg"
+				alt="Background"
+				width={2000}
+				height={1200}
+				className="absolute bottom-[-300px] left-0 -z-10 overflow-visible"
 			/>
-			<h1 className="flex-1 self-start text-2xl font-semibold leading-8 md:text-3xl md:leading-10">
-				Assistant.{' '}
-				<span className="bg-gradient-to-r from-zinc-400 to-zinc-600 bg-clip-text text-transparent">
-					Mighty-powerful AI — no cloud needed.
-				</span>
-			</h1>
-			<h2 className="mt-[12px] text-lg text-ink-faint">Details to be revealed soon...</h2>
-			<div className="mt-[32.73px]">
-				<div className="inline-flex items-center justify-center gap-[10px] rounded-full border-2 border-[#FC79E7] bg-[rgba(43,43,59,0.50)] px-[11px] py-[10px]">
-					{/* eslint-disable-next-line tailwindcss/no-contradicting-classname */}
-					<p className="text-center font-plex text-[14px] font-[500] leading-[125%] text-[#FFF]">
-						COMING NEXT YEAR
-					</p>
+
+			<div className="relative z-10 mx-auto flex w-full max-w-[1200px] flex-col flex-wrap items-start p-4">
+				{/* Somewhere there is some mystery padding here. IDK, but magic I guess - @Rocky43007  */}
+
+				<Image
+					className="flex size-[251px] shrink-0 items-center justify-center p-[31.375px]"
+					src="/images/new/assistant.svg"
+					width={188.25}
+					height={188.25}
+					alt="Assistant"
+				/>
+
+				<h1 className="flex-1 self-start text-2xl font-semibold leading-8 md:text-3xl md:leading-10">
+					Assistant.{' '}
+					<span className="bg-gradient-to-r from-zinc-400 to-zinc-600 bg-clip-text text-transparent">
+						Mighty-powerful AI. No cloud needed.
+					</span>
+				</h1>
+				<div className="absolute inset-0 -z-10 mx-auto mix-blend-overlay">
+					<Particles
+						quantity={50}
+						ease={100}
+						staticity={200}
+						color={'#ADAFCD'}
+						className="opacity-80"
+						refresh
+						vy={-0.005}
+						vx={-0.0005}
+					/>
+				</div>
+
+				<h2 className="mt-[12px] text-lg text-ink-faint">Details to be revealed soon...</h2>
+
+				<div className="mt-[32.73px]">
+					<div className="inline-flex items-center justify-center gap-[10px] rounded-full border-2 border-[#FC79E7] bg-[rgba(43,43,59,0.50)] px-[11px] py-[10px]">
+						<p className="font-plex text-center text-[14px] font-[500] leading-[125%] text-[#FFF]">
+							COMING NEXT YEAR
+						</p>
+					</div>
 				</div>
 			</div>
 		</div>

apps/landing/src/app/page-sections/features.tsx

@@ -13,8 +13,7 @@ export const Features = () => {
 			{info.map((item, index) => (
 				<Feature
 					key={index}
-					className={clsx((index === 1 || index === 3) && 'items-center')}
-					titleClassName={clsx((index === 1 || index === 3) && 'self-start pl-24')}
+					titleClassName={clsx((index === 1 || index === 3) && 'self-start')}
 					title={item.title}
 					imageSrc={item.imageSrc}
 					description={item.description}
@@ -34,9 +33,9 @@ interface Props {
 
 const Feature = ({ title, description, className, titleClassName, imageSrc }: Props) => {
 	return (
-		<div className={clsx('flex h-[700px] flex-[50%] flex-col gap-3 pt-16', className)}>
+		<div className={clsx('flex h-[700px] flex-[50%] flex-col gap-3 pl-16 pt-16', className)}>
 			<h1 className={clsx('text-2xl font-semibold', titleClassName)}>{title}</h1>
-			<p className="w-full max-w-[390px] text-base text-ink-faint">{description}</p>
+			<p className="w-full max-w-[390px] text-ink-faint">{description}</p>
 			<Image
 				className="mt-8 px-8"
 				loading="eager"

apps/landing/src/app/page-sections/search.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 
 export const Search = () => {
 	return (
-		<div className="flex w-full flex-col items-center justify-center p-4">
-			<h1 className="text-xl">
-				Search. Find what you’re looking for with ease using advanced filters.
+		<div className="mx-auto flex w-full max-w-[1200px] flex-col flex-wrap items-start p-4">
+			<h1 className="flex-1 self-start text-2xl font-semibold leading-8 md:text-3xl md:leading-10">
+				Search.{' '}
+				<span className="bg-gradient-to-r from-zinc-400 to-zinc-600 bg-clip-text text-transparent">
+					Find what you’re looking for <br></br> with ease using advanced filters.
+				</span>
 			</h1>
 			<Image
 				loading="eager"

apps/landing/src/components/hero-image.tsx

@@ -14,14 +14,8 @@ interface HeroImageProps {
 
 export const HeroImage: React.FC<HeroImageProps> = ({ src, alt, width, height }) => {
 	return (
-		<Tilt
-			tiltMaxAngleX={8}
-			tiltMaxAngleY={8}
-			scale={1.02}
-			transitionSpeed={3000}
-			glareEnable={false}
-		>
-			<div className="relative m-auto mt-10 flex w-full max-w-7xl overflow-hidden rounded-[10px] transition-transform duration-700 ease-in-out md:mt-0">
+		<Tilt tiltMaxAngleX={2} tiltMaxAngleY={2} transitionSpeed={5000} glareEnable={false}>
+			<div className="relative m-auto mt-10 flex w-full max-w-7xl overflow-hidden rounded-[10px] opacity-85 transition-transform duration-700 ease-in-out md:mt-0">
 				<div className="flex flex-col items-center justify-center">
 					<div className="z-30 flex w-full justify-center backdrop-blur">
 						<div className="relative h-auto w-full max-w-[1200px]">