feat: improve website layout and content organization

- Add Section component for consistent section styling - Implement Tabs component for showcasing integration code and visuals - Reorganize content into distinct sections with titles and subtitles - Improve layout and spacing across various components - Update Pricing section with an ID for smooth scrolling - Add smooth scrolling functionality to Footer links - Refactor background stars opacity based on scroll position - Clean up unused code and remove UserTypeSwitch component
asteroidai · Jan 23, 2025 · 89742ae · 89742ae
1 parent 11841b9
commit 89742ae
Show file tree

Hide file tree

Showing 14 changed files with 285 additions and 153 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -13,28 +13,17 @@ import Form from "./Form"
 export default function App() {
   return (
     <>
-
       <Stars2 />
       <InstallTerminal />
       <Hero />
 
       {/* Main content */}
-      <div className="relative z-10 flex flex-col space-y-32 md:space-y-48 lg:space-y-64">
-        <div className="bg-none w-full flex flex-col space-y-24 md:space-y-32 lg:space-y-48">
-          <div className="container max-w-6xl mx-auto">
-            <Step123 />
-          </div>
-          <div id="pricing" className="container max-w-6xl mx-auto">
-            <Pricing />
-          </div>
-
-          <div id="pricing" className="container max-w-6xl mx-auto">
-            <Form />
-          </div>
-        </div>
-
+      <div className="relative w-full flex flex-col space-y-24 md:space-y-48 lg:space-y-64 pt-32">
+        <Step123 />
+        <Pricing />
+        <Form />
         <Challenges />
-      </div >
+      </div>
     </>
   )
 }

diff --git a/src/Challenges.tsx b/src/Challenges.tsx
@@ -44,9 +44,9 @@ export default function Challenges() {
 
   return (
     <section ref={containerRef} className="text-white pb-64">
-      <div className="text-center rounded-3xl backdrop-blur-sm space-y-16">
-        <h2 className="text-3xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400 font-['Source_Serif_4']">
-          Asteroid is building the foundation for an agent-based future.
+      <div className="text-center rounded-3xl backdrop-blur-sm space-y-4">
+        <h2 className="text-3xl font-thin text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400 ">
+          <span className="font-['Source_Serif_4'] font-bold">Asteroid</span> is building the foundation for an agent-based future.
         </h2>
         {/* Subtitle */}
         <div className="space-y-8">

diff --git a/src/Footer.tsx b/src/Footer.tsx
@@ -9,6 +9,7 @@ import {
   MailIcon,
   CalendarIcon,
   DollarSignIcon,
+  HomeIcon,
 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -29,6 +30,20 @@ const iconVariants = {
   }
 }
 
+
+// Helper function for smooth scrolling
+const scrollToPricing = (e: React.MouseEvent) => {
+  e.preventDefault()
+  const pricingSection = document.getElementById('pricing')
+  pricingSection?.scrollIntoView({ behavior: 'smooth' })
+}
+
+// Helper function for smooth scrolling
+const scrollToTop = (e: React.MouseEvent) => {
+  e.preventDefault()
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
 const socialLinks = [
   {
     name: "X",
@@ -40,10 +55,13 @@ const socialLinks = [
 ]
 
 const resourceLinks = [
+  { name: "Home", href: "/", icon: HomeIcon, onClick: scrollToTop },
   { name: "Documentation", href: "https://docs.asteroid.ai", icon: BookIcon },
   { name: "Blog", href: "https://blog.asteroid.ai", icon: LibraryIcon },
   { name: "Contact", href: "mailto:[email protected]", icon: MailIcon },
-  { name: "Pricing", href: "/pricing", icon: DollarSignIcon },
+  {
+    name: "Pricing", href: "#pricing", icon: DollarSignIcon, onClick: scrollToPricing
+  },
   { name: "Demo", href: "https://calendly.com/founders-asteroid-hhaf/30min", icon: CalendarIcon },
 ]
 

diff --git a/src/Form.tsx b/src/Form.tsx
@@ -10,6 +10,7 @@ import { cn } from './utils'
 import { useToast } from "@/hooks/use-toast"
 import { motion } from 'framer-motion'
 import validator from 'validator'
+import Section from './Section'
 
 export default function Form() {
   const [userQuery, setUserQuery] = useState('')
@@ -60,12 +61,11 @@ export default function Form() {
   }
 
   return (
-    <div className="flex flex-col items-center justify-center space-y-8 p-48">
-      <div className="flex flex-col items-center justify-center space-y-2">
-        <h3 className="text-3xl font-semibold text-white">Need a custom browser automation?</h3>
-        <p className="text-white/60">We can rapidly prototype, build and host custom browser automations for your specific use case.</p>
-      </div>
-      <div className="flex gap-2 w-full">
+    <Section
+      title="Need a custom browser automation?"
+      subtitle="We can rapidly prototype, build and host custom browser automations for your specific use case."
+    >
+      <div className="flex gap-2 w-[70%] mx-auto">
         <Input
           placeholder="I need an agent to automate text input in insurance portals"
           value={userQuery}
@@ -127,7 +127,7 @@ export default function Form() {
           <span>Thank you! We'll be in touch soon.</span>
         </motion.div>
       )}
-    </div>
+    </Section>
   );
 }
 
diff --git a/src/Hero.tsx b/src/Hero.tsx
@@ -4,7 +4,6 @@ import { ChevronDown } from 'lucide-react'
 import { cn } from "@/lib/utils"
 import { Link } from 'react-router-dom'
 import { motion } from 'framer-motion'
-import { UserTypeSwitch } from './UserTypeSwitch'
 import { useContext } from 'react'
 import { UserContext } from '@/contexts/UserContext'
 
@@ -62,10 +61,6 @@ export default function Hero() {
             {content.subtitle}
           </p>
         </motion.div>
-
-        <div className="flex justify-center">
-          <UserTypeSwitch />
-        </div>
       </div >
 
 

diff --git a/src/Nav.tsx b/src/Nav.tsx
@@ -35,7 +35,14 @@ const iconMotionProps = {
 const scrollToPricing = (e: React.MouseEvent) => {
   e.preventDefault()
   const pricingSection = document.getElementById('pricing')
-  pricingSection?.scrollIntoView({ behavior: 'smooth' })
+  if (pricingSection) {
+    const offset = window.innerHeight * 0.20 // 20% of viewport height
+    const elementPosition = pricingSection.getBoundingClientRect().top + window.scrollY
+    window.scrollTo({
+      top: elementPosition - offset,
+      behavior: 'smooth'
+    })
+  }
 }
 
 // Helper function for smooth scrolling

diff --git a/src/Pricing.tsx b/src/Pricing.tsx
@@ -5,6 +5,8 @@ import Page from './components/Page'
 import { Link } from 'react-router-dom'
 import MeetingButton from './MeetingButton'
 import { cn } from './lib/utils'
+import Section from '@/Section'
+
 const pricingPlans = [
   {
     name: "Builder",
@@ -65,10 +67,11 @@ const pricingPlans = [
 
 export default function Pricing() {
   return (
-    <div className="relative z-10">
-      <h1 className="text-4xl font-semibold mb-4 text-white">Get Started</h1>
-      <p className="text-xl text-muted-foreground mb-12">Choose the plan for your needs</p>
-
+    <Section
+      title="Get Started"
+      subtitle="Choose the plan for your needs"
+      id="pricing"
+    >
       <div className="grid md:grid-cols-3 gap-8 w-full max-w-8xl mt-16">
         {pricingPlans.map((plan) => (
           <Card
@@ -120,7 +123,7 @@ export default function Pricing() {
           </Card>
         ))}
       </div>
-    </div>
+    </Section>
   )
 }
 
diff --git a/src/Section.tsx b/src/Section.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+
+interface SectionProps {
+  title: string
+  subtitle?: string
+  children: React.ReactNode
+  id?: string
+}
+
+export default function Section({ title, subtitle, children, id }: SectionProps) {
+  return (
+    <div id={id} className="container max-w-6xl mx-auto">
+      <div className="w-full space-y-12">
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold text-center text-white">
+            {title}
+          </h1>
+          {subtitle && (
+            <p className="text-lg text-center text-muted-foreground">
+              {subtitle}
+            </p>
+          )}
+        </div>
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/src/Stars2.tsx b/src/Stars2.tsx
@@ -1,10 +1,28 @@
 import * as React from 'react'
-import { useState, useRef } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { Canvas, useFrame } from '@react-three/fiber'
 import { Points, PointMaterial } from '@react-three/drei'
 import * as random from 'maath/random/dist/maath-random.esm'
 
 export default function Stars2() {
+  const [opacity, setOpacity] = useState(0.5)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      // Assuming hero section is 100vh tall
+      const scrollPosition = window.scrollY
+      const windowHeight = window.innerHeight
+
+      // Calculate opacity based on scroll position
+      // Starts fading out after 50vh and completely fades by 100vh
+      const newOpacity = Math.max(0.2, 0.5 - (scrollPosition - windowHeight * 0.5) / (windowHeight * 0.5))
+      setOpacity(newOpacity)
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
   return (
     <Canvas
       camera={{ position: [0, 0, 1] }}
@@ -16,7 +34,7 @@ export default function Stars2() {
         height: '100vh',
         pointerEvents: 'none', // This allows clicking through to elements below
         zIndex: 0,
-        opacity: 0.5
+        opacity: opacity
       }}
     >
       <Stars />

diff --git a/src/Step123.tsx b/src/Step123.tsx
@@ -7,6 +7,8 @@ import { UserContext } from './contexts/UserContext'
 import { useContext } from 'react'
 import { contextMenuCheckboxItemPropDefs } from '@radix-ui/themes'
 import ArcadeEmbed from './ArcadeEmbed'
+import Tabs from './Tabs'
+import Section from '@/Section'
 
 export default function Step123() {
   const terminal1Ref = React.useRef<HTMLDivElement>(null)
@@ -19,47 +21,37 @@ export default function Step123() {
   const { userType, content } = useContext(UserContext)
 
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 lg:px-8 space-y-24 mt-24 p-8 rounded-lg bg-[#030617] ">
-      {userType === 'developer' && (
-        <div className="space-y-8">
-          <div>
-            <div className="flex items-center justify-start gap-4">
-              <div className="bg-gradient-to-r from-indigo-500 to-purple-500 text-white rounded-full w-10 h-10 flex items-center justify-center shadow-lg shadow-indigo-500/25 mb-4">
-                1
-              </div>
-              <h2 className="text-3xl font-semibold text-left text-white mb-4">
-                Integrate
-              </h2>
-            </div>
-            <p className="text-lg text-left text-gray-600">Import the SDK and make a single API call</p>
-          </div>
-          <div className="flex flex-col items-center justify-center w-full h-full">
-            <Terminal code={content.integrationCode} allowClose={true} width={'full'} />
-          </div>
+    <Section
+      title="Integrate"
+      subtitle="Import the SDK and make a single API call"
+    >
+      <Tabs />
+      {/* <div className="space-y-8">
+        <div className="flex flex-col items-center justify-center w-full h-full">
+          <Terminal code={content.integrationCode} allowClose={true} width={'full'} />
         </div>
-      )}
-
-      <div>
-        <div className="flex items-center justify-start gap-4">
-          {userType === 'developer' && (
-            <div className="bg-gradient-to-r from-indigo-500 to-purple-500 text-white rounded-full w-10 h-10 flex items-center justify-center shadow-lg shadow-indigo-500/25 mb-4">
-              2
-            </div>
-          )}
-
-          <h2 className="text-3xl font-semibold text-left text-white mb-4">
-            {content.gifTitle}
-          </h2>
-        </div>
-        <p className="text-lg text-left text-gray-600">
-          {content.gifDescription}
-        </p>
-        <ArcadeEmbed />
-      </div>
-
-    </div>
+      </div> */}
+    </Section>
 
   )
 }
 
 
+
+// <div>
+//   <div className="flex items-center justify-start gap-4">
+//     {userType === 'developer' && (
+//       <div className="bg-gradient-to-r from-indigo-500 to-purple-500 text-white rounded-full w-10 h-10 flex items-center justify-center shadow-lg shadow-indigo-500/25 mb-4">
+//         2
+//       </div>
+//     )}
+
+//     <h2 className="text-3xl font-semibold text-left text-white mb-4">
+//       {content.gifTitle}
+//     </h2>
+//   </div>
+//   <p className="text-lg text-left text-gray-600">
+//     {content.gifDescription}
+//   </p>
+//   <ArcadeEmbed />
+// </div>