diff --git a/apps/web/src/app/(home)/_components/FeaturedSection.tsx b/apps/web/src/app/(home)/_components/FeaturedSection.tsx new file mode 100644 index 0000000..3455315 --- /dev/null +++ b/apps/web/src/app/(home)/_components/FeaturedSection.tsx @@ -0,0 +1,134 @@ +import { ArrowRight, Code2, Shield, Zap } from "lucide-react"; +import React from "react"; + +const Featured = () => { + return ( + <> +
+
+ {[ + { + icon: Shield, + title: "Type-Safe by Default", + description: + "End-to-end type safety from database to frontend. Catch errors before they happen.", + }, + { + icon: Zap, + title: "Lightning Fast", + description: + "Built on Bun's lightning-fast runtime with optimal configurations for performance.", + }, + { + icon: Code2, + title: "Developer Experience", + description: + "Modern tooling and intuitive APIs make development a breeze.", + }, + ].map((feature) => ( +
+
+ +

+ {feature.title} +

+

{feature.description}

+
+ ))} +
+
+ +
+
+
+

+ Write Better Code, Faster +

+

+ Leverage the power of TypeScript with our carefully selected tools + and frameworks. +

+
+ +
+
+ {[ + { + title: "Type-Safe API Calls", + description: + "No more guessing API shapes. tRPC ensures type safety across your stack.", + }, + { + title: "Database Type Safety", + description: + "Drizzle ORM provides type-safe database queries with great DX.", + }, + { + title: "Modern Authentication", + description: + "Secure authentication with Better-Auth, built for modern web apps.", + }, + ].map((item) => ( +
+ +
+

+ {item.title} +

+

{item.description}

+
+
+ ))} +
+ +
+
+
+ 
+									{`// Type-safe API endpoint
+export const userRouter = router({
+  get: publicProcedure
+    .input(z.string())
+    .query(async ({ input }) => {
+      const user = await db
+        .select()
+        .from(users)
+        .where(eq(users.id, input));
+
+      return user;
+    })
+});`}
+
+
+
+
+
+
+ +
+

+ Ready to Build Something Amazing? +

+

+ Start your next project with Better-T Stack and experience the future + of web development. +

+ +
+ + ); +}; + +export default Featured; diff --git a/apps/web/src/app/(home)/_components/Navbar.tsx b/apps/web/src/app/(home)/_components/Navbar.tsx index f98c89d..e3e59d6 100644 --- a/apps/web/src/app/(home)/_components/Navbar.tsx +++ b/apps/web/src/app/(home)/_components/Navbar.tsx @@ -56,7 +56,7 @@ const Navbar = () => {
; toRef: React.RefObject; containerRef: React.RefObject; delay?: number; + curveDirection?: number; }; const AnimatedBeam = ({ @@ -15,6 +16,7 @@ const AnimatedBeam = ({ toRef, containerRef, delay = 0, + curveDirection = 50, }: TechConstellationProp) => { const [path, setPath] = useState(""); @@ -32,14 +34,14 @@ const AnimatedBeam = ({ const toY = toRect.top - containerRect.top + toRect.height / 2; setPath( - `M ${fromX},${fromY} Q ${(fromX + toX) / 2},${(fromY + toY) / 2 - 50} ${toX},${toY}`, + `M ${fromX},${fromY} Q ${(fromX + toX) / 2},${(fromY + toY) / 2 - curveDirection} ${toX},${toY}`, ); }; updatePath(); window.addEventListener("resize", updatePath); return () => window.removeEventListener("resize", updatePath); - }, [fromRef, toRef, containerRef]); + }, [fromRef, toRef, containerRef, curveDirection]); return ( @@ -49,7 +51,7 @@ const AnimatedBeam = ({ fill="none" stroke="url(#gradient)" strokeWidth="2" - className="opacity-50" + className="opacity-30" > { const techRefs = useRef<{ [key: string]: HTMLDivElement | null }>({}); const [isVisible, setIsVisible] = useState(false); + const calculateRadius = (category: string) => { + switch (category) { + case "core": + return 160; + case "frontend": + case "backend": + return 240; + default: + return 200; + } + }; + + const renderCategoryBeams = (category: string) => { + const categoryTechs = technologies.filter( + (tech) => tech.category === category, + ); + const beams: JSX.Element[] = []; + + if (category !== "core") { + categoryTechs.forEach((tech, index) => { + const curveDirection = tech.category === "frontend" ? 50 : -50; + beams.push( + } + toRef={{ current: techRefs.current[tech.name] as HTMLElement }} + containerRef={containerRef as React.RefObject} + delay={index * 0.2} + curveDirection={curveDirection} + />, + ); + }); + } + + for (let i = 0; i < categoryTechs.length - 1; i++) { + const curveDirection = category === "frontend" ? 30 : -30; + beams.push( + } + delay={(i + categoryTechs.length) * 0.2} + curveDirection={curveDirection} + />, + ); + } + + if (category === "core") { + beams.push( + } + delay={0} + curveDirection={0} + />, + ); + } + + return beams; + }; + useEffect(() => { setIsVisible(true); }, []); @@ -83,17 +153,17 @@ const TechConstellation = () => { return (
- TS + TS
{technologies.map((tech, index) => { - const radius = 250; + const radius = calculateRadius(tech.category); const x = Math.cos((tech.angle * Math.PI) / 180) * radius; const y = Math.sin((tech.angle * Math.PI) / 180) * radius; @@ -112,35 +182,32 @@ const TechConstellation = () => { }} >
- +
{tech.name} -

{tech.description}

+

{tech.description}

); })} - {isVisible && - technologies.map((tech, index) => ( - } - toRef={{ current: techRefs.current[tech.name] as HTMLElement }} - containerRef={containerRef as React.RefObject} - delay={index * 0.2} - /> - ))} + {isVisible && ( + <> + {renderCategoryBeams("core")} + {renderCategoryBeams("frontend")} + {renderCategoryBeams("backend")} + + )}
{[...Array(20)].map((_, i) => ( diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx index e1ae737..80d5c39 100644 --- a/apps/web/src/app/(home)/page.tsx +++ b/apps/web/src/app/(home)/page.tsx @@ -4,6 +4,7 @@ import { Poppins } from "next/font/google"; import React from "react"; import BackgroundGradients from "./_components/BackgroundGradients"; import CodeContainer from "./_components/CodeContainer"; +import Featured from "./_components/FeaturedSection"; import NpmPackage from "./_components/NpmPackage"; import SideCircles from "./_components/SideCircles"; import Spotlight from "./_components/Spotlight"; @@ -61,7 +62,37 @@ export default function HomePage() {
- +
+
+

+ A Symphony of Modern Tech +

+
+

+ Carefully orchestrated stack of{" "} + + cutting-edge technologies + + , working in perfect harmony to deliver an exceptional development + experience. +

+
+ + End-to-end Type Safety + + + Lightning Fast Performance + + + Modern Development Tools + +
+
+
+
+ +
+ ); } diff --git a/apps/web/src/lib/constant.ts b/apps/web/src/lib/constant.ts index fef970e..0c330eb 100644 --- a/apps/web/src/lib/constant.ts +++ b/apps/web/src/lib/constant.ts @@ -1,6 +1,5 @@ import { AppWindow, - Binary, Boxes, Component, Database, @@ -15,38 +14,35 @@ export const technologies = [ { name: "Bun", category: "core", - angle: -60, + angle: -25, icon: FastForward, color: "bg-yellow-100", textColor: "text-black", description: "Fast all-in-one JavaScript runtime", - }, - { - name: "TypeScript", - category: "core", - angle: -30, - icon: Binary, - color: "bg-blue-500", - textColor: "text-white", - description: "Type safety across the stack", + top: "top-[2px]", + left: "left-[10rem]", }, { name: "tRPC", category: "core", - angle: 0, + angle: 25, icon: Workflow, color: "bg-blue-600", textColor: "text-white", description: "End-to-end type-safe APIs", + left: "left-[5rem]", }, + { name: "TanStack Router", category: "frontend", - angle: 60, + angle: 30, icon: AppWindow, color: "bg-red-500", textColor: "text-white", description: "Type-safe routing", + top: "top-[2px]", + left: "left-[7.5rem]", }, { name: "Tailwind CSS", @@ -60,25 +56,28 @@ export const technologies = [ { name: "shadcn/ui", category: "frontend", - angle: 120, + angle: 150, icon: Component, color: "bg-gray-900", textColor: "text-white", description: "Re-usable components", + left: "-left-[2rem]", }, + { name: "Hono", category: "backend", - angle: 180, + angle: -150, icon: ServerCog, color: "bg-orange-500", textColor: "text-white", description: "Ultrafast web framework", + left: "left-[0rem]", }, { name: "Better-Auth", category: "backend", - angle: 210, + angle: -110, icon: Lock, color: "bg-indigo-600", textColor: "text-white", @@ -87,7 +86,7 @@ export const technologies = [ { name: "Drizzle ORM", category: "backend", - angle: 240, + angle: -70, icon: Database, color: "bg-green-400", textColor: "text-black", @@ -96,10 +95,11 @@ export const technologies = [ { name: "libSQL", category: "backend", - angle: 270, + angle: -30, icon: Boxes, color: "bg-gray-600", textColor: "text-white", description: "SQLite-compatible database engine", + left: "left-[6rem]", }, ];