Merge pull request #32 from ng-girls/ng-rome-2023

feat: add NG ROME 2023

src/app/app-routing.module.ts

@@ -1,8 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { CocComponent } from './coc/coc.component';
+import { FaqComponent } from './faq/faq.component';
 import { EventComponent } from './event/event.component';
 
 const routes: Routes = [
+  { path: 'faq', component: FaqComponent },
+  { path: 'coc', component: CocComponent },
   { path: 'event/:eventId', component: EventComponent, data: { animation: 'event' } },
   { path: '**', redirectTo: '' }
 ];

src/app/app.module.ts

@@ -16,6 +16,8 @@ import { CommunityComponent } from './community/community.component';
 import { TeamComponent } from './team/team.component';
 import { FooterComponent } from './footer/footer.component';
 import { SeeYouComponent } from './see-you/see-you.component';
+import { CocComponent } from './coc/coc.component';
+import { FaqComponent } from './faq/faq.component';
 
 @NgModule({
   declarations: [
@@ -27,7 +29,9 @@ import { SeeYouComponent } from './see-you/see-you.component';
     CommunityComponent,
     TeamComponent,
     FooterComponent,
-    SeeYouComponent
+    SeeYouComponent,
+    CocComponent,
+    FaqComponent
   ],
   imports: [
     BrowserModule,

src/app/coc/coc.component.html

@@ -0,0 +1,32 @@
+<div class="event-container">
+    <div class="header-row">
+      <div class="event-title">
+        <h1>Code of Conduct</h1>
+      </div>
+    </div>
+    <p>ngGirls aims to be a welcoming event, where people meet in a friendly environment. Accordingly, we expect that all participants are expected to show respect and courtesy to other participants throughout the workshop.
+        To make clear what is expected, all delegates/attendees, speakers, exhibitors, organizers and volunteers at any ngGirls event are required to conform to the following Code of Conduct. Organizers will enforce this code before and throughout the event.</p>
+    <h2 class="coc-title">In Short</h2>
+    <div class="coc-body">
+        <ul>
+            <li>ngGirls is dedicated to providing a harassment-free workshop experience for everyone, regardless of gender, sexual orientation, disability, physical appearance, body size, race, or religion.</li>
+            <li> We do not tolerate harassment of workshop participants in any form.</li>
+            <li>Sexual language and imagery is not appropriate for any workshop venue, including talks.</li>
+            <li>Be kind to others. Do not insult or put down other attendees. Behave professionally. Don’t publish photographs of people without their consent. Remember that harassment and sexist, racist, or exclusionary jokes are not appropriate for ngGirls.</li>
+            <li>Participants violating these rules may be sanctioned or expelled from the workshop without a refund at the discretion of the workshop organizers.</li>
+        </ul>
+    </div>
+    <h2 class="coc-title">Longer Version</h2>
+    <div class="coc-body">
+        <p>Harassment includes offensive verbal comments related to gender, sexual orientation, disability, physical appearance, body size, race, religion, sexual images in public spaces, deliberate intimidation, stalking, following, harassing photography or recording, sustained disruption of talks or other events, inappropriate physical contact, and unwelcome sexual attention.</p>
+        <p>Participants asked to stop any harassing behavior are expected to comply immediately.</p>
+        <p>Be careful in the words that you choose. Remember that sexist, racist, and other exclusionary jokes can be offensive to those around you. Excessive swearing and offensive jokes are not appropriate for ngGirls.</p>
+        <p>If a participant engages in harassing behavior, the workshop organizers may take any action they deem appropriate, including warning the offender or expulsion from the workshop with no refund. </p>
+        <p>We expect participants to follow these rules at all workshop venues and workshop-related social events.</p>
+    </div>
+    <h2 class="coc-title">Reporting harassment</h2>
+    <div class="coc-body">
+        <p>If you are being harassed, notice that someone else is being harassed, or have any other concerns, please contact your coach or one of the organizers immediately. </p>
+        <p> The staff is well informed on how to deal with the incident and how to further proceed with the situation. Conference staff will be happy to help participants contact hotel/venue security or local law enforcement, provide escorts, or otherwise assist those experiencing harassment to feel safe for the duration of the conference. We value your attendance.</p>                    
+    </div>
+  </div>

src/app/coc/coc.component.scss

@@ -0,0 +1,25 @@
+.event-container {
+    border-radius: 6px;
+    background: linear-gradient(to right bottom, rgba(255, 240, 245, 0.82), rgba(179, 101, 101, 82%));
+    box-shadow: 4px 7px 6px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+
+
+    color: #1a191f;
+    margin-bottom: 40px;
+    padding: 20px;
+  }
+
+  .coc-body {
+    padding-left: 2%;
+    text-align: left;
+  }
+
+  .coc-body ul{
+    padding-left: 5%;
+    padding-right: 5%;
+    text-align: left;
+}
+.coc-title{
+    padding-left: 2%;
+    text-align: left;
+  }

src/app/coc/coc.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CocComponent } from './coc.component';
+
+describe('CocComponent', () => {
+  let component: CocComponent;
+  let fixture: ComponentFixture<CocComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CocComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CocComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/coc/coc.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-coc',
+  templateUrl: './coc.component.html',
+  styleUrls: ['./coc.component.scss']
+})
+export class CocComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/event.service.ts

@@ -18,6 +18,20 @@ Feeling like family, we're happy to come back to Warsaw for the wonderful commun
 where the participants are enthusiastic and the mentors are so committed. <br/>
 <b>ngGirls @ NG Poland</b> will take place on Sunday, November 5th, from 10:00-17:00. For more details and application: `,
     sponsors: [{ link: 'http://ng-poland.pl/', logo: 'assets/events/ngpoland-2022/ngPoland.png' }]
+  },
+  {
+    id: 'rome-2023',
+    title: 'ngGirls @ NG ROME MMXXIII',
+    location: 'Rome',
+    city: 'Rome',
+    state: 'Italy',
+    date: 'November 30',
+    year: '2023',
+    applicationForm: 'https://docs.google.com/forms/d/e/1FAIpQLSeBooyy-i1vFQ1LbOQFsxk7X4dPrwzjEdpnzYzpOHpuL-bevQ/viewform',
+    mentorsForm: 'https://docs.google.com/forms/d/e/1FAIpQLSfmk_tGgzk9SO7shtHDbO6nMUKWb-3jNrURSPzIEOZx3YIvHw/viewform',
+    announcement: `We're excited to be part of <a href="https://2023.ngrome.io/">NG ROME MMXXIII</a> - and bring the ngGirls workshop to the local community!
+<b>ngGirls @ NG ROME MMXXIII</b> will take place on Thursday, November 30th, from 9:00-17:00 in Rome. For more details and application: `,
+    sponsors: [{ link: 'https://2023.ngrome.io/', logo: 'assets/events/rome-2023/logo.svg' }]
   }
 ];
 

src/app/faq/faq.component.html

@@ -0,0 +1,34 @@
+<div class="event-container">
+    <div class="header-row">
+      <div class="event-title">
+
+        <h1>Frequently Asked Questions</h1>
+      </div>
+    </div>
+    <h2 class="coc-title">Applying and Participating - ngGirls</h2>
+
+    <div class="faq-body">
+        <h3 class="faq-title">How can I apply?</h3>
+        <p>Just fill out the application form in the specific event's website - click on "Apply for the workshop". Do you already have experience in front-end development? Apply as a mentor! </p>
+    </div>
+    <div class="faq-body">
+        <h3 class="faq-title">Where is ngGirls going to take place?</h3>
+      <p>We have many events all around the world. Check the <a href="https://www.ng-girls.org/">homepage</a> for the upcoming workshops. </p>
+    </div>
+    <div class="faq-body">
+        <h3 class="faq-title">What is the schedule of the workshop day?</h3>
+        <p>The workshop usually takes place during the day. It starts with an introduction to Angular, and then the work is independent until the closing session, with a lunch break. You will get the updated schedule by mail before the event. </p>
+     </div>
+     <div class="faq-body">
+        <h3 class="faq-title">What is the criteria for choosing applicants?</h3>
+        <p>You can read about it in our source of inspiration - <a href="http://blog.djangogirls.org/post/91067112853/djangogirls-how-we-scored-applications" target="_blank">Django Girls blog post</a>. </p>
+     </div>
+     <div class="faq-body">
+        <h3 class="faq-title">Do I need prior knowledge in programming?</h3>
+        <p>In the workshop we assume you have basic knowledge in programming. Once you know how it works in one language - it's easy to manage with JavaScript. Basic knowledge in HTML and CSS is also required, but it's really easy to learn. </p>
+     </div>
+     <div class="faq-body">
+        <h3 class="faq-title">I have no knowledge in programming whatsoever. But I’m willing to learn. Can you recommend me on some resources?</h3>
+        <p>There are many tutorials on the internet for Web development: HTML, CSS and JavaScript. You should get the grasp of how things work.<br> <a target="_blank" href="https://www.codecademy.com/">Codecademy</a> is a good place to start, since it provides a platform for coding while learning. </p>
+     </div>
+  </div>

src/app/faq/faq.component.scss

@@ -0,0 +1,31 @@
+.event-container {
+    border-radius: 6px;
+    background: linear-gradient(to right bottom, rgba(255, 240, 245, 0.82), rgba(179, 101, 101, 82%));
+    box-shadow: 4px 7px 6px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+
+
+    color: #1a191f;
+    margin-bottom: 40px;
+    padding: 20px;
+  }
+
+  .faq-body {
+    padding-left: 2%;
+    text-align: left;
+    margin-bottom: 20px;
+  }
+
+  .coc-body ul{
+    padding-left: 5%;
+    padding-right: 5%;
+    text-align: left;
+}
+.coc-title{
+    padding-left: 2%;
+    text-align: left;
+    margin-bottom: 50px;
+  }
+.faq-title{
+    text-align: left;
+    font-weight: bold;
+  }

src/app/faq/faq.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FaqComponent } from './faq.component';
+
+describe('FaqComponent', () => {
+  let component: FaqComponent;
+  let fixture: ComponentFixture<FaqComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FaqComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FaqComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/faq/faq.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-faq',
+  templateUrl: './faq.component.html',
+  styleUrls: ['./faq.component.scss']
+})
+export class FaqComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}