eventpulse-mcp

import React from 'react'; import './LandingPage.css'; const LandingPage = () => { return ( <div className="landing-page"> {/* Background Gradients */} <div className="background-gradient" /> {/* Model Glow */} <svg className="model-glow" viewBox="0 0 981 1117" fill="none" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="451.398" cy="566.663" rx="290.753" ry="419" transform="rotate(-11.8173 451.398 566.663)" fill="url(#paint0_radial_21_2037)"/> <g style={{mixBlendMode: 'plus-lighter'}} filter="url(#filter0_f_21_2037)"> <ellipse cx="490.5" cy="554" rx="340" ry="204.5" transform="rotate(90 490.5 554)" fill="url(#paint1_radial_21_2037)"/> </g> <defs> <filter id="filter0_f_21_2037" x="0.559875" y="-71.4401" width="979.88" height="1250.88" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB"> <feFlood floodOpacity="0" result="BackgroundImageFix"/> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/> <feGaussianBlur stdDeviation="142.72" result="effect1_foregroundBlur_21_2037"/> </filter> <radialGradient id="paint0_radial_21_2037" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(451.398 609.971) rotate(90) scale(375.693 260.701)"> <stop stopColor="#97AFC6" stopOpacity="0.8"/> <stop offset="1" stopColor="#97AFC6" stopOpacity="0"/> </radialGradient> <radialGradient id="paint1_radial_21_2037" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(490.5 533.312) rotate(90) scale(284.255 957.258)"> <stop stopColor="#A5A6A6"/> <stop offset="1" stopColor="#565656"/> </radialGradient> </defs> </svg> {/* Small Glow */} <svg className="small-glow" viewBox="0 0 657 590" fill="none" xmlns="http://www.w3.org/2000/svg"> <g style={{mixBlendMode: 'plus-lighter'}} filter="url(#filter0_f_21_3005)"> <ellipse cx="324.653" cy="295.088" rx="108.464" ry="65.238" transform="rotate(-165 324.653 295.088)" fill="url(#paint0_radial_21_3005)"/> </g> <defs> <filter id="filter0_f_21_3005" x="-6.92291" y="0.645203" width="663.152" height="588.885" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB"> <feFlood floodOpacity="0" result="BackgroundImageFix"/> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/> <feGaussianBlur stdDeviation="112.72" result="effect1_foregroundBlur_21_3005"/> </filter> <radialGradient id="paint0_radial_21_3005" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(324.653 288.488) rotate(90) scale(90.6809 305.377)"> <stop stopColor="#A5A6A6"/> <stop offset="1" stopColor="#565656"/> </radialGradient> </defs> </svg> {/* Stars Container */} <div className="stars-container"> {/* Mini Stars - Pink/Red */} <div className="mini-star mini-star-pink" style={{left: '1148px', top: '265px'}} /> <div className="mini-star mini-star-pink" style={{left: '1230px', top: '415px'}} /> <div className="mini-star mini-star-pink" style={{left: '1082px', top: '109px'}} /> <div className="mini-star mini-star-pink" style={{left: '888px', top: '81px'}} /> <div className="mini-star mini-star-pink" style={{left: '1156px', top: '366px'}} /> <div className="mini-star mini-star-pink" style={{left: '991px', top: '485px'}} /> <div className="mini-star mini-star-pink" style={{left: '808px', top: '593px'}} /> <div className="mini-star mini-star-pink" style={{left: '505px', top: '740px'}} /> <div className="mini-star mini-star-pink" style={{left: '568px', top: '766px'}} /> <div className="mini-star mini-star-pink" style={{left: '307px', top: '570px'}} /> <div className="mini-star mini-star-pink" style={{left: '230px', top: '627px'}} /> <div className="mini-star mini-star-pink" style={{left: '75px', top: '352px'}} /> <div className="mini-star mini-star-pink" style={{left: '514px', top: '601px'}} /> <div className="mini-star mini-star-pink" style={{left: '874px', top: '634px'}} /> <div className="mini-star mini-star-pink" style={{left: '477px', top: '370px'}} /> <div className="mini-star mini-star-pink" style={{left: '489px', top: '390px'}} /> <div className="mini-star mini-star-pink" style={{left: '327px', top: '429px'}} /> <div className="mini-star mini-star-pink" style={{left: '395px', top: '480px'}} /> <div className="mini-star mini-star-pink" style={{left: '437px', top: '478px'}} /> <div className="mini-star mini-star-pink" style={{left: '248px', top: '517px'}} /> <div className="mini-star mini-star-pink" style={{left: '183px', top: '452px'}} /> <div className="mini-star mini-star-pink" style={{left: '72px', top: '621px'}} /> <div className="mini-star mini-star-pink" style={{left: '409px', top: '667px'}} /> <div className="mini-star mini-star-pink" style={{left: '174px', top: '728px'}} /> <div className="mini-star mini-star-pink" style={{left: '307px', top: '679px'}} /> <div className="mini-star mini-star-pink" style={{left: '389px', top: '750px'}} /> <div className="mini-star mini-star-pink" style={{left: '392px', top: '410px'}} /> <div className="mini-star mini-star-pink" style={{left: '831px', top: '659px'}} /> <div className="mini-star mini-star-pink" style={{left: '204px', top: '278px'}} /> <div className="mini-star mini-star-pink" style={{left: '455px', top: '575px'}} /> <div className="mini-star mini-star-pink" style={{left: '965px', top: '787px'}} /> <div className="mini-star mini-star-pink" style={{left: '481px', top: '438px'}} /> <div className="mini-star mini-star-pink" style={{left: '990px', top: '725px'}} /> <div className="mini-star mini-star-pink" style={{left: '567px', top: '560px'}} /> {/* Mini Stars - White */} <div className="mini-star mini-star-white" style={{left: '739px', top: '395px'}} /> <div className="mini-star mini-star-white" style={{left: '660px', top: '366px'}} /> <div className="mini-star mini-star-white" style={{left: '614px', top: '339px'}} /> <div className="mini-star mini-star-white" style={{left: '901px', top: '526px'}} /> <div className="mini-star mini-star-white" style={{left: '540px', top: '468px'}} /> <div className="mini-star mini-star-white" style={{left: '530px', top: '501px'}} /> <div className="mini-star mini-star-white" style={{left: '488px', top: '528px'}} /> <div className="mini-star mini-star-white" style={{left: '475px', top: '577px'}} /> <div className="mini-star mini-star-white" style={{left: '558px', top: '607px'}} /> <div className="mini-star mini-star-white" style={{left: '455px', top: '616px'}} /> <div className="mini-star mini-star-white" style={{left: '631px', top: '643px'}} /> <div className="mini-star mini-star-white" style={{left: '614px', top: '621px'}} /> <div className="mini-star mini-star-white" style={{left: '716px', top: '577px'}} /> <div className="mini-star mini-star-white" style={{left: '677px', top: '627px'}} /> <div className="mini-star mini-star-white" style={{left: '836px', top: '661px'}} /> <div className="mini-star mini-star-white" style={{left: '914px', top: '665px'}} /> <div className="mini-star mini-star-white" style={{left: '918px', top: '588px'}} /> <div className="mini-star mini-star-white" style={{left: '1007px', top: '598px'}} /> <div className="mini-star mini-star-white" style={{left: '962px', top: '542px'}} /> <div className="mini-star mini-star-white" style={{left: '611px', top: '751px'}} /> {/* Medium Stars */} <div className="medium-star" style={{left: '1274px', top: '626px'}} /> <div className="medium-star" style={{left: '653px', top: '693px'}} /> </div> {/* Navigation */} <nav className="navigation"> <div className="nav-content"> <div className="logo"> <svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"> <g filter="url(#filter0_d_21_3007)"> <circle cx="16.2142" cy="16.5" r="14.5" fill="url(#paint0_radial_21_3007)"/> </g> <defs> <filter id="filter0_d_21_3007" x="0.214203" y="0.5" width="32" height="32" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB"> <feFlood floodOpacity="0" result="BackgroundImageFix"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_21_3007"/> <feOffset/> <feGaussianBlur stdDeviation="0.5"/> <feComposite in2="hardAlpha" operator="out"/> <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_21_3007"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_21_3007" result="shape"/> </filter> <radialGradient id="paint0_radial_21_3007" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.7142 20.5) rotate(-61.607) scale(21.0297)"> <stop stopColor="#D9D9D9"/> <stop offset="0.755" stopColor="#353535"/> <stop offset="1" stopColor="#353535"/> </radialGradient> </defs> </svg> </div> <div className="nav-menu"> <div className="nav-item dropdown"> <span>Features</span> <svg className="caret-icon" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17.666 8.38491L11.242 14.8089C11.1824 14.8686 11.1115 14.916 11.0335 14.9483C10.9555 14.9806 10.8719 14.9973 10.7875 14.9973C10.7031 14.9973 10.6195 14.9806 10.5415 14.9483C10.4635 14.916 10.3927 14.8686 10.333 14.8089L3.90907 8.38491C3.78853 8.26437 3.72081 8.10088 3.72081 7.93041C3.72081 7.75994 3.78853 7.59646 3.90907 7.47592C4.02961 7.35538 4.19309 7.28766 4.36356 7.28766C4.53403 7.28766 4.69752 7.35538 4.81806 7.47592L10.7875 13.4462L16.757 7.47592C16.8167 7.41623 16.8875 7.36889 16.9655 7.33659C17.0435 7.30428 17.1271 7.28766 17.2115 7.28766C17.2959 7.28766 17.3795 7.30428 17.4575 7.33659C17.5354 7.36889 17.6063 7.41623 17.666 7.47592C17.7257 7.5356 17.773 7.60646 17.8053 7.68444C17.8376 7.76242 17.8542 7.846 17.8542 7.93041C17.8542 8.01482 17.8376 8.0984 17.8053 8.17638C17.773 8.25437 17.7257 8.32522 17.666 8.38491Z" fill="white"/> </svg> </div> <div className="nav-item">Use Cases</div> <div className="nav-item dropdown"> <span>Pricing</span> <svg className="caret-icon" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17.7276 8.38491L11.3037 14.8089C11.244 14.8686 11.1732 14.916 11.0952 14.9483C11.0172 14.9806 10.9336 14.9973 10.8492 14.9973C10.7648 14.9973 10.6812 14.9806 10.6032 14.9483C10.5252 14.916 10.4543 14.8686 10.3947 14.8089L3.97073 8.38491C3.85019 8.26437 3.78247 8.10088 3.78247 7.93041C3.78247 7.75994 3.85019 7.59646 3.97073 7.47592C4.09127 7.35538 4.25475 7.28766 4.42522 7.28766C4.59569 7.28766 4.75918 7.35538 4.87972 7.47592L10.8492 13.4462L16.8186 7.47592C16.8783 7.41623 16.9492 7.36889 17.0272 7.33659C17.1052 7.30428 17.1887 7.28766 17.2731 7.28766C17.3575 7.28766 17.4411 7.30428 17.5191 7.33659C17.5971 7.36889 17.668 7.41623 17.7276 7.47592C17.7873 7.5356 17.8347 7.60646 17.867 7.68444C17.8993 7.76242 17.9159 7.846 17.9159 7.93041C17.9159 8.01482 17.8993 8.0984 17.867 8.17638C17.8347 8.25437 17.7873 8.32522 17.7276 8.38491Z" fill="white"/> </svg> </div> <div className="nav-item">Resources</div> <div className="nav-item">Login</div> </div> <div className="nav-cta"> <button className="waitlist-btn">Join waitlist</button> </div> </div> </nav> {/* AI Model Image */} <div className="ai-model"> <img src="https://api.builder.io/api/v1/image/assets/TEMP/0a70cc339600c4580208613999cba49dbf292524?width=2066" alt="AI Model" /> </div> {/* Main Content */} <main className="main-content"> {/* Badge */} <div className="badge"> <div className="badge-new">NEW</div> <span>Latest integration just arrived</span> </div> {/* Title */} <h1 className="main-title"> Amplify Every Festival Moment with AI </h1> {/* Subtitle */} <p className="subtitle"> Transform your festival marketing with intelligent campaign generation, cultural insights, and automated content that resonates with every audience. </p> {/* CTA Button */} <button className="get-started-btn"> Get Started </button> </main> {/* Right Side Elements */} <div className="elements-container"> <div className="beam-effects"> {/* Beam SVG */} <svg className="beam" viewBox="0 0 592 601" fill="none" xmlns="http://www.w3.org/2000/svg"> <g style={{mixBlendMode: 'plus-lighter'}} opacity="0.5" filter="url(#filter0_f_2006_569)"> <path d="M689.794 265.889L689.794 334.262L51.9974 429.712L51.9974 170.445L689.794 265.889Z" fill="url(#paint0_linear_2006_569)"/> </g> <g style={{mixBlendMode: 'plus-lighter'}} filter="url(#filter1_f_2006_569)"> <path d="M689.794 265.886L689.794 334.26L51.9974 334.271L51.9974 265.894L689.794 265.886Z" fill="url(#paint1_linear_2006_569)"/> </g> <g style={{mixBlendMode: 'plus-lighter'}} filter="url(#filter2_f_2006_569)"> <path d="M689.794 265.882L689.794 334.256L51.9974 525.156L51.9974 75L689.794 265.882Z" fill="url(#paint2_linear_2006_569)"/> </g> <defs> <filter id="filter0_f_2006_569" x="1.99744" y="120.445" width="737.796" height="359.267" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB"> <feFlood floodOpacity="0" result="BackgroundImageFix"/> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/> <feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_2006_569"/> </filter> <filter id="filter1_f_2006_569" x="26.9974" y="240.886" width="687.796" height="118.384" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB"> <feFlood floodOpacity="0" result="BackgroundImageFix"/> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/> <feGaussianBlur stdDeviation="12.5" result="effect1_foregroundBlur_2006_569"/> </filter> <filter id="filter2_f_2006_569" x="-23.0026" y="0" width="787.796" height="600.156" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB"> <feFlood floodOpacity="0" result="BackgroundImageFix"/> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/> <feGaussianBlur stdDeviation="37.5" result="effect1_foregroundBlur_2006_569"/> </filter> <linearGradient id="paint0_linear_2006_569" x1="689.794" y1="292.749" x2="84.2377" y2="292.749" gradientUnits="userSpaceOnUse"> <stop stopColor="#4C4C4C"/> <stop offset="1" stopColor="#4C4C4C" stopOpacity="0"/> </linearGradient> <linearGradient id="paint1_linear_2006_569" x1="689.794" y1="292.747" x2="84.2377" y2="292.747" gradientUnits="userSpaceOnUse"> <stop stopColor="#4C4C4C"/> <stop offset="1" stopColor="#4C4C4C" stopOpacity="0"/> </linearGradient> <linearGradient id="paint2_linear_2006_569" x1="689.794" y1="292.743" x2="84.2377" y2="292.743" gradientUnits="userSpaceOnUse"> <stop stopColor="#4C4C4C"/> <stop offset="1" stopColor="#4C4C4C" stopOpacity="0"/> </linearGradient> </defs> </svg> </div> <div className="overlay-gradient" /> <div className="side-image"> <img src="https://api.builder.io/api/v1/image/assets/TEMP/1b40d2129cc49bad3f309265fb67c98f7a97ae14?width=480" alt="Frame 27" /> </div> </div> {/* Main Gradient */} <svg className="main-gradient" viewBox="0 0 1437 601" fill="none" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="358.469" cy="1067.81" rx="933.5" ry="584.5" transform="rotate(43.762 358.469 1067.81)" fill="url(#paint0_radial_21_2035)" fillOpacity="0.65"/> <defs> <radialGradient id="paint0_radial_21_2035" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(358.469 1067.81) rotate(90) scale(584.5 933.5)"> <stop stopColor="white" stopOpacity="0.5"/> <stop offset="1" stopColor="white" stopOpacity="0"/> </radialGradient> </defs> </svg> </div> ); }; export default LandingPage;