-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
532a311
commit 866329b
Showing
3 changed files
with
79 additions
and
67 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 |
---|---|---|
@@ -1,45 +1,57 @@ | ||
import React from 'react' | ||
import PropTypes from 'prop-types'; | ||
import 'tailwindcss/tailwind.css'; | ||
export default function Cta() { | ||
|
||
function Cta({ title, description, buttonText, buttonLink, imageSrc, }) { | ||
return ( | ||
<div> | ||
{/* | ||
Heads up! 👋 | ||
This component comes with some `rtl` classes. Please remove them if they are not needed in your project. | ||
*/} | ||
|
||
<section className="overflow-hidden bg-gray-50 sm:grid sm:grid-cols-2"> | ||
<div className="p-8 md:p-12 lg:px-16 lg:py-24"> | ||
<div className="mx-auto max-w-xl text-center ltr:sm:text-left rtl:sm:text-right"> | ||
<h2 className="text-2xl font-bold text-gray-900 md:text-3xl"> | ||
Lorem, ipsum dolor sit amet consectetur adipisicing elit | ||
</h2> | ||
|
||
<p className="hidden text-gray-500 md:mt-4 md:block"> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam | ||
sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue. Aliquet amet volutpat | ||
quisque ut interdum tincidunt duis. | ||
</p> | ||
<section className="overflow-hidden bg-gray-50 sm:grid sm:grid-cols-2"> | ||
<div className="p-8 md:p-12 lg:px-16 lg:py-24"> | ||
<div className="mx-auto max-w-xl text-center ltr:sm:text-left rtl:sm:text-right"> | ||
<h2 className="text-2xl font-bold text-gray-900 md:text-3xl"> | ||
{title} | ||
</h2> | ||
|
||
<div className="mt-4 md:mt-8"> | ||
<a | ||
href="#" | ||
className="inline-block rounded bg-emerald-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-emerald-700 focus:outline-none focus:ring focus:ring-yellow-400" | ||
> | ||
Get Started Today | ||
</a> | ||
</div> | ||
</div> | ||
</div> | ||
<p className="hidden text-gray-500 md:mt-4 md:block"> | ||
{description} | ||
</p> | ||
|
||
<img | ||
alt="Student" | ||
src="https://images.unsplash.com/photo-1464582883107-8adf2dca8a9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" | ||
className="h-56 w-full object-cover sm:h-full" | ||
/> | ||
</section> | ||
<div className="mt-4 md:mt-8"> | ||
<a | ||
href={buttonLink} | ||
className={`inline-block rounded px-12 py-3 text-sm font-medium text-white transition focus:outline-none focus:ring focus:ring-yellow-400 bg-yellow-500 hover:bg-yellow-600`} | ||
> | ||
{buttonText} | ||
</a> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<img | ||
alt="Student" | ||
src={imageSrc} | ||
className="h-56 w-full object-cover sm:h-full" | ||
/> | ||
</section> | ||
</div> | ||
) | ||
} | ||
|
||
Cta.propTypes = { | ||
title: PropTypes.string, | ||
description: PropTypes.string, | ||
buttonText: PropTypes.string, | ||
buttonLink: PropTypes.string, | ||
imageSrc: PropTypes.string, | ||
}; | ||
|
||
Cta.defaultProps = { | ||
title: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit', | ||
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue. Aliquet amet volutpat quisque ut interdum tincidunt duis.', | ||
buttonText: 'Get Started Today', | ||
buttonLink: '#', | ||
imageSrc: 'https://images.unsplash.com/photo-1464582883107-8adf2dca8a9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80', | ||
|
||
}; | ||
|
||
export default Cta; |
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