Cicero AI - AI-powered Contract Creation

AI-powered contract creation

for the modern professional

\n \n ]\n \n );\n}\n\nconst Subheadline = styled.p`\n font-size: 24px;\n color: #1D1D1D;\n margin: 0;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n`;\n\nconst AnimatedSubheadline = styled.span`\n white-space: nowrap;\n overflow: hidden;\n width: 0;\n transition: width 2.5s linear;\n`;\n\nfunction SubheadlineAnimation() {\n const [animationStarted, setAnimationStarted] = useState(false);\n const contentRef = useRef(null);\n\n useEffect(() => {\n setAnimationStarted(true);\n }, []);\n\n useEffect(() => {\n if (animationStarted) {\n const content = contentRef.current;\n // Reset\n content.style.width = \"0\";\n content.textContent = \"\";\n // Start animation\n setTimeout(() => {\n const text = \"Agreements that work as hard as you do\";\n const duration = 2500; // 2.5 seconds\n content.style.transition = `width ${duration}ms linear`;\n content.style.width = \"100%\";\n content.textContent = text;\n setTimeout(() => {\n setAnimationStarted(false);\n }, duration + 500);\n }, 3000); // Start after main headline animation\n }\n }, [animationStarted]);\n\n return (\n \n \n \n );\n}\n\nconst CTAButton = styled.button`\n background-color: #E63946;\n color: #FFFFFF;\n font-size: 18px;\n font-weight: 700;\n padding: 12px 24px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s;\n margin-top: 24px;\n &:hover {\n background-color: #C81D2A;\n }\n`;\n\nconst FeaturesSection = styled.section`\n padding: 96px 0;\n background-color: #F1FAEE;\n`;\n\nconst SectionTitle = styled.h2`\n font-size: 36px;\n font-weight: 700;\n text-align: center;\n margin-bottom: 48px;\n`;\n\nconst FeatureCarousel = styled.div`\n // Implement feature carousel here\n`;\n\nconst CTASection = styled.section`\n padding: 96px 0;\n background-color: #1D3557;\n color: #FFFFFF;\n text-align: center;\n`;\n\nconst CTAHeadline = styled.h2`\n font-size: 36px;\n font-weight: 700;\n margin-bottom: 24px;\n`;\n\nconst Footer = styled.footer`\n background-color: #000000;\n color: #FFFFFF;\n padding: 48px 0;\n`;\n\nconst FooterContent = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n`;\n\nconst FooterLinks = styled.div`\n display: flex;\n justify-content: center;\n gap: 24px;\n flex-wrap: wrap;\n margin: 24px 0;\n`;\n\nconst FooterLink = styled.a`\n color: #FFFFFF;\n text-decoration: none;\n font-size: 14px;\n font-weight: 500;\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst PortugueseLink = styled(FooterLink)`\n font-weight: 700;\n margin-top: 12px;\n`;\n\nconst SocialIcon = styled.a`\n font-size: 24px;\n color: #FFFFFF;\n text-decoration: none;\n transition: opacity 0.3s;\n &:hover {\n opacity: 0.8;\n }\n`;\n\nfunction App() {\n const [isNavOpen, setIsNavOpen] = React.useState(false);\n const toggleNav = () => {\n setIsNavOpen(!isNavOpen);\n };\n\n return (\n <>\n \n

\n Cicero AI\n ⋮\n \n

\n \n \n \n \n \n \n START DRAFTING\n \n \n \n \n \n Why Choose Cicero AI\n \n \n \n \n \n Ready to revolutionize your contract process?\n Get Started Free\n \n \n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Cicero AI - AI-powered Contract Creation\n \n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/arthrod/tryingciceroagain/code/main.tsx","extension","actionData","errors"]