import { useRef } from "react" import Head from "next/head" import type { NextPage } from "next" import styled from "styled-components" import { StarsBgImage } from "@/components/shared/assets" import { LottieBackground } from "@/components/shared/components/BlueStarsBgLayout" import { StyledBlueStarsBgLayout } from "@/components/shared/components/BlueStarsBgLayout/styles" import { EarnFooter, EarnHeader, EarnHeroSection, StartBuildingSection, } from "@/components/earn" import { getBaseUrl } from "@/components/shared/actions" const Home: NextPage = () => { const startBuildingRef = useRef(null) return ( <> {/* Header */} {/* Background styles */} {/* Hero section */} startBuildingRef.current?.scrollIntoView({ behavior: "smooth" }) } /> {/* Start Building Section */} {/* Footer */} ) } export const ContentWrapper = styled.div` flex-direction: column; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; ` const BgContainer = styled.div` position: fixed; top: 0; left: 0; width: 100%; height: 70.7rem; background-image: url(${StarsBgImage.src}); background-size: cover; z-index: 1; @media (max-width: 768px) { height: 100vh; background-position: center top; } @media (max-width: 480px) { background-position: top center; } ` const Border = styled.div` height: 1px; width: 80%; background: linear-gradient(to right, black, white, black); opacity: 0.8; ` export default Home const HeadComponent = () => { const APP_TITLE = "Agents by Brahma" const APP_NAME = "Automate Your Onchain Actions with Brahma Agents" const DESCRIPTION = "Brahma Agents automate, execute and optimize your assets onchain. Set your preferences, and let them handle swaps, yield, and more." const KEYWORDS = "defi, earn, brahma, crypto" const OG_URL = "https://brahma-static.s3.us-east-2.amazonaws.com/Brahma-Agents-OG2x.webp" const TWITTER_HANDLE = "@brahmafi" const DOMAIN = "brahma.fi" return ( {/* General Metadata */} {APP_TITLE} {/* Open Graph (OG) Metadata */} {/* Twitter Card Metadata */} ) }