Skip to content

Commit 70caca1

Browse files
lakshyabatmanlakshyabatman
authored
Divided home page into reusable components (#183)
1 parent 096fae6 commit 70caca1

File tree

21 files changed

+264
-379
lines changed

21 files changed

+264
-379
lines changed

‎src/components/Activities/ActivityCard.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react'
2+
import { Card } from 'react-bootstrap';
3+
const ActivityCard = (props) => {
4+
return (
5+
<Card style={{ width: '18rem',marginBottom:"2vh",border:"0px" }} className="shadow-lg">
6+
<Card.Img variant="top" src={props.activity.img} />
7+
<Card.Body>
8+
<Card.Title><h3>{props.activity.title}</h3></Card.Title>
9+
<Card.Text>
10+
{props.activity.text}
11+
</Card.Text>
12+
<a href={props.activity.link} class="shadow lift mr-1" style={{color:"#22247A"}}><u>Read More</u></a>
13+
</Card.Body>
14+
</Card>
15+
16+
)
17+
}
18+
19+
export default ActivityCard

‎src/components/DonateUs/Donate.css‎

Whitespace-only changes.

‎src/components/DonateUs/Donate.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react'
2+
const DonateCard = () => {
3+
return (
4+
<div class="mt-10 container lift" style={{borderRadius:"25px",textAlign:"left",color:"white",backgroundColor:" #22247A",width:"100%"}}>
5+
<div class="row">
6+
<div class="col-md-6 co-12 ml-0 pt-6 pb-6 pl-8">
7+
<h2>Donate Us</h2>
8+
<p>COMMUNITY FUND AND PROJECT INCUBATION</p>
9+
<a href="https://opencollective.com/donut" class="ml-0 btn btn-primary shadow lift" style={{color:" #22247A",backgroundColor:"white"}}>Open Collective</a>
10+
</div>
11+
<div class="col-md-6 col-12" id="join">
12+
<p>Codeuino is a Non-Profit Open Source Social Networking organisation that provides various robust frameworks solutions which could span the entire world through building all kinds of social environments, discussion portals and collaboration.</p>
13+
</div>
14+
</div>
15+
</div>
16+
)
17+
}
18+
export default DonateCard

‎src/pages/Home/Components/Activities.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react'
2+
import ActivityCard from '../../../components/Activities/ActivityCard'
3+
import KWoC from '../images/kwoc_logo.png'
4+
import workshop19 from '../images/workshop.jpg'
5+
import './common.css'
6+
var activities = [
7+
{
8+
img:'https://1.bp.blogspot.com/-Ig-v1tDXZt4/XDODmZvWp1I/AAAAAAAAB0A/KtbFdBPFVQw2O15FekkIR0Yg8MUp--rngCLcBGAs/s1600/GCI%2B-%2BVertical%2B-%2BGray%2BText%2B-%2BWhite%2BBG.png',
9+
title:'Google CodeIN 2019-20',
10+
text:'Competition for preschool.',
11+
link:'/#/gci19'
12+
},
13+
{
14+
img:'https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://numfocus.org/wp-content/uploads/2017/03/vertical-gsoc-logo_1-1.jpg',
15+
title:'Google Summer of Code 2019',
16+
text:'Competition for undergraduate students.',
17+
link:'/#/gsoc19'
18+
},
19+
{
20+
img:KWoC,
21+
title:'Kharagpur Winter of Code 2019',
22+
text:'Competition for undergraduate students.',
23+
link:'/#/kwoc19'
24+
},
25+
{
26+
img:workshop19,
27+
title:'ORGANISED A WORKSHOP/ EVENT AT NEW DELHI TOGETHER WITH WOMEN WHO CODE',
28+
text:'Competition for undergraduate students.',
29+
link:'/#/workshop19'
30+
},
31+
]
32+
33+
const MapActivites = activities.map((activity,index)=>{return <ActivityCard key={index} activity={activity}/> })
34+
35+
36+
const Activities = () => {
37+
return (
38+
<div id="activity">
39+
<h1 className="component-heading">Activities</h1>
40+
<div class="container">
41+
<div class="row"style={{display:"flex",justifyContent:"space-around"}}>
42+
{MapActivites}
43+
</div>
44+
</div>
45+
</div>
46+
)
47+
}
48+
49+
export default Activities

‎src/pages/Home/Components/LandingPageComponent.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react'
2+
import Banner from '../images/banner.svg';
3+
import poster from '../images/poster.svg';
4+
5+
import DonateCard from '../../../components/DonateUs/Donate'
6+
const LandingPageComponent = () => {
7+
return (
8+
<section class="pt-4 pt-md-5">
9+
<div class="container">
10+
<div class="row align-items-center">
11+
<div class="col-12 col-md-5 col-lg-6 order-md-2">
12+
<img src={Banner} class="img-fluid mw-md-100 mw-lg-100 mb-6 mb-md-0" alt="all-channels" />
13+
</div>
14+
<div class="col-12 col-md-7 col-lg-6 order-md-1">
15+
<h1 class="display-3 text-center text-md-left">Learn, Build, Contribute, Grow.<br/><span class="text-primary"><span><span></span></span></span></h1>
16+
<p class="lead text-center text-md-left text-muted mb-6 mb-lg-8">We are a Non-Profit Open Source Social Networking organisation that provides various robust frameworks solutions which could span the entire world.</p>
17+
<div class="text-center text-md-left"><a href="https://github.com/codeuino" class="btn btn-primary shadow lift pr-5 mr-1" style={{backgroundColor:" #22247A"}}><span class="fe fe-github mr-1"></span>Github</a>
18+
<a href="http://slack.codeuino.org" class="btn btn-primary shadow lift pr-5 mr-1" style={{backgroundColor:" #22247A"}}><span class="fe fe-slack mr-1"></span>Slack</a>
19+
</div>
20+
</div>
21+
</div>
22+
<DonateCard/>
23+
<div class="container mt-10 ml-0" style={{width:"100%",alignContent:"left"}}>
24+
<div class="row" style={{textAlign:"left"}}>
25+
<div class="col-md-4 col-12">
26+
<span class="fa fa-question-circle fa-2x mr-1" style={{color:" #22247A"}}></span>
27+
<h2>What is Codeuino?</h2>
28+
<p>Codeuino is a Non-Profit Open Source Social Networking organisation that provides various robust frameworks solutions which could span the entire world through building all kinds of social environments, discussion portals and collaboration platforms by giving prospectus to various other organisations, users and outreaches to showcase their products in a custom way. This wide social open networking framework organisation is driven by volunteers all over the globe. This helps open source enthusiast to build up various technocratic social wide living software and researching FOSS projects under code survivors and challenging world. Codeuino takes into the house the development of some of the coolest Open Source Projects that are made with the sole motive to benefit more and more people present all over the world..</p>
29+
</div>
30+
<div class="col-md-4 col-12">
31+
<span class="fa fa-user-circle fa-2x mr-1" style={{color:" #22247A",}}></span>
32+
<h2>Who we Are?</h2>
33+
<p>We are a group of young open-source contributors creatively leveraging our expertise in Social networking and development projects to improve the quality of outreaching, interaction and collaboration for the people in developing nations. We consist of various teams from Development, Documentation, Designers and Donut Platform. Everyone at Codeuino contributes to increase efficiency, outreaching for the user and expedite idea generation for social networking.</p>
34+
</div>
35+
<div class="col-md-4 col-12">
36+
<span class="fa fa-check fa-2x mr-1" style={{color:" #22247A"}}></span>
37+
<h2>What do we do?</h2>
38+
<p>Codeuino takes into the house the development of some of the coolest Open Source Projects that are made with the sole motive to benefit more and more people present all over the world.</p>
39+
<p>Teams within organization design and develop some basic set of software and networking plugins to help users/organisations to build up their own platform to interact for feeds, projects, Scholarships, etc.</p>
40+
<p>We build social networking Kit/FOSS for various organisations to build up the social environment for their organisation to showcase their products and services for their community along with the collaboration platform to interact with one another.</p>
41+
</div>
42+
</div>
43+
</div>
44+
<img class="mt-10" src={poster} style={{width:"100%"}}/>
45+
</div>
46+
47+
</section>
48+
49+
)
50+
}
51+
52+
export default LandingPageComponent

‎src/pages/Home/Components/Partners.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react'
2+
import wwc from '../images/wwc.jpeg';
3+
import dgocean from '../images/dgocean.svg';
4+
import DonateCard from '../../../components/DonateUs/Donate'
5+
import './common.css'
6+
const Partners = () => {
7+
return (
8+
<section>
9+
<div>
10+
<div className="container" style={{justifyContent:"space-evenly",display:"flex",marginTop:50}}>
11+
<div class="row">
12+
<div class="col-6">
13+
<h2 className="component-heading">Our Partners</h2>
14+
<img src={wwc} style={{width:"60%",height:"60%"}}/>
15+
</div>
16+
<div class="col-6">
17+
<h2 className="component-heading">Our Sponsers</h2>
18+
<img src={dgocean} style={{width:"60%",height:"60%"}}/>
19+
</div>
20+
</div>
21+
</div>
22+
</div>
23+
<div className="mb-5">
24+
<DonateCard/>
25+
</div>
26+
27+
</section>
28+
)
29+
}
30+
export default Partners

‎src/pages/Home/Components/Projects.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React from 'react'
2+
import donut from '../images/donut.svg';
3+
import codebadge from '../images/codebadge.svg';
4+
import card from '../images/card.svg'
5+
import './common.css'
6+
const Projects = () => {
7+
return (
8+
<section class="mt-5 pt-md-11">
9+
<div class="container">
10+
<div class="row justify-content-center">
11+
<div class="col-12 col-md-10 col-lg-10 text-center"><span class="badge badge-pill badge-primary-soft mb-3"><span class="h6 text-uppercase font-weight-bold">Opensource</span></span>
12+
<h1 class="component-heading">Our Projects</h1>
13+
{/* <p class="font-size-lg text-muted mb-7">Codeuino is a Non-Profit Open Source Social Networking organisation that provides various robust frameworks solutions which could span the entire world through building all kinds of social environments, discussion portals and collaboration platforms by giving prospectus to various other organisations, users and outreachers to showcase their products in a custom way. This wide social open networking framework organisation is driven by the volunteers all over the globe. This helps open source enthusiast to build up various technocratic social wide living softwares and researching FOSS projects under code survivors and challenging world. Codeuino takes into house the development of some of the coolest Open Source Projects that are made with the sole motive to benefit more and more people present all over the world.</p> */}
14+
<div class="row">
15+
<div class="col-md-6 col-12" style={{display:"flex",justifyContent:"space-around"}}>
16+
<img src={donut}/>
17+
</div>
18+
<div class="col-md-6 col-12">
19+
<h1>Donut</h1>
20+
<p>Donut is an open-source, feature-rich, highly flexible and privacy-friendly, social networking platform built for community-oriented collaboration in a customized way. It has been built on the Node.js framework allowing an essential impetus to provide custom and friendly rich widgets and an expansive library of modules to make communication and collaboration easy and successful. With a powerful module system, you can customize this platform by using third party tools, writing your own or integrating other software.</p>
21+
<div class="container" style={{display:"flex",justifyContent:"space-around"}}>
22+
<div class="row">
23+
<a href="https://github.com/codeuino/Social-Platform-Donut" class="btn btn-primary shadow lift mr-1" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><span class="fe fe-github"></span></a>
24+
<a href="https://www.youtube.com/watch?v=wYk71_KY6Bk" class="btn btn-primary shadow lift mr-1" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><span class="fe fe-youtube"></span></a>
25+
<a href="https://docs.codeuino.org/documentation/donut-docs/donut-documentation" class="btn btn-primary shadow lift mr-1" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><span class="fe fe-file"></span></a>
26+
</div>
27+
</div>
28+
</div>
29+
<div class="col-md-6 col-12">
30+
<h1>Codebadge</h1>
31+
<p>Codebadge is an open-source, user-friendly, visual-oriented collaboration tool which incorporates development of badges and integrating with forums in a customized way. Codebadge communicate skills, achievements and contribution tracking by providing visual symbols of accomplishments packed with verifiable data and evidence that can be shared across the web. It is a standard organization-oriented project that provides an essential impetus to Admins and users with an appropriate dashboards.</p>
32+
<div class="container" style={{display:"flex",justifyContent:"space-around"}}>
33+
<div class="row">
34+
<a href="https://github.com/codeuino/Codebadge" class="btn btn-primary shadow lift mr-1" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><span class="fe fe-github"></span></a>
35+
<a href="https://www.youtube.com/watch?v=s1gDGjJtmpk" class="btn btn-primary shadow lift mr-1" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><span class="fe fe-youtube"></span></a>
36+
<a href="https://docs.codeuino.org/documentation/codebadge/codebadge-documentation" class="btn btn-primary shadow lift mr-1" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><span class="fe fe-file"></span></a>
37+
</div>
38+
</div>
39+
</div>
40+
<div class="col-md-6 col-12 mt-10"style={{display:"flex",justifyContent:"space-around"}}>
41+
<img src={codebadge}/>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
<div class="index-content">
47+
<div class="form-row">
48+
<div class="shadow-light-lg overflow-hidden">
49+
<div class="row">
50+
<div class="col-12">
51+
<div class="card shadow-light-lg overflow-hidden text-center text-lg-left">
52+
<div class="row">
53+
54+
<div class="col-md-7">
55+
<div class="card-body py-7 py-md-9">
56+
<h4 class="font-weight-bold">Design Project</h4>
57+
<p class="text-muted mb-0">To all the designers in the world something big is comming soon! Update your tools for the battle.</p>
58+
</div>
59+
</div>
60+
<div class="col-md-3">
61+
<h1 class="mt-5">Comming Soon</h1>
62+
</div>
63+
<div class="col-md-2">
64+
<img src={card} class="h-75 position-absolute right-0 mt-6 mr-3" alt="Productivity" />
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
70+
</div>
71+
</div>
72+
{/* </div> */}
73+
</div>
74+
</div>
75+
{/* <img src="https://d33wubrfki0l68.cloudfront.net/952392990c72334768fe8a1bbf2abb95f18dabfc/574b9/static/dashboard-screen-a4681e6a8cbc13190924ce784fdcc815.png" alt="DashboardScreenshot" class="img-fluid" /> */}
76+
</div>
77+
<section class="pt-30 mt-n15 bg-gray-200 position-relative">
78+
</section>
79+
</section>
80+
)
81+
}
82+
export default Projects

‎src/pages/Home/Components/common.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.component-heading{
2+
margin-bottom: 60px;
3+
font-weight: 600;
4+
font-size:48px;
5+
}

0 commit comments

Comments
 (0)