Skip to content

Commit

Permalink
Upgrade site and white paper to version 2.0 (#40)
Browse files Browse the repository at this point in the history 
* Update .vscode to prevent auto format on save

* Remove extra text on download page

* Add the newsletter component to the download page

* Fix the off-brand colors of the social icons

* Update newsletter section style and copy

* Disable scroll to top on load

* Begin splash section update

* Add new padding variations

* Add new version of the newsletter signup component

This creates a new copy of the existing newsletter component, with styling differences specific to the homepage hero section. I considered refactoring the existing newsletter component so that it could work at the footer and/ or the hero section, but opted instead for the simplicity of duplicating the component because I don't expect this to be a long-lived component.

* Update h2 size to 40px

This (40px) is the size in the Sketch file.

* Add the learn how it works section to the homepage

* Fix a bug with the class vpad-thin

* Create initial version of Our Approach cards

* Add color helper classes

* Refine the style of the Our Approach cards

* Update wording and style of Events section

* add "circuit" splash section

* change faq page splash section to the "circuit" splash section

* Create the new As Seen In section

* add contact page template to site

* add custom splash section to contact page

* add new logo

* switch to classes, new logo and thinner navbar on desktop

* update faq-section to contact-section

* clear out faq scss from contact.component.scss

* Update our approach graphics

* Refine press section in tablet resolution ranges

* Refine our approach section responsiveness

* Remove extraneous character

* New hero style - take 1

* Add bird graphic to press section

* Refine bird graphic for responsiveness

* Add four little dots background image

* Add the 4th floating island graphic

* Update homepage hero for all resolutions

* Adjust hero to jive with the new navbar

* Copy /network into a new /how-it-works component

* Update nav items

* add social icons for contact page

* add sidebar to contact page

* add contact form

* remove fetch when testing contact form on localhost

* add new about-us assets

* update about page content and styling

* increase font size of splash section h1

* Update global h1 size

* Create first two how it works sections for desktop

* Make first two how it works sections responsive

* First working zig-zag grid

* Add progress indication svgs

* Implement a more robust zig zag

* Add the end piece of the zig zag

* Add progress dots

* Add a new light purple color variable

* Add the active state for section nav

* switch to new spash section

* Add the how it works content

* Add the entry to the explainer sections

* Add navigation links with smooth scrolling

* fix splash section responsive issues

* use consistent padding for contact page inputs

* switch splash-circuit section to flexbox and polish styles

* Style how it works for mobile

* Fix minor alignment issue

* add meta service

* add social image for contact page

* add meta tags to about page

* remove default meta tags from all pages

* add a "clearAllTags" method

* account for OpenGraph tags using "property" instead of "name"

* impliment "updateTag" method

* add comment describing "setGlobalX" methods

* add default meta tags back in

* add "remove" method

* run typscript formatter

* move "og:url" meta tag from the default tags to the home page

* add meta tags to contact page

* switch founders images back to what's on the live site.

* Update founders copy

* Change Seven to Steven

* shorten the "about us" page description

* update the company social image

* add a "how it works" social image

* add an index social image

* fix typescript indentation

* Update homepage copy

* add comment explaining purpose of meta tag filters

* Fix GDPR consent styling bug in hero section

* remove title service and title map

* add title and description to vision page

* add title and description to ToS page

* add title to privacy policy page

* add title, description, and social iamge to how-it-works page

* add title to home page

* add title and description to network page

* add title and description to download page

* add title and description to events page

* add title and description to FAQ page

* fix url to default social image

* update default social image to a 16x9 aspect ratio

* Decrease alpha of button box shadows

* pull in updated descriptions from spreadsheet

* fix max-height image sizing issue

* fix another viewport height related sizing issue

* Update to white paper 2.0
  • Loading branch information
@nhandler
nhandler authored Nov 19, 2019
2 parents 8bfd9a8 + 2072912 commit 8e81bb9
Show file tree
Hide file tree
Showing 112 changed files with 10,546 additions and 1,620 deletions.
5 changes: 3 additions & 2 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{
"vsicons.presets.angular": true
}
"vsicons.presets.angular": true,
"editor.formatOnSave": false
}
82 changes: 82 additions & 0 deletions src/app/MetaService.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { Injectable } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

@Injectable({
providedIn: 'root',
})

export class MetaService {
constructor(private title: Title, private meta: Meta) { }

clearAllTags() {

// Only remove og, twitter, and description meta tags to avoid removing things like the viewport tag.

let tags = this.meta.getTags('property^="og:"');
for (let i = 0; i < tags.length; i++) {
this.meta.removeTagElement(tags[i])
}

tags = this.meta.getTags('name^="twitter:"');
for (let i = 0; i < tags.length; i++) {
this.meta.removeTagElement(tags[i])
}

this.meta.removeTag('name="description"');
}

update(name: string, value: string) {
let tag = null;

// OG tags use the "property" attribute instead of "name"
if (/^og:/.test(name)) {
tag = this.meta.getTag(`property="${name}"`);
} else {
tag = this.meta.getTag(`name="${name}"`);
}

if (name === 'title') {
this.title.setTitle(value);
} else if (tag) {
if (/^og:/.test(name)) {
this.meta.updateTag({ name: name, content: value }, `property="${name}"`)
} else {
this.meta.updateTag({ name: name, content: value }, `name="${name}"`)
}
} else {
if (/^og:/.test(name)) {
this.meta.addTag({ property: name, content: value })
} else {
this.meta.addTag({ name: name, content: value })
}
}
}

remove(name: string, value: string) {
// OG tags use the "property" attribute instead of "name"
if (/^og:/.test(name)) {
this.meta.removeTag(`property="${name}"`);
} else {
this.meta.removeTag(`name="${name}"`);
}
}

// The following "setGlobalX" functions refer to "global" as covering the three major meta schemas: w3c, OpenGraph, and Twitter.
setGlobalImage(image: string) {
if (!/^https:\/\//.test(image)) {
image = `https://www.orchid.com${image}`;
}
this.update('og:image', image);
this.update('twitter:image', image);
}
setGlobalDescription(description: string) {
this.update('description', description);
this.update('og:description', description);
this.update('twitter:description', description);
}
setGlobalTitle(title: string) {
this.update('title', title);
this.update('og:title', title);
this.update('twitter:title', title);
}
}
267 changes: 79 additions & 188 deletions src/app/about-company/about-company.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,198 +1,89 @@
<div class="bk-beige-light">
<section id="splash">
<div id="splash-text">
<header>
<h1>About us</h1>
</header>
<p>
Orchid was founded in 2017, on the principle that the internet should be more open and more accessible, to
everyone. In 2017 and 2018, Orchid successfully raised more than $48 million, and those funds immediately went
towards building the Orchid team – now with offices in CA and Berlin – and to creating the technology and
products that will advance our mission.
</p>
</div>
<div id="splash-image">
<img src="/assets/img/company/splash/splash.svg" alt="splash image">
</div>
</section>
</div>

<div>
<section id="news" class="section-wide hpad-wide vpad-wide">
<div id="news-feature" class="conv-2up">
<div class="conv2-left">
<div class="conv-169-wrapper">
<iframe class="conv-169" src="https://www.youtube.com/embed/qo0R6ww4Hvc" frameborder="0"
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="conv2-right">
<h4>Can decentralized technologies preserve democracy? (Oslo Freedom Forum)</h4>
<p>
Dr. Seven Waterhouse, Orchid co-founder & CEO discusses solutions to combat the global rise of centralized
surveillance states and how decentralization of the global internet architecture could be the key to
preserving democracy, privacy, and individual rights.
</p>
</div>
</div>
<div id="news-sep"></div>
<div class="conv-2up">
<div class="conv2-left"><img src="/assets/img/company/news/a1.png" alt="" class="conv-image"></div>
<div class="conv2-right">
<h4>
<a href="https://medium.com/orchid-labs/why-we-need-a-better-vpn-aebe8c352984">
Why We Need a Better VPN
</a>
</h4>
<p>
As dueling interests move to control the future of the internet, users around the globe are increasingly
turning to VPNs. But what users don't know is that many VPNs fail to provide the security and privacy that
they advertise.
</p>
<div class="about-company__page-container">
<div class="bk-beige-light about-company__splash-container">
<section class="about-company__splash">
<div class="about-company__splash-text-container">
<h1>We can <br> reclaim the <br> internet <br> <span class="big">together</span></h1>
</div>
</div>
<div class="conv-2up">
<div class="conv2-left"><img src="/assets/img/company/news/a2.png" alt="" class="conv-image"></div>
<div class="conv2-right">
<h4>
<a href="https://medium.com/orchid-labs/access-denied-restoring-the-internets-openness-cca9181dd32c">
Access Denied: Restoring the Internet's Openness
</a>
</h4>
<p>
Governments and corporate interests are competing to own the future of the internet, and with it, control
information and personal data. As users, developers, and investors, how can we take back control?
</p>
<div class="about-company__splash-image-container">
<img src="/assets/img/company/splash/splash-foreground.svg" width="868" height="706" alt="splash image">
</div>
</div>
<div class="conv-2up">
<div class="conv2-left"><img src="/assets/img/company/news/a3.png" alt="" class="conv-image"></div>
<div class="conv2-right">
<h4>
<a href="https://medium.com/orchid-labs/the-commodification-of-you-36555f4e055e">
The Commodification of You
</a>
</h4>
<p>
How ISPs, apps, third parties, and websites are raking in the big bucks by tracking your clicks, emails, and
purchases&#x2014;and what we can do to control our digital identities.
</p>
</div>
</div>
</section>
</div>
</section>
</div>

<div class="bk-lavender">
<section id="founders" class="section-wide hpad-wide vpad-wide">
<h2>Founders</h2>
<p class="gap-bot-wide section-narrow center-text">
Orchid’s founders bring together deep experience in the open source software community (BASH Shell, GNU Finger),
technology management (RPX IPO), blockchain investment (Bitstamp, Pantera Capital), jailbroken app package
management (Cydia) and security (Wells Fargo’s 1st Online Banking, Ethereum core security team).
</p>
<ul id="founder-list" class="phantom-list">
<li class="waterhouse">
<img class="founder-image" src="/assets/img/company/founders/steven-waterhouse.jpg" alt="Dr. Seven Waterhouse">
<h4 class="center-text"><a href="https://www.linkedin.com/in/waterhousephd/" target="_blank"
rel="noopener noreferrer">Dr. Seven Waterhouse</a></h4>
</li>
<li>
<img class="founder-image" src="/assets/img/company/founders/brian-j-fox.png" alt="Brian J. Fox">
<h4 class="center-text"><a href="https://www.linkedin.com/in/brianjhanfox/" target="_blank"
rel="noopener noreferrer">Brian J. Fox</a></h4>
</li>
<li>
<img class="founder-image" src="/assets/img/company/founders/saurik.jpg" alt="Jay Freeman">
<h4 class="center-text"><a href="http://www.saurik.com/" target="_blank" rel="noopener noreferrer">Jay
Freeman</a></h4>
</li>
<li>
<img class="founder-image" src="/assets/img/company/founders/gustav-simonsson.png" alt="Gustav Simonsson">
<h4 class="center-text"><a href="https://medium.com/@gustav.simonsson" target="_blank"
rel="noopener noreferrer">Gustav Simonsson</a></h4>
</li>
</ul>
</section>
</div>
<div class="about-company__centered-text-section-container">
<div class="about-company__centered-text-floating-circle-1"></div>
<div class="about-company__centered-text-floating-circle-2"></div>

<div>
<section id="funding" class="section-wide hpad-wide vpad-wide">
<h2>Backed by leading investors</h2>
<ul class="phantom-list sale-icons">
<li><img class="sale-icon" src="/assets/img/company/funders/logo-dfj.png" alt="DFJ"></li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-andreesen.png" alt="Andreessen Horowitz"></li>
<li><img class="sale-icon relaxed" src="/assets/img/company/funders/logo-sequoia.png" alt="Sequoia"></li>
</ul>
<ul class="phantom-list sale-icons">
<li><img class="sale-icon" src="/assets/img/company/funders/logo-yes.png" alt="Yes VC"></li>
<li><img class="sale-icon relaxed" src="/assets/img/company/funders/logo-danhua-cap.png" alt="Danhua Capital">
</li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-c.png" alt="C"></li>
<li><img class="sale-icon relaxed" src="/assets/img/company/funders/logo-meta.png" alt="MetaStable"></li>
</ul>
<ul class="phantom-list sale-icons">
<li><img class="sale-icon" src="/assets/img/company/funders/logo-blockchain.png" alt="Blockchain Capital"></li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-box-group.png" alt="Box Group"></li>
</ul>
<div class="gap-bot-wide quote">
<p class="what center-text">
“Orchid struck us as one of the first killer apps that we can see getting broad appeal. It also has an important
mission that we think is very timely in the world today.”
</p>
<p class="who center-text">
<em>— Matt Huang, Former Sequoia partner and Paradigm co-founder (Business Insider, Nov. 2017)</em>
<section class="about-company__centered-text-section section-med hpad-wide vpad-wide center-text">
<p>The Internet opened up an unlimited world of information. Its creators invited us to bring our curiosity and explore that world freely.</p>

<p>As the Internet grew, exploring freely became harder. Web 2.0 business models incentivized companies to watch and track us and sell our data. And in some places, limits were placed on the information we can see.</p>

<p>But that is changing. The decentralized Web 3.0 being built on Ethereum is allowing the Internet to be reclaimed by its users.</p>

<p>At Orchid we share in this mission. We use Web 3.0 technology to offer users better digital privacy today, so we can realize the promise of the Web 1.0 and explore freely again.</p>

<p>Orchid was founded in 2017 to help restore the open and accessible Internet for everyone. Since then, we have grown an incredible team based in San Francisco and Berlin that is releasing the Orchid tokenized VPN in Q4 2019.</p>
</section>
</div>

<div class="bk-lavender">
<section class="about-company__founders-section section-wide hpad-wide vpad-wide">
<h2>Founders</h2>
<p class="gap-bot-wide section-narrow center-text">
Orchid’s founders bring together deep experience in the open source software community (BASH Shell, GNU Finger), technology management (RPX IPO), blockchain investment (Pantera Capital), jailbroken app package management (Cydia) and security (Wells Fargo’s 1st Online Banking employee, Ethereum core security team).
</p>
</div>
<ul class="phantom-list sale-icons saft-raise">
<li><img class="sale-icon" src="/assets/img/company/funders/logo-wing.png" alt="Wing"></li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-foundation-capital.png" alt="Foundation Capital">
</li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-blockchange-capital.png"
alt="BlockChange Capital"></li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-scytale-ventures.png" alt="Scytale Ventures">
</li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-standard-kepler.png" alt="Standard Kepler"></li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-hack-vc.png" alt="Hack VC"></li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-struck-capital.png" alt="Struck Capital"></li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-moon-capital.png" alt="Moon Capital"></li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-springview-capital.png" alt="Springview Capital">
</li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-altair-capital.png" alt="Altair Capital"></li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-kittyhawk.png" alt="KittyHawk"></li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-crypto-bazar.png" alt="Crypto Bazar"></li>
<li><img class="sale-icon" src="/assets/img/company/funders/logo-day-one.png" alt="Day One Ventures"></li>
</ul>
</section>
</div>
<ul id="founder-list" class="phantom-list">
<li class="waterhouse">
<img class="founder-image" src="/assets/img/company/founders/steven-waterhouse.jpg"
alt="Dr. Steven Waterhouse">
<h4 class="center-text"><a href="https://www.linkedin.com/in/waterhousephd/" target="_blank"
rel="noopener noreferrer">Dr. Steven Waterhouse</a></h4>
</li>
<li>
<img class="founder-image" src="/assets/img/company/founders/brian-j-fox.jpg" alt="Brian J. Fox">
<h4 class="center-text"><a href="https://www.linkedin.com/in/brianjhanfox/" target="_blank"
rel="noopener noreferrer">Brian J. Fox</a></h4>
</li>
<li>
<img class="founder-image" src="/assets/img/company/founders/jay-freeman.jpg" alt="Jay Freeman">
<h4 class="center-text"><a href="http://www.saurik.com/" target="_blank" rel="noopener noreferrer">Jay
Freeman</a></h4>
</li>
</ul>
</section>
</div>

<div class="bk-lavender">
<section id="corporate-info" class="section-med hpad-wide vpad-wide">
<div id="corporate-header">
<h2>Corporate info</h2>
<p>Orchid is a Delaware c-corp</p>
</div>
<div id="corporate-address">
<address>
Headquarters:<br>
1288 Columbus Ave. #122,<br>
San Francisco, CA 94133
</address>
<address>
Europe:<br>
Skalitzer Str. 85,<br>
10997 Berlin, Germany
</address>
</div>
<div class="z-index-1" id="corporate-buttons">
<button (click)="go_sec()" class="btn-primary btn-fixed">SEC Filing</button>
<button (click)="go_press()" class="btn-primary btn-fixed">Press Kit</button>
</div>
<div class="adorner" id="buttons-adorner">
<div class="pos-relative">
<img class="adorner-image" src="/assets/img/company/buttons-adorner.png">
<div>
<section class="about-company__corporate-info-section section-med hpad-wide vpad-wide">
<div id="corporate-header">
<h2>Corporate info</h2>
<p>Orchid is a Delaware c-corp</p>
</div>
</div>
</section>
<div id="corporate-address">
<address>
Headquarters:<br>
1288 Columbus Ave. #122,<br>
San Francisco, CA 94133
</address>
<address>
Europe:<br>
Skalitzer Str. 85,<br>
10997 Berlin, Germany
</address>
</div>
<div class="z-index-1" id="corporate-buttons">
<button (click)="go_sec()" class="btn-primary btn-fixed">SEC Filing</button>
<button (click)="go_press()" class="btn-primary btn-fixed">Press Kit</button>
</div>
<div class="adorner" id="buttons-adorner">
<div class="pos-relative">
<img class="adorner-image" src="/assets/img/company/buttons-adorner.png">
</div>
</div>
</section>
</div>

</div>

<app-newsletter-signup></app-newsletter-signup>
Loading

0 comments on commit 8e81bb9

Please sign in to comment.