WEETLE

Documentation

Head over to WEETLE documentation for more detailed & smooth information flow.

Get your WEETLE website within 24 hours

Fill out this form and get your customized WEETLE website within 24 hours :)

Get Involved

Join the EVOLVE community

Getting Started

Clone the repository

git clone <repo-url>
cd ./weetle/weetle
npm add
npm start

Only few components of WEETLE library are mentioned here, switch over to WEETLE documentation to explore more.

Key elements

Navbar

import React from 'react';
import Navbar from './components/navbar/Navbar';

export default function App() {
  return (
    <div>
      <Navbar type="primary" url={"https://i.ibb.co/mDpBP1s/logo-evolve.png"}/>
      <Navbar type="secondary" url={"https://i.ibb.co/mDpBP1s/logo-evolve.png"}/>
    </div>
  );
}

Check the modified changes on http://localhost:3000.

Use the themes primary or secondary respectively for the preferred navbar

Home

import React from 'react';
import Home from './components/home/Home';

export default function App() {
  return (
    <div>
      <Home company_name={"EVOLVE.IO"} about_company={"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type partial."}/>
    </div>
  );
}

Services

import React from 'react';
import Service from "./components/services/Service";
import Cards from "./components/cards/Cards";

export default function App() {
  return (
    <div>
          <Service
        header={
          "We provide quality plus aesthetic content related to personality and it's unique connection with other segments of life"
        }
      />
      <div className="cards_services">
        <Cards type="primary" header={"Design & Dev"} body={"In order to deliver a better overall experience, we place a lot of emphasis on the design of the content and the development of the product."}/>
        <Cards type="secondary" header={"Design & Dev"} body={"In order to deliver a better overall experience, we place a lot of emphasis on the design of the content and the development of the product."}/>
        <Cards type="primary" header={"Design & Dev"} body={"In order to deliver a better overall experience, we place a lot of emphasis on the design of the content and the development of the product."}/>
      </div>
    </div>
  );
}

Contact

import React from 'react';
import Contact from "./components/contact/Contact";

export default function App() {
  return (
    <div>
      <Contact company_name={"EVOLVE.IO"} company_mail_id={"xyz@gmail.com"}/>
    </div>
  );
}

Cards

import React from 'react';
import Cards from "./components/cards/Cards";

export default function App() {
  return (
      <div className="cards_services">
        <Cards type="primary" header={"Design & Dev"} body={"In order to deliver a better overall experience, we place a lot of emphasis on the design of the content and the development of the product."}/>
        <Cards type="secondary" header={"Design & Dev"} body={"In order to deliver a better overall experience, we place a lot of emphasis on the design of the content and the development of the product."}/>
      </div>
  );
}

Use primary theme for the left card and secondary for the right card

Footer

import React from 'react';
import Footer from './components/footer/Footer';

export default function App() {
  return (
    <div>
      <Footer email={"evolvewithaesthetico@gmail.com"} contact={"999xxxxxxx"} instagramlink={"#"} linkedinlink={"#"} twitterlink={"#"}/>
    </div>
  );
}

Buttons

import React from 'react';
import PrimaryButton from './components/minute-components/forms/buttons/PrimaryButton';
import SecondaryButton from './components/minute-components/forms/buttons/SecondaryButton';

export default function App() {
  return (
    <div>
      <PrimaryButton name="Button"/>
      <SecondaryButton name="Button"/>
    </div>
  );
}

Left one is based on primary theme and right one on secondary theme resp.

Headings

import React from 'react';
import PrimaryHead from "./components/headings/PrimaryHead";
import SecondaryHead from "./components/headings/SecondaryHead";

export default function App() {
  return (
    <div>
      <PrimaryHead name="Heading 1"/>
      <SecondaryHead name="Heading 2"/>
    </div>
  );
}

Upper one indicates primary heading and bottom one indicates secondary heading