Startup Landing Page Components for React.js

Related tags

CSS neal-react
Overview

neal-react

neal-react is a collection of reactjs components to quickly build landing pages. I found that using hosted services like Launchrock doesn't give me enough flexibility, but frameworks like Bootstrap are too low-level and lead to lots of repetitive code. I wanted something in between these two extremees.

Visit the Sample Page

Available Components

Main components:

Third-Party integrations

Documentation

The best way to learn about the components is to look at the code for the sample page. But, basically:

npm install --save neal-react
import React from "react";
import ReactDOM from "react-dom";
import { App, Page, Section, Hero, Navbar, HorizontalSplit } from "neal-react";

ReactDOM.render((
  <App googleAnalyticsKey="UA-42490151-3">
    <Page>
      <Navbar brand="hello">{ /* Your nav */ }</Navbar>
      <Hero className="text-xs-center"> <h1>{ /* Content */ }</h1> </Hero>
      <Section heading="Hello!">
        <HorizontalSplit padding="md"> { /* Content */ } </HorizontalSplit>
      </Section>
      { /* More ... */ }
    </Page>
  </App>
), document.getElementById("main"));

Other dependencies that should be included from a CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Custom Styling

Styling can be overwritten by setting the appropriate SASS Variables in your code.

Using with Structor

Structor is a visual development environment for node.js web applications with React UI. You can find a boilerplate project for neal on the Structor Marketplace and the corresponding code in this repository. A big thanks to ispelon for implementing this.

Deploying to AWS

If you are using third-party integrations like Stripe or Typeform to capture user information there is no need to write your on backend and you can simply copy your public/ directory to an AWS S3 bucket and enable Static Website Hosting. You can use a script such as this to minifify and upload:

#! /usr/bin/env bash

S3_BUCKET=s3://www.nealjs.com
BASE_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/../" && pwd)"
cd $BASE_DIR

# Build the assets
webpack -p

# Upload to S3
aws s3 cp $BASE_DIR/public/ $S3_BUCKET --recursive
Comments
  • Fix current npm broken. Remove babel-polyfill import

    Fix current npm broken. Remove babel-polyfill import

    Hi @dennybritz

    Current npm 0.2.4 is broken. This PR fix that.

    I changed Object.assign to jQuery.extend. Now is more IE9 and mobile compliant without babel-polyfill dependencies.

    opened by bySabi 4
  • add customizable className to Navbar

    add customizable className to Navbar

    Hi @dennybritz this is for make Navbar more customizable via className

    This way anyone can, for example, create navbar fixed at top navbar-fixed-top.

    sample-page.jsx

    export default (props) => (
      <Page>
        <Navbar brand={brand} className="navbar-fixed-top">
    ...
    

    This PR don´t broke current neal-sample

    opened by bySabi 4
  • Using ES6 features in older browsers

    Using ES6 features in older browsers

    Currently available versions of Internet Explorer used in Windows 7, Window 8.1, Windows Phone 8.1 and Windows 10 do not support ES6 (e.g. Object.assign) natively, and there are no polyfills included with neal-react for ES6 features it uses.

    Due to this issue, a neal-react-based landing page (i.e. nealjs.com) cannot be opened on a Windows phone at all, as there are no third-party browsers for this platform.

    bug 
    opened by Chudesnov 4
  • Update and test everything

    Update and test everything

    Since I don't like to take and use something without giving something back in return, I've taken the liberty to upgrade your entire package. Stating from Babel 6 and working my way to the remainder modules, everything has been updated and subsequently tested in conjunction with your other package, neal-sample which I'll be pull submitting shortly as well.

    One thing I didn't touch was linting since everybody has their own preference, however I would recommend looking into this aspect of your build.

    opened by bartekus 3
  • Currency symbol from Font Awesome?

    Currency symbol from Font Awesome?

    $ symbol has a wide support of web fonts, but some currency, for example Russian ruble \u20BD has not.

    It would be nice to be able to select the currency symbol in pricing-table component.

    Not very familiar with React, tried to do, but unsuccessfully:

    <div className="neal-pricing-plan-price-amount"><i className="fa fa-rub"></i> {this.props.price}</div
    
    opened by rmuratov 3
  • typo on sample landing page

    typo on sample landing page

    Under the "batteries included"... "repetetive" should be "repetitive"...sorry could not figure out a better place to report this

    opened by battaile 2
  • Added countdown component

    Added countdown component

    Hi! I used neal-react a few times for creating landing pages for events and I noticed that a timer stating how many days / hours / minutes / seconds are left until the event, is a nice feature and brings a little bit action to the page. I think that adding the countdown component can bring value to the repo. Here an example of the countdown element: countdown What do you think?

    opened by kristinbaumann 1
  • add license title

    add license title

    It's not strictly required, but it's useful metadata, and part of the recommended license template text (see http://choosealicense.com/licenses/isc/ and https://opensource.org/licenses/isc-license)

    opened by waldyrious 1
  • Add link to the component name

    Add link to the component name

    Going through the code then when back to the readme I wanted to jump back to the component code. This PR add ability to do that.

    I also noticed that figure component wasn't listed so I added.

    Great job btw.

    opened by weblancaster 1
  • React 16 compatibility?

    React 16 compatibility?

    I tried using this library with an app that uses React 16 and I get errors that look to be due to use of deprecated features. Are there any plans to bring this library up-to-date with recent React changes? thanks

    opened by asharafshahi 0
  • Add support for React 16

    Add support for React 16

    Fixes #36 and #32.

    Using prop-types to allow for React 16 support.

    There were also multiple places where we were passing through props to elements that we didn't want to (some are bad and React complains). Instead of passing {...this.props} in these cases, I destructured the props and only passed through the extras.

    opened by gabergg 0
  • incompatible with React 16?

    incompatible with React 16?

    I tried using this library with an app that uses React 16 and I get errors that look to be due to use of deprecated features. Are there any plans to bring this library up-to-date with recent React changes? thanks

    opened by asharafshahi 0
  • Virus Alert: The nealjs website at the top of this repo tries to install a data logging chrome plugin.

    Virus Alert: The nealjs website at the top of this repo tries to install a data logging chrome plugin.

    This repo points to nealjs, which has either been hijacked or is an intentional malware. The site asks you to click a "security button", which then opens a dialog box for installing a chrome extension that can access & alter all websites/pages.

    opened by ajhool 4
  • Unknown prop `backgroundImage` on <div> tag

    Unknown prop `backgroundImage` on

    Use of {... this.props} is causing this error in the browser console:

    Unknown prop `backgroundImage` on <div> tag
    

    From https://facebook.github.io/react/warnings/unknown-prop.html

    Are you using {...this.props} or cloneElement(element, this.props)? Your component is transferring its own props directly to a child element (eg. https://facebook.github.io/react/docs/transferring-props.html). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.

    opened by chrismwendt 0
Owner
Denny Britz
High-school dropout. Ex Google Brain, Stanford, Berkeley. Into Startups, Deep Learning. Writing at wildml.com and dennybritz.com. Lived in 日本 and 한국
Denny Britz
coala Landing Page - https://gitlab.com/coala/landing is needed as backend

landing-frontend coala Landing Page - https://gitlab.com/coala/landing is needed as backend Usage To run locally: $ git clone https://github.com/coala

coala development group 31 Oct 30, 2022
A package of small but beautiful React components from the planet, Pluto. 🔵 Get minimal components for your React based applications 😍

React Pluto Component Design System + UI Kit A package of small but beautiful React components from the planet Pluto. To install the latest version, r

Yash Sehgal 17 Aug 8, 2022
A responsive, Bootstrap landing page template created by Start Bootstrap

Start Bootstrap - Landing Page Landing Page is a multipurpose landing page template for Bootstrap created by Start Bootstrap. Preview View Live Previe

Start Bootstrap 1.4k Jan 3, 2023
Minimal landing page for developers

Dev Landing Page Minimal landing page for developers. Developers don't talk much. Their code does all the talking. So here's a minimal landing page fo

Dinesh Pandiyan 1.2k Jan 4, 2023
Increase your landing page conversion rates.

Ouibounce Originally created by Carl Sednaoui from MailCharts. Maintained and improved by generous contributors. Ouibounce: A small library enabling y

Carl Sednaoui 2.3k Dec 9, 2022
Esri GitHub landing page

esri.github.io Landing page for Esri open source projects. Both the project categories and search suggestions in http://esri.github.io are powered by

Esri 470 Dec 31, 2022
Tailwind CSS Starter Template - Landing Page

Tailwind Toolbox - Landing Page Template Landing Page is an open source, generic landing page template for Tailwind CSS created by Tailwind Toolbox. G

Tailwind Toolbox 908 Jan 8, 2023
A web app landing page theme created by Start Bootstrap

Start Bootstrap - New Age New Age is a web app landing page theme for Bootstrap created by Start Bootstrap. Preview View Live Preview Status Download

Start Bootstrap 996 Dec 26, 2022
Landing page starter

?? Fresh Fresh is a free landing page starter built by cssninjaStudio. ✌️ preview Check out the live demo by clicking here. Fresh is built with Bulma

cssninja 486 Dec 23, 2022
🖼 A pure client-side landing page template that you can fork, customize and host freely. Relies on Mailchimp and Google Analytics.

landing-page-boilerplate A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. usi

Adrien Joly 129 Dec 24, 2022
Serverless Pre-Rendering Landing Page

Serverless Pre-Rendering Demo Read the blog post Checkout the demo Developing By default, the content on the site is based off our public Notion page.

Vercel 389 Dec 21, 2022
🎉 Personal landing page template

Landing Page Personal landing page template. Designed to keep simplicity in mind in both setup and UI. Stack HTML CSS Font Awesome Themes Couple custo

Madza 77 Dec 22, 2022
FREE Bootstrap Landing Page Template for Developers and Startups

Theme Details & Demo Details: https://themes.3rdwavemedia.com/bootstrap-templates/startup/appkit-landing-free-bootstrap-theme-for-developers-and-start

Xiaoying Riley 158 Nov 30, 2022
a Plex landing page that redirects you to various sites.

PlexRedirect a Plex landing page that redirects you to various sites. Blank spaces are where your server name goes. If you don't have a server name yo

null 222 Dec 29, 2022
Projeto responsivo, que simula uma Landing Page de uma site de turismos.

FlexTurismos Projeto responsivo, que simula uma Landing Page de um site de turismos. Tecnologias utilizadas: Site com a tela interia Click aqui para a

Ricardo 1 Jan 29, 2022
Ta-vivo Landing page

Ta-vivo landing page Getting Started Prerequisites Node.js 12+ (versions below could work, but are not tested) Installing Clone the repository Install

Ta-vivo 6 Oct 10, 2022
A Unique Food order landing page web application called 'HOMELY' where you can select available meals and add them to cart then order them.

End Result Click the link : https://foodapp-by-eniola.netlify.com Getting Started with Create React App This project was bootstrapped with Create Reac

Eniola Odunmbaku 26 Dec 31, 2022
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web ?? ?? ?? Version 8 of @fluentui/react is now available on npm! ?? ?? ?? See the release notes for more info, and please file an issue if

Microsoft 14.5k Jan 4, 2023
Set of react components based on styled-components

React to styled Links Documentation Contributing Ask question or give feedback Packages @react-to-styled/components – all components in one package @r

null 11 Jan 1, 2023