Fix/UI envlp

apps/www/@/components/form-feild.tsx

@@ -12,11 +12,13 @@ import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import LinkItem from "components/ui/LinkItem";
-import { ChevronRight, Loader2 } from "lucide-react";
+import { ChevronRight, Loader2, PlusSquare } from "lucide-react";
 import { useState, useTransition } from "react";
 import { useToast } from "@/components/ui/use-toast";
 import { saySomething } from "actions/emailSubRelated";
 import { Button } from "@/components/ui/button";
+import { PlusSvg } from "components/SectionSvg";
+import { BottomLine } from "components/LineUtils";
 type FormType = {
   firstName: string;
   lastName?: string;
@@ -73,9 +75,13 @@ export function FormField() {
     });
   };
   return (
-    <section className="custom-screen-lg mx-auto z-20">
-      <div className="relative backdrop-blur-3xl z-10 max-w-4xl mx-auto  space-y-4">
-        <Card className="relative mt-20 py-10 z-20 backdrop-blur-3xl transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]">
+    <section className="custom-screen-lg mx-auto z-20 pb-20">
+      <div className="relative border-none z-10 max-w-4xl mx-auto  space-y-4">
+
+        <Card className="relative bg-page-gradient mt-20 py-10 z-20 backdrop-blur-3xl rounded-none rounded-tr-2xl rounded-bl-2xl">
+          <PlusSvg className="size-5 absolute top-[-6px] left-[-6px]"/>
+          <PlusSvg className="size-5 absolute bottom-[-14px] right-[-16px] "/>
+
           <CardHeader>
               <h2 className="text-xl tracking-tighter font-geist  bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] text-transparent text-left md:text-3xl">
                 Say Something.
@@ -136,7 +142,7 @@ export function FormField() {
                 disabled={pending}
                 variant="default"
                 // onClick={onSubmit}
-                className="inline-flex rounded-3xl text-white bg-transaprent/10  text-center group items-center w-full justify-center   border-input border-[1px] hover:bg-transparent/10  transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset] transition-colors sm:w-auto py-6 px-10"
+                className="inline-flex rounded-lg text-white bg-transaprent/10  text-center group items-center w-full justify-center   border-input border-[1px] hover:bg-transparent/10  transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset] transition-colors sm:w-auto py-6 px-10"
               >
                 Submit
                 {pending ? (
@@ -148,7 +154,9 @@ export function FormField() {
             </form>
           </CardContent>
         </Card>
+
       </div>
+
     </section>
   );
 }

apps/www/app/(www)/join/page.tsx

@@ -12,16 +12,18 @@ import { ChevronRight } from "lucide-react";
 import Image from "next/image";
 import circle from "/public/circle.png";
 import bgback from "/public/bg-back.png";
+import Section from "components/SectionView";
+import { BottomLine } from "components/LineUtils";
 type Feature = {
   title: string;
   desc: string;
   icon: React.ReactNode;
 };
 
-const {title , description} : {title: string , description: string} = {
+const { title, description }: { title: string; description: string } = {
   title: "Join Us",
-  description:'Join the gang for creating awesome products '
-}
+  description: "Join the gang for creating awesome products ",
+};
 export const metadata = {
   metadataBase: new URL("https://farmui.com"),
   title,
@@ -58,16 +60,16 @@ const CareerPage = () => {
     },
   ];
   return (
-    <div>
+    <div className="relative overflow-hidden pb-20">
       <section className="custom-screen mt-20 mx-auto">
-        <div className="relative z-10 max-w-4xl ml-auto text-right space-y-4">
+        <div className="relative z-10 max-w-4xl mx-auto text-right space-y-4">
           <HeroAnimated
             header="Join the gang and create amazing hands down products."
-            headerClassName="text-right max-w-4xl text-6xl md:text-7xl tracking-tighter ml-auto lg:text-8xl font-bold font-geist  font-normal text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0  md:pb-0 mt-1"
+            headerClassName="text-center max-w-4xl text-6xl md:text-7xl tracking-tighter mx-auto lg:text-8xl font-bold font-geist  font-normal text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0  md:pb-0 mt-1"
             description="We will be super excited to have you on board with us and get to know you well to embark your journey with us."
-            descriptionClassName="ml-auto text-right text-zinc-400 text-lg lg:max-w-2xl py-5"
+            descriptionClassName="mx-auto text-center text-zinc-400 text-lg lg:max-w-2xl py-5"
           ></HeroAnimated>
-          <div className="flex flex-wrap items-end justify-end  gap-3">
+          <div className="flex flex-wrap items-center justify-center  gap-3">
             <LinkItem
               href="https://t.me/farmui"
               variant="default"
@@ -114,30 +116,60 @@ const CareerPage = () => {
             ))}
           </ul>
         </div>
-        <div className=" mt-10 pt-20 relative overflow-y-hidden overflow-x-hidden custom-screen-lg">
-          <HeroAnimated
-            header="Say something."
-            headerClassName="text-center mx-auto max-w-4xl text-5xl md:text-6xl tracking-tighter lg:text-7xl font-bold font-geist  font-normal text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0  md:pb-0 mt-1 mb-[-115px]"
-            description="We will hear you for sure."
-            descriptionClassName="mx-auto text-center text-zinc-400 text-lg lg:max-w-2xl mb-[-10px]"
-          ></HeroAnimated>
-          <FormField />
+        <Section
+          className="relative max-w-7xl"
+          crosses
+          crossesOffset="lg:translate-y-[14rem]"
+          customPaddings
+          id="hero"
+        >
+          <BottomLine />
+          <div className=" mt-10 pt-20 relative overflow-y-hidden overflow-x-hidden custom-screen-lg">
+            <HeroAnimated
+              header="Say something."
+              headerClassName="text-center mx-auto max-w-4xl text-5xl md:text-6xl tracking-tighter lg:text-7xl font-bold font-geist  font-normal text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0  md:pb-0 mt-1 mb-[-115px]"
+              description="We will hear you for sure."
+              descriptionClassName="mx-auto text-center text-zinc-400 text-lg lg:max-w-2xl mb-[-10px]"
+            ></HeroAnimated>
+            <FormField />
 
-          <Image
-            src={circle}
-            width={900}
-            height={900}
-            alt="bgback"
-            className="absolute blur-[4px] backdrop-blur-sm opacity-60 animate-pulse translate-y-[-100%]  translate-x-32 max-w-full mx-auto"
-          />
-          <Image
-            src={bgback}
-            width={900}
-            height={900}
-            alt="bgback"
-            className="absolute inset-x-0 top-[50px]  -translate-x-40 max-w-full mx-auto"
-          />
+            {/* <Image
+              src={circle}
+              width={900}
+              height={900}
+              alt="bgback"
+              className="absolute blur-[4px] backdrop-blur-sm opacity-60 animate-pulse translate-y-[-100%]  translate-x-32 max-w-full mx-auto"
+            /> */}
+            <Image
+              src={bgback}
+              width={900}
+              height={900}
+              alt="bgback"
+              className="absolute inset-x-0 top-[50px] opacity-5  -translate-x-40 max-w-full mx-auto"
+            />
+
+          </div>
+        </Section>
+        {/* <Section
+          className="relative max-w-7xl"
+          crosses
+          crossesOffset="lg:translate-y-[2rem]"
+          customPaddings
+          id="hero"
+        >
+        <div className="grid place-items-center grid-cols-1 md:grid-cols-2">
+            <div>
+              <p>Hello world</p>
+            </div>
+            <div>
+              <p>lossing itslef</p>
+            </div>
         </div>
+        </Section> */}
+          <div className="relative w-full">
+      <BottomLine />
+
+      </div>
       </section>
     </div>
   );

apps/www/app/(www)/page.tsx

@@ -1,5 +1,6 @@
 import Calendy from "components/Calendly";
 import DashboardDemo from "components/Dashbboad/ShowCase";
+import FUIFeatureSectionWithCards from "components/farmui/FUIFeatureCard";
 import NpmCommandGetStarted from "components/farmui/FUIHeroWithGridSimple";
 import FeaturesAsGrid from "components/FeaturesAsGrid";
 import GithubOpenSource from "components/Github";
@@ -23,13 +24,9 @@ export default async () => {
       <GridSlide />
       <Calendy />
       <GridFeatureDemo />
-      <FeaturesAsGrid />
-
       <NpmCommandGetStarted />
-
       <SupportedFrameworks />
       <CTAshow />
-
       <GetStarted />
     </>
   );

apps/www/components/CTA.tsx

@@ -48,7 +48,7 @@ export const CTA = ({
 
      <Image
       alt="bg-hero"
-      className="absolute inset-0 w-full h-full scale-150 tranform rotate-360" 
+      className="hidden sm:block absolute inset-0 w-full h-full scale-150 tranform rotate-360" 
       src={bghero} 
 
 

apps/www/components/GlareCard.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { useRef } from "react";
+
+export const GlareCard = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  const isPointerInside = useRef(false);
+  const refElement = useRef<HTMLDivElement>(null);
+  const state = useRef({
+    glare: {
+      x: 50,
+      y: 50,
+    },
+    background: {
+      x: 50,
+      y: 50,
+    },
+    rotate: {
+      x: 0,
+      y: 0,
+    },
+  });
+  const containerStyle = {
+    "--m-x": "50%",
+    "--m-y": "50%",
+    "--r-x": "0deg",
+    "--r-y": "0deg",
+    "--bg-x": "50%",
+    "--bg-y": "50%",
+    "--duration": "300ms",
+    "--foil-size": "100%",
+    "--opacity": "0",
+    "--radius": "23px",
+    "--easing": "ease",
+    "--transition": "var(--duration) var(--easing)",
+  } as any;
+
+  const backgroundStyle = {
+    "--step": "5%",
+    "--foil-svg": `url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99994 3.419C2.99994 3.419 21.6142 7.43646 22.7921 12.153C23.97 16.8695 3.41838 23.0306 3.41838 23.0306' stroke='white' stroke-width='5' stroke-miterlimit='3.86874' stroke-linecap='round' style='mix-blend-mode:darken'/%3E%3C/svg%3E")`,
+    "--pattern": "var(--foil-svg) center/100% no-repeat",
+    "--rainbow":
+      "repeating-linear-gradient( 0deg,rgb(255,119,115) calc(var(--step) * 1),rgba(255,237,95,1) calc(var(--step) * 2),rgba(168,255,95,1) calc(var(--step) * 3),rgba(131,255,247,1) calc(var(--step) * 4),rgba(120,148,255,1) calc(var(--step) * 5),rgb(216,117,255) calc(var(--step) * 6),rgb(255,119,115) calc(var(--step) * 7) ) 0% var(--bg-y)/200% 700% no-repeat",
+    "--diagonal":
+      "repeating-linear-gradient( 128deg,#0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,10%,60%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12% ) var(--bg-x) var(--bg-y)/300% no-repeat",
+    "--shade":
+      "radial-gradient( farthest-corner circle at var(--m-x) var(--m-y),rgba(255,255,255,0.1) 12%,rgba(255,255,255,0.15) 20%,rgba(255,255,255,0.25) 120% ) var(--bg-x) var(--bg-y)/300% no-repeat",
+    backgroundBlendMode: "hue, hue, hue, overlay",
+  };
+
+  const updateStyles = () => {
+    if (refElement.current) {
+      console.log(state.current);
+      const { background, rotate, glare } = state.current;
+      refElement.current?.style.setProperty("--m-x", `${glare.x}%`);
+      refElement.current?.style.setProperty("--m-y", `${glare.y}%`);
+      refElement.current?.style.setProperty("--r-x", `${rotate.x}deg`);
+      refElement.current?.style.setProperty("--r-y", `${rotate.y}deg`);
+      refElement.current?.style.setProperty("--bg-x", `${background.x}%`);
+      refElement.current?.style.setProperty("--bg-y", `${background.y}%`);
+    }
+  };
+  return (
+    <div
+      style={containerStyle}
+      className="relative isolate [contain:layout_style] [perspective:600px] transition-transform duration-[var(--duration)] ease-[var(--easing)] delay-[var(--delay)] will-change-transform w-full h-full"
+      ref={refElement}
+      onPointerMove={(event) => {
+        const rotateFactor = 0.4;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const position = {
+          x: event.clientX - rect.left,
+          y: event.clientY - rect.top,
+        };
+        const percentage = {
+          x: (100 / rect.width) * position.x,
+          y: (100 / rect.height) * position.y,
+        };
+        const delta = {
+          x: percentage.x - 50,
+          y: percentage.y - 50,
+        };
+
+        const { background, rotate, glare } = state.current;
+        background.x = 50 + percentage.x / 4 - 12.5;
+        background.y = 50 + percentage.y / 3 - 16.67;
+        rotate.x = -(delta.x / 3.5);
+        rotate.y = delta.y / 2;
+        rotate.x *= rotateFactor;
+        rotate.y *= rotateFactor;
+        glare.x = percentage.x;
+        glare.y = percentage.y;
+
+        updateStyles();
+      }}
+      onPointerEnter={() => {
+        isPointerInside.current = true;
+        if (refElement.current) {
+          setTimeout(() => {
+            if (isPointerInside.current) {
+              refElement.current?.style.setProperty("--duration", "0s");
+            }
+          }, 300);
+        }
+      }}
+      onPointerLeave={() => {
+        isPointerInside.current = false;
+        if (refElement.current) {
+          refElement.current.style.removeProperty("--duration");
+          refElement.current?.style.setProperty("--r-x", `0deg`);
+          refElement.current?.style.setProperty("--r-y", `0deg`);
+        }
+      }}
+    >
+      <div className="h-full  grid will-change-transform origin-center transition-transform duration-[var(--duration)] ease-[var(--easing)] delay-[var(--delay)] [transform:rotateY(var(--r-x))_rotateX(var(--r-y))] rounded-[var(--radius)] border border-slate-800 hover:[--opacity:0.6] hover:[--duration:200ms] hover:[--easing:linear] hover:filter-none overflow-hidden">
+        <div className="w-full h-full grid [grid-area:1/1] mix-blend-soft-light [clip-path:inset(0_0_0_0_round_var(--radius))]">
+          <div className={cn("h-full w-full bg-hero-gradient", className)}>
+            {children}
+          </div>
+          <button className="py-5 invisible bg-glass-gradient cursor-pointer">Get started </button>
+        </div>
+        <div className="w-full pb-10 bg-glass-gradient h-full grid [grid-area:1/1] mix-blend-soft-light [clip-path:inset(0_0_1px_0_round_var(--radius))] opacity-[var(--opacity)] transition-opacity transition-background duration-[var(--duration)] ease-[var(--easing)] delay-[var(--delay)] will-change-background [background:radial-gradient(farthest-corner_circle_at_var(--m-x)_var(--m-y),_rgba(255,255,255,0.8)_10%,_rgba(255,255,255,0.65)_20%,_rgba(255,255,255,0)_90%)]" />
+        <div
+          className="w-full h-full grid [grid-area:1/1] mix-blend-color-dodge opacity-[var(--opacity)] will-change-background transition-opacity [clip-path:inset(0_0_1px_0_round_var(--radius))] [background-blend-mode:hue_hue_hue_overlay] [background:var(--pattern),_var(--rainbow),_var(--diagonal),_var(--shade)] relative after:content-[''] after:grid-area-[inherit] after:bg-repeat-[inherit] after:bg-attachment-[inherit] after:bg-origin-[inherit] after:bg-clip-[inherit] after:bg-[inherit] after:mix-blend-exclusion after:[background-size:var(--foil-size),_200%_400%,_800%,_200%] after:[background-position:center,_0%_var(--bg-y),_calc(var(--bg-x)*_-1)_calc(var(--bg-y)*_-1),_var(--bg-x)_var(--bg-y)] after:[background-blend-mode:soft-light,_hue,_hard-light]"
+          style={{ ...backgroundStyle }}
+        />
+
+      </div>
+    </div>
+  );
+};

apps/www/components/LineUtils.tsx

@@ -0,0 +1,34 @@
+import { PlusSvg } from "./SectionSvg";
+
+export const Gradient = () => {
+  return (
+    <>
+      <div className="relative z-20 mx-2.5 w-20 h-6 bg-red-900 shadow-xl lg:mx-8 lg:h-6 rounded-b-[1.25rem]" />
+      <div className="relative z-20 mx-6 w-20 h-6 shadow-xl lg:mx-20 lg:h-6 bg-red-900/70 rounded-b-[1.25rem]" />
+    </>
+  );
+};
+
+export const BottomLine = () => {
+  return (
+    <>
+      <div className="hidden absolute right-3 left-3 z-20 pointer-events-none xl:block top-[0.3125rem] h-[0.0625rem] bg-white/10" />
+
+      <PlusSvg className="hidden absolute z-20 pointer-events-none xl:block top-[0rem] left-[3.6825rem] z-2" />
+
+      <PlusSvg className="hidden absolute z-20 pointer-events-none xl:block top-[0rem] right-[3.6825rem] z-2" />
+    </>
+  );
+};
+
+export const VerticalLine = () => {
+  return (
+    <>
+      <div className="hidden absolute right-3 left-3 z-20 rotate-90 pointer-events-none xl:block top-[0.3125rem] h-[0.0625rem] bg-white/10">
+        <PlusSvg className="hidden absolute z-20 rotate-90 pointer-events-none xl:block top-[0] left-[0] z-2" />
+
+        <PlusSvg className="hidden absolute z-20 pointer-events-none xl:block rotat-90 top-[-0.3125rem] right-[2.7825rem] z-2" />
+      </div>
+    </>
+  );
+};