Skip to content

Commit

Permalink
Add new feature boxes
Browse files Browse the repository at this point in the history
  • Loading branch information
@onursenture
onursenture committed Dec 23, 2019
1 parent 4e8605c commit 2fc4f1e
Show file tree
Hide file tree
Showing 11 changed files with 102 additions and 44 deletions.
Binary file added public/showcase/resources/images/home/react-accesibility.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/showcase/resources/images/home/react-community.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/showcase/resources/images/home/react-components.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/showcase/resources/images/home/react-mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/showcase/resources/images/home/react-opensource.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/showcase/resources/images/home/react-pro.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/showcase/resources/images/home/react-productivity.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/showcase/resources/images/home/react-templates.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/showcase/resources/images/home/react-themes.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 22 additions & 5 deletions src/sass/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,12 @@
display: flex;
}

@mixin shadow($value...) {
-webkit-box-shadow: $value;
-moz-box-shadow: $value;
box-shadow: $value;
}

body {
margin: 0px;
height: 100%;
Expand Down Expand Up @@ -979,24 +985,35 @@ body {
text-align: center;
padding: 30px;

.feature-card {
background-color: #ffffff;
@include shadow(0 0.8px 1.7px rgba(0, 0, 0, 0.008), 0 1.9px 4.2px rgba(0, 0, 0, 0.012),0 3.6px 7.9px rgba(0, 0, 0, 0.015),0 6.5px 14.1px rgba(0, 0, 0, 0.018),0 12.1px 26.3px rgba(0, 0, 0, 0.022),0 29px 63px rgba(0, 0, 0, 0.03));
height: 100%;
border-radius: 4px;

.feature-card-detail {
padding: 0 16px 16px 16px;
}
}

h3 {
font-size:24px;
color: #333333;
margin-bottom: 25px;
}

img {
width: 57px;
}

.feature-name {
display: block;
font-weight: bold;
font-size: 16px;
margin-top: 4px;
margin-top: 1em;
color: #20272a;
}

img {
width: 100%;;
}

.p-g{
p {
color: #20272a;
Expand Down
119 changes: 80 additions & 39 deletions src/showcase/home/HomeComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,45 +20,86 @@ export class HomeComponent extends Component {
a vendor with years of expertise in developing open source UI solutions. For project news and updates, please <a href="https://twitter.com/primereact">follow us on twitter</a> and <a href="https://www.primefaces.org/category/primereact/">visit our blog</a>.</p>

<div className="p-grid">
<div className="p-col-12 p-md-3">
<img alt="component" src="showcase/resources/images/home/icon-component.svg" />
<span className="feature-name">70+ COMPONENTS</span>
<p>The most complete set of native widgets featuring 70+ easy to use components for all your UI requirements.</p>
</div>
<div className="p-col-12 p-md-3">
<img alt="opensource" src="showcase/resources/images/home/icon-opensource.svg" />
<span className="feature-name">OPEN SOURCE</span>
<p>Hosted at <a href="https://github.com/primefaces/primereact">GitHub</a>, all widgets are open source and free to use under MIT license. Feel the power of open source.</p>
</div>
<div className="p-col-12 p-md-3">
<img alt="themes" src="showcase/resources/images/home/icon-themes.svg" />
<span className="feature-name">THEMES</span>
<p>Don’t get tied up in just one look&feel. Choose from a variety of options including material and flat design.</p>
</div>
<div className="p-col-12 p-md-3">
<img alt="community" src="showcase/resources/images/home/icon-community.svg" />
<span className="feature-name">COMMUNITY</span>
<p>Join PrimeReact community to become a part of an active, vibrant and growing open source foundation.</p>
</div>
<div className="p-col-12 p-md-3">
<img alt="productive" src="showcase/resources/images/home/icon-productive.svg" />
<span className="feature-name">PRODUCTIVITY</span>
<p>Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.</p>
</div>
<div className="p-col-12 p-md-3">
<img alt="mobile" src="showcase/resources/images/home/icon-mobile.svg" />
<span className="feature-name">MOBILE</span>
<p>Enhanced mobile user experience with touch optimized responsive design elements.</p>
</div>
<div className="p-col-12 p-md-3">
<img alt="templates" src="showcase/resources/images/home/icon-templates.svg" />
<span className="feature-name">TEMPLATES</span>
<p>Professionally designed highly customizable native React application templates to get started in no time. </p>
</div>
<div className="p-col-12 p-md-3">
<img alt="templates" src="showcase/resources/images/home/icon-sigma.svg" />
<span className="feature-name">FREE ADMIN TEMPLATE</span>
<p>An elegant admin template powered by create-react-app.</p>
<div className="p-col-12 p-md-4">
<div className="feature-card">
<img alt="components" src="showcase/resources/images/home/react-components.png" />
<div className="feature-card-detail">
<span className="feature-name">70+ COMPONENTS</span>
<p>The most complete set of native widgets featuring 70+ easy to use components for all your UI requirements.</p>
</div>
</div>
</div>
<div className="p-col-12 p-md-4">
<div className="feature-card">
<img alt="opensource" src="showcase/resources/images/home/react-opensource.png" />
<div className="feature-card-detail">
<span className="feature-name">OPEN SOURCE</span>
<p>Hosted at <a href="https://github.com/primefaces/primereact">GitHub</a>, all widgets are open source and free to use under MIT license. Feel the power of open source.</p>
</div>
</div>
</div>
<div className="p-col-12 p-md-4">
<div class="feature-card">
<img alt="themes" src="showcase/resources/images/home/react-themes.png" />
<div className="feature-card-detail">
<span className="feature-name">THEMES</span>
<p>Don’t get tied up in just one look&feel. Choose from a variety of options including material and bootstrap design.</p>
</div>
</div>
</div>
<div className="p-col-12 p-md-4">
<div className="feature-card">
<img alt="templates" src="showcase/resources/images/home/react-templates.png" />
<div className="feature-card-detail">
<span className="feature-name">TEMPLATES</span>
<p>Professionally designed highly customizable PrimeReact application templates to get started in no time.</p>
</div>
</div>
</div>
<div className="p-col-12 p-md-4">
<div className="feature-card">
<img alt="accesibility" src="showcase/resources/images/home/react-accesibility.png" />
<div className="feature-card-detail">
<span className="feature-name">ACCESSIBILITY</span>
<p>Fully accessible and in complaince with Section 508 standards.</p>
</div>
</div>
</div>
<div className="p-col-12 p-md-4">
<div className="feature-card">
<img alt="pro" src="showcase/resources/images/home/react-pro.png" />
<div className="feature-card-detail">
<span className="feature-name">PRO SUPPORT</span>
<p>With the exclusive services of Pro account, you no longer need to post your questions in the community forum and your issues to community issue tracker.</p>
</div>
</div>
</div>
<div className="p-col-12 p-md-4">
<div className="feature-card">
<img alt="productivity" src="showcase/resources/images/home/react-productivity.png" />
<div className="feature-card-detail">
<span className="feature-name">PRODUCTIVITY</span>
<p>Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.</p>
</div>
</div>
</div>
<div className="p-col-12 p-md-4">
<div className="feature-card">
<img alt="community" src="showcase/resources/images/home/react-community.png" />
<div className="feature-card-detail">
<span className="feature-name">COMMUNITY</span>
<p>Join PrimeReact community to become a part of an active, vibrant and growing open source foundation.</p>
</div>
</div>
</div>
<div className="p-col-12 p-md-4">
<div className="feature-card">
<img alt="mobile" src="showcase/resources/images/home/react-mobile.png" />
<div className="feature-card-detail">
<span className="feature-name">MOBILE</span>
<p>Enhanced mobile user experience with touch optimized responsive design elements.</p>
</div>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 2fc4f1e

Please sign in to comment.