-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #455 from amplication/feat/lp-dot-net
feat:add new early access page for .net
- Loading branch information
Showing
10 changed files
with
499 additions
and
269 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
import HubSpotForm from '../../../Common/HubSpotForm'; | ||
|
||
const Form = () => { | ||
const onChangeHandler = (e) => { | ||
const styles = getComputedStyle(e.target, null), | ||
rows = parseInt(e.target.getAttribute('rows')) || 2, | ||
lines = parseInt(styles.getPropertyValue('line-height')) * rows, | ||
padding = parseInt(styles.getPropertyValue('padding-top')) * 2, | ||
border = parseInt(styles.getPropertyValue('border-width')) * 4; | ||
|
||
e.target.style.height = lines + padding + border + 'px'; | ||
e.target.style.height = e.target.scrollHeight + 'px'; | ||
}; | ||
|
||
return ( | ||
<HubSpotForm | ||
hubSpotPortalId="25691669" | ||
hubSpotFormId="176d9837-cfed-481d-9750-423ca002f622" | ||
pageName=".NET early access" | ||
formName="dotnetEarlyAccessForm" | ||
successMessage="Congratulations! We appreciate your interest and will be in touch soon with further instructions." | ||
> | ||
<div className="block relative w-full !mt-6"> | ||
<div className="font-semibold text-sm leading-[22px] max-laptop:text-[16px]"> | ||
Your Details: | ||
</div> | ||
</div> | ||
<div className="relative laptop:w-[calc(50%-8px)] my-2"> | ||
<input | ||
required | ||
type="text" | ||
name="firstname" | ||
placeholder="First Name" | ||
className="leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-light-blue py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-gray hover:border-purple border-lite" | ||
/> | ||
</div> | ||
<div className="relative laptop:w-[calc(50%-8px)] my-2"> | ||
<input | ||
required | ||
type="text" | ||
name="lastname" | ||
placeholder="Last Name" | ||
className="leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-light-blue py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-gray hover:border-purple border-lite" | ||
/> | ||
</div> | ||
<div className="relative laptop:w-[calc(50%-8px)] my-2"> | ||
<input | ||
required | ||
type="email" | ||
name="email" | ||
placeholder="Email" | ||
className="leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-light-blue py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-gray hover:border-purple border-lite" | ||
/> | ||
</div> | ||
<div className="relative laptop:w-[calc(50%-8px)] my-2"> | ||
<input | ||
required | ||
type="text" | ||
name="company" | ||
placeholder="Company" | ||
className="leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-light-blue py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-gray hover:border-purple border-lite" | ||
/> | ||
</div> | ||
<div className="block relative w-full !mt-6"> | ||
<span className="font-semibold text-sm leading-[22px] max-laptop:text-[16px]"> | ||
We would like to hear more about your use case: | ||
</span> | ||
<div className="flex justify-between mt-2 w-full"> | ||
<label className="w-full mt-1 mb-0"> | ||
<textarea | ||
rows="4" | ||
onChange={onChangeHandler} | ||
name="dot_net_use_case" | ||
placeholder="Use case" | ||
className="w-full leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-light-blue py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-gray hover:border-purple border-lite" | ||
></textarea> | ||
</label> | ||
</div> | ||
</div> | ||
</HubSpotForm> | ||
); | ||
}; | ||
|
||
export default Form; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import Form from '../Form'; | ||
import PageHero from '../../../Common/PageHero'; | ||
import dotnetLogo from '../../../../public/images/dotnet/dotnet_logo.svg'; | ||
import Image from 'next/image'; | ||
|
||
const Hero = () => { | ||
return ( | ||
<> | ||
<PageHero | ||
title={'Unlock Next-Level .NET Backend Development'} | ||
subTitle={ | ||
'Join our exclusive early-access program for production-ready services in .NET' | ||
} | ||
subText={`We are bringing the speed, reliability, and scalability that's already trusted by | ||
tens of thousands of Node.js developers, to your .NET projects. | ||
Seamlessly integrate with your existing workflow and accelerate your development by 30X. | ||
Say ‘Goodbye’ to time-consuming tasks and ‘Hello’ to a new era of efficiency with our highly | ||
anticipated .NET backend capabilities.`} | ||
// | ||
imageNode={ | ||
<div className="relative p-[50px] text-left"> | ||
<Form /> | ||
<div | ||
className="absolute w-[100px] h-[100px] rounded-[8px] overflow-hidden flex items-center justify-center text-center | ||
right-0 top-[20px] z-20 rotate-12" | ||
> | ||
<Image src={dotnetLogo} alt={'.net logo'} /> | ||
</div> | ||
</div> | ||
} | ||
/> | ||
</> | ||
); | ||
}; | ||
|
||
export default Hero; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,140 @@ | ||
import Image from 'next/image'; | ||
import Link from 'next/link'; | ||
import enterprise1 from '../../../../public/images/enterprise/enterprise-1.png'; | ||
import enterprise2 from '../../../../public/images/enterprise/enterprise-2.png'; | ||
import enterprise3 from '../../../../public/images/enterprise/enterprise-3.png'; | ||
import enterprise4 from '../../../../public/images/enterprise/enterprise-4.png'; | ||
|
||
const features = [ | ||
{ | ||
image: enterprise1, | ||
title: 'All-in-One Platform', | ||
customClasses: '!pb-8', | ||
secondaryBtn: { | ||
title: 'Learn More', | ||
href: 'https://docs.amplication.com/', | ||
}, | ||
content: | ||
'<p>Amplication Enterprise makes the most of any use case from data-driven applications to complex workflows. Our platform automates the creation of any backend foundations with all standards built-in, so your developers can focus on creating custom solutions for your business.</p>', | ||
}, | ||
{ | ||
image: enterprise2, | ||
title: 'Unparalleled Efficiency and Speed', | ||
customClasses: '!pt-8', | ||
secondaryBtn: { | ||
title: 'Book a Demo', | ||
href: process.env.NEXT_PUBLIC_BOOK_MEETING_URL, | ||
target: '_blank', | ||
}, | ||
content: | ||
'<p>Amplication Enterprise allows you to build, manage and scale applications at the speed of light. With our platform you can create applications faster and with fewer resources. Generate all the necessary foundations for your service in a few clicks and tailor applications to your unique needs.</p>', | ||
buttons: [], | ||
}, | ||
{ | ||
image: enterprise3, | ||
title: 'Secure, Reliable Solutions', | ||
customClasses: '!pb-6', | ||
primaryBtn: { | ||
title: 'Contact Sales', | ||
href: process.env.NEXT_PUBLIC_BOOK_MEETING_URL, | ||
target: '_blank', | ||
}, | ||
secondaryBtn: { | ||
title: 'Start Now', | ||
href: 'https://app.amplication.com/login', | ||
}, | ||
content: | ||
'<p>Amplication Enterprise includes built-in security measures that ensure the safety of your data and applications. Our platform offers Authentication and Authorization options, combined with regular audits, and ongoing vulnerability assessments, so you can rest assured that your applications will run smoothly and reliably.</p>', | ||
}, | ||
{ | ||
image: enterprise4, | ||
title: 'Seamless Integration and Scale', | ||
customClasses: '!pb-8', | ||
primaryBtn: { | ||
title: 'Contact Sales', | ||
href: process.env.NEXT_PUBLIC_BOOK_MEETING_URL, | ||
target: '_blank', | ||
}, | ||
secondaryBtn: { | ||
title: 'Start Now', | ||
href: 'https://app.amplication.com/login', | ||
}, | ||
content: | ||
'<p>Amplication Enterprise is designed to grow with your business. Our platform integrates seamlessly with your existing CI/CD pipelines, enabling you to easily scale with increased business demand.</p>', | ||
}, | ||
]; | ||
|
||
const Features = () => { | ||
return features.map((feature, i) => { | ||
return ( | ||
<section | ||
className={ | ||
'features-page-feature !py-10 desktop:!py-24 ' + | ||
(feature.customClasses ?? '') | ||
} | ||
key={i} | ||
> | ||
<div className="w-full max-w-container m-container p-container laptop:max-w-container-desktop laptop:m-container-desktop laptop:p-container-desktop"> | ||
<div | ||
className={ | ||
(i % 2 !== 0 ? 'flex-row-reverse ' : '') + | ||
'row d-flex justify-content-between align-items-center feature-page-card py-0 laptop:py-6' | ||
} | ||
> | ||
<div | ||
className={ | ||
(i % 2 !== 0 ? 'desktop:!px-9 ' : '') + | ||
'col-sm-12 col-md-6 pb-0 desktop:pt-8 pr-3' | ||
} | ||
> | ||
<div className="!text-[24px] desktop:!text-[32px] !leading-[36px] desktop:!leading-[48px] font-semibold pb-2"> | ||
{feature.title} | ||
</div> | ||
<div | ||
className="text-sm desktop:text-lg text-white desktop:!leading-[27px] max-w-[600px]" | ||
dangerouslySetInnerHTML={{ __html: feature.content }} | ||
></div> | ||
<div className="buttons-wrapper d-flex tablet:align-items-center justify-content-start mt-4"> | ||
{feature.primaryBtn && ( | ||
<Link href={feature.primaryBtn.href} passHref={true}> | ||
<a | ||
className="btn btn-primary btn-sm !h-[34px] mb-2 mr-6 w-full !font-normal !text-sm !max-w-[140px]" | ||
target={feature.primaryBtn.target ?? '_self'} | ||
> | ||
{feature.primaryBtn.title} | ||
</a> | ||
</Link> | ||
)} | ||
{feature.secondaryBtn && ( | ||
<Link href={feature.secondaryBtn.href ?? ''} passHref={true}> | ||
<a | ||
className="btn btn-outline-light btn-sm !h-[34px] mb-2 laptop:mr-2 w-full !font-normal !text-sm !max-w-[140px]" | ||
target={feature.secondaryBtn.target ?? '_self'} | ||
> | ||
{feature.secondaryBtn.title} | ||
</a> | ||
</Link> | ||
)} | ||
</div> | ||
</div> | ||
<div | ||
className="col-sm-12 col-md-6 desktop:left-4 desktop:top-6 feature-image" | ||
data-aos="fade-up-left" | ||
> | ||
{feature.image && ( | ||
<Image | ||
className="max-w-[710px] !visible" | ||
src={feature.image} | ||
alt={feature.title} | ||
objectFit={'cover'} | ||
/> | ||
)} | ||
</div> | ||
</div> | ||
</div> | ||
</section> | ||
); | ||
}); | ||
}; | ||
|
||
export default Features; |
Oops, something went wrong.